Unit 3 - Responsiveness

I kept working on the same unit, and I have made some changes to the website. I have changed the footer, from links made by text to an icon for social media.

I also made changes to the CSS file. These changes are major. First I started cleaning up my mess by removing duplicate selector, and attributes. Then, I started organizing the selectors by sections. I found it useful to start from the top of the HTML page and work my way down. This way if I need to change the CSS I know exactly where the selector will be. Then, I added comments on each element class and id in the CSS file.

Finally, I started adding media queries. This was the major part of the modification. The first CSS was displaying the same layout on any device no matter the width. Now, I split the CSS into two sections. one that handles devices with min-width of 768px which are ipads, notebooks, laptops, and desktops. The second section deals with devices of max-width of 767px which are all handheld devices.

The approach I took was to change the layout in the handheld devices displayed as a block, as most web developers do nowadays. It makes the content readable and presented in a neat way.

I also, Added some color to the website. I tried to keep it clean, so I only added one color with many shades.

The difficult part of this unit was the layout of page elements. It takes a lot of effort to come up with a desirable style. And easy to "go crazy". To make the website responsive I needed to learn about media queries and watch many youtube videos to get an idea of how it is done.

This time I learned that you can change the layout of a table using CSS. I mean the table rows can be displayed block, or inline. Also, you can hide elements when you don't need them. And the most shocking one was that I could insert content into the webpage using CSS. I actually was wondering if that was possible because I found myself sometimes stuck and the easy way to solve the problem was to have CSS take care of it. And, surely it exists. This, was handy when I needed to reformat the shopping cart on a handheld device. When I made the Table header disappear because it won't look nice on a small screen I found a way to insert content just before the table data cell using CSS. And, I used this method to insert the column names when the data is displayed. I left some random data (hardcoded into the HTML page) to see how the effect works.

Now, the user with handheld devices will be happy to visit my website with no worries.

Click here to visit my website

I have included a zipped version of my website: