Project 4: CSS Boxes

In this assignment, we were taught a little bit more about using CSS code to style your web pages via walkthroughs and practice exercises. We then were given the task of updating our previous web page (in my case my Resume Website) with the new information we learned about the <span> and <div> tags. I learned how to use a container to hold all of the information on the website, and place it within the body to obtain a more enhanced looking website with separate background colors for the body itself and all of the information within the container. I learned how to make your website have either a fluid design or a fixed design, depending on how you wish the information on your site to be presented. The fluid design allows for more flexibility in Web browsers in that you can set the width of the box containing all of your content to be a certain percentage of how wide the browser is at any point in time and it will automatically condense all information in a presentable manner whenever the browser is being made smaller or larger. However, for my resume website I opted for a fixed design, as the way a resume is presented, if the content is condensed it makes it harder to read as the information is lined up certain ways in different parts of the pages that shouldn’t be altered.

The one main problem I came across on this project was that the information was not lining up as I was intending it to by editing the CSS style sheet. I realized that it was because I had been using <span> tags for several lines of content when I should have been using <div> tags. The solution was a quick fix as all I had to do was replace the misused <span> tags with their <div> counterparts. Have a look at the new version of my Web Site employing the boxes technique and let me know what you think! Michael’s Resume – Boxes Version.