Some of the homework I’ve been setting myself over summer has involved taking an existing website and completely re-building it in my own code, only looking at the source when I’m really stuck. I find this is a great way for someone who has no experience designing for the web to get practising the basic skills of front-end development; as well as this I think that copying from good examples gives me some insight into the world of screen design before I learn more of the design side in my second year of university.

I’ve finally begun building fully responsive layouts as shown in the page below, copied from a web template site. It’s not an overly complex site, however I was able to learn a lot about media queries which I’ve not used previously. As well as this I made an effort to avoid creating new classes where I could to be more reliant on selectors, something I needed to practise. For the mobile-sized version of the site I also did a lot of reading into and playing around with Javascript’s DOM, clearly something that I will need to know much more about in the future.

For now my sites will not be built using frameworks, as I believe a robust understanding of standalone HTML / CSS will be more useful to me for the time being than frameworks. The very primitive method I used was to contain elements that needed to be responsive in a div, then adjust the widths of those elements according to the screen size. In this case it pretty much means changing everything to 100% when the window is at lower widths. The main responsive elements are the navbar (with it’s heading), the four information box elements (sized at 25%, 50% and 100% for each window width) and the large blue section at the bottom.

I certainly don’t think the code is great but I have a much better grip on media queries as a result which I will carry forward with better practises in future. Currently my goal over summer is to be able to quickly re-create existing websites; I’ve been practising on site templates and I want to move into replicating sites from a .psd file – there seem to be plenty of practise files for this sort of thing online so I’ve decided to spend my summer playing around with CSS. I want to be able to code effectively according to good practises and I want to focus on writing according to the DRY principle. After that, it’s time to get deeper into the DOM and Javascript in general.

Have a look at the site here.

Advertisements