Previously I was doing some research on HTML5 (Hyper Text Markup Language) and CSS3 (Cascading Style Sheets) to learn how I can implement code to transform web pages for the Kukui Cup project websites into a responsive web design web page(s). First is first, what is this project call Kukui Cup? Basically, it is an advanced energy challenge that aims to get people to practice positive changes in their energy behaviors.
During this week of viewing the news.html file with my group I found out that incorporating responsive web design is a harder than what I expected. The hard part is mainly because of the html code included bunch of images and different sections (e.g. to display news and other results).
Initially, I was testing with this responsive grid system call Responz http://dfsc.me/css/responz/. Unfortunately nothing happen because in there were differences in the class names that the news.html had that refers to the css file. Example the css file from Responz had no class name call container so the Responz css file didn’t work at all when I transfer over to the folder containing the news.html file. With the help of my team members I tested with another responsive system call Skeleton http://www.getskeleton.com/. Fortunately Skeleton provided a css file that has the class name call container and it happens to work find with certain parts of the news.html.
From what I understand the <div> tags would put certain codes into a kind of collection for certain parts of the website. Basically, in those <div> tags I can give a class name from the css file so it will respond to the action (e.g. get smaller base on the specified amount of pixels) from the css file. Also, I notice that there were quite some images, which makes it harder to have it respond and organize when I change the size of the screen (browser).
Overall, the most challenging part in this project was trying to get everything to be spaced out evenly when the browser was re-sized. It was still a great experience even though my team had difficulty finding the right parts to the images so we can figure out how to re-size it
Overall, the most challenging part in this project was trying to get everything to be spaced out evenly when the browser was re-sized. It was still a great experience even though my team had difficulty finding the right parts to the images so we can figure out how to re-size it
No comments:
Post a Comment