Week1: HTTP,HTML & CSS

Welcome to the web development blog.

This blog is meant to document the journey of my experience following a BSc in Internet Applications Development. It will be updated every week & one can learn a lot from the content. Ok I’m not going to waste your time talking about myself, should you have any questions or delightful comments you are more than welcome to drop a comment, they’re free of charge :)

Session 1:

During this session, we covered the basics of web technologies and terminologies. Here’s a list of a few of them for simplified reference:

• HTTP, HTML& CSS
• Client Side Scripting
• Server Side Scripting - PHP
• XML & CVS
• Databases – MySql

These topics will all be covered in detail in every Session/Post. So let’s get to the details of the first topic which is HTTP, HTML& CSS.

We learned that the web works by using HTTP requests and responses between servers and clients. The client being the entity which requests the data from a server. Often times a client can be represented in a form of a browser such as Firefox, Internet Explorer and Google Chrome.

Here are the basic steps of an HTTP request:

1. Client makes HTTP request to Server
2. Server responds with Headers and content.

Here’s a more detailed explanation on how http works.

After, we covered the basics of HTML & CSS. HTML is the structure of a web page which contains tags to define entities/layers within a web page. An old method of designing a web page was that of using a table to structure the page but it has been developing over the years and now modern websites use divs and stylesheets to layout the pages. This list contains some of the most used html tags & css properties:

HTML tags:

• Div
• Ul,li
• Label
• Form
• Input
• H1
• H2

CSS Properties:

• Background
• Color
• Margin
• Position
• Float
• Font-family,font-size
• Padding
• Border

More information on HTML and CSS can be found on www.w3schools.com

We were tasked to download a readymade web page together with its CSS and changing the way the web page looks without modifying the HTML file.

You may be asking yourself how can this be done?

Well the answer to that question is to edit the CSS file and adjust the properties of the elements. Now there are various tools that could facilitate this process & the first on my list is Firebug addon which is a wonderful piece of tool that can be installed into your browser(FireFox or Chrome) .
It helps you examine the css properties of the html elements you click/hover on and edit the css directly in your browser. I completely changed the way the website looks by simply manipulating around 14 css properties.

Since I work in the web development industry this task was fairly easy but during the years I have learned that working on someone else’s code is a rather tedious task since you get used to your own patterns and stick to them, so when you see someone else’s work you first have to understand their pattern in order to work on it.

Lesson Summary:

• The web works by making use of HTTP requests.
• The client requests a web page & a server sends a response.
• A Web page layout is made up of HTML & CSS
• Manipulating only the css, one can change a page's layout
• When working on web pages, Install Firebug
• Test your web page on different browsers

    Before:

    After: