This blog will detail my experiences of the BSc (Hons) Internet Application Development in the topic of ‘Client/Server Web Application Development’ which I am currently studying with Middlesex University. The first week’s topic of this lecture was about HTML and CSS.
I was asked to go to http://csszengarden.com/ and change the style and layout of the page without changing the content. Personally I have never used CSS and I have barely touched on HTML in my studies before so before I could start I headed to http://www.w3schools.com/ to look at some simple examples and tutorials on how to use these technologies before I could go ahead and start editing.
This exercise with http://csszengarden.com/ also helped me familiarize myself with CSS since creating a good looking webpage from scratch would be a daunting task for a beginner such as myself, so at least with this website I would have everything laid out in sections thanks to the <div> tag with HTML and I could proceed with editing every section as I please.
What I have found to help me greatly when analyzing the CSS of the website, was the Inspect Element feature found when using Google Chrome. This feature, as far as I can tell, shows you the underlying HTML and CSS of a webpage and helps you debug by highlighting the part of the webpage is being affected when editing the selected HTML and CSS. Without it I would have been trying to change the layout by modifying sections aimlessly if they are not labelled correctly.
After starting editing some elements using the CSS I noticed a couple of things, to simply change fonts, background colour, font sizes and simple borders are quite easy to do since the code is quite readable even if one is not used to using CSS technology. The challenging part of designing with CSS I found to be positioning, it’s not because it’s hard to code, but it can be very tedious work to make everything align properly.
Although thing can be quite tedious to make properly the CSS technology has a lot of commands which give you such a big variety such as:
- When positioning elements you have the fixed so that the element relative to the browser window meaning that the element will not move even if the window is scrolled, relative positioning to position elements relative to its normal position and the absolute position when items are put in a position and other elements could overlap them as if they were not there.
- The width and height of elements could be given by percentages which could be very helpful for different display sizes and resolution such as mobile devices compared to standard desktop computer resolution.
With all these creating a webpage from scratch would be quite a task for someone as inexperienced as I am.
All in all, I think that with some more practice I could manage to create a decent looking webpage and I think I nailed the basics of CSS.
