This is a simple Web Page Layout project of mine. This project's goal was to make a web page layout using HTML and CSS, doing it from scratch, coding it myself from the first line. I am a beginner so it took a lot of patience to succeed. I decided to share this whole process with you, maybe you find it useful, if you are a beginner just like me, or you find it interesting to see how the process looks like. I emphasized flow of the elements and how they align. Content and aesthetics were not my goal, so I made it really simple.
This is the final result:
[IMAGE: https://image.ibb.co/hHDMKq/FINALWHOLEPAGELAYOUT.jpg]
Screenshots - HTML code
[IMAGE: https://image.ibb.co/b0CTXA/1.jpg]
[IMAGE: https://image.ibb.co/kYjLeq/2.jpg]
[IMAGE: https://image.ibb.co/mN7HQV/3.jpg]
[IMAGE: https://image.ibb.co/dHnvCA/4.jpg]
[IMAGE: https://image.ibb.co/dHYDzq/5.jpg]
This is the result of HTML without any CSS included. You can see huge images and elements aligned from the top to the bottom, without any structure:
[IMAGE: https://image.ibb.co/i8mizq/celastrana1.jpg]
This is the same thing, but I took screenshots of the parts of the page for you to see a bit better how it looks like:
Part One:
[IMAGE: https://image.ibb.co/fB4ssA/celastrana2.jpg]
Part Two:
[IMAGE: https://image.ibb.co/bVcqeq/celastrana3.jpg]
Part Three:
[IMAGE: https://image.ibb.co/ktndXA/celastrana4.jpg]
Part Four:
[IMAGE: https://image.ibb.co/mSvnQV/celastrana5.jpg]
Part Five:
[IMAGE: https://image.ibb.co/b3SOzq/celastrana6.jpg]
Part Six:
[IMAGE: https://image.ibb.co/n9anQV/celastrana7.jpg]
Part Seven:
[IMAGE: https://image.ibb.co/fT71kV/celastrana8.jpg]
Now, CSS works its magic!
[IMAGE: https://image.ibb.co/jkxFeq/css1.jpg]
We can already see some changes, the most noticeable is that the content is centered.
[IMAGE: https://image.ibb.co/bSgxsA/css2.jpg]
So, we add more CSS.
[IMAGE: https://image.ibb.co/hzFe5V/css3.jpg]
Now we can see some changes in the header section. Heading is blue and bigger and it is on the left, while the navigation looks out of place.
[IMAGE: https://image.ibb.co/gU96kV/css4.jpg]
CSS code for navigation:
[IMAGE: https://image.ibb.co/kipTzq/css5.jpg]
Here is the result:
[IMAGE: https://image.ibb.co/n5tcsA/css6.jpg]
Now the goal is to add CSS to make the text and the picture under the big restaurant picture align to the left and right.
[IMAGE: https://image.ibb.co/gKCsQV/css7.jpg]
The text goes to the left, while the picture is on the right. Mission accomplished.
[IMAGE: https://image.ibb.co/ddW8zq/css8.jpg]
Next thing is to add three columns under the previous section which include a heading, a picture and text each. This is CSS for that:
[IMAGE: https://image.ibb.co/fikqCA/css9.jpg]
This is what we get - a frustration! Something is wrong here! But...
[IMAGE: https://image.ibb.co/dhgxsA/css10.jpg]
...we have the solution! clear:both is some kind of invisible divider which makes our frustrations go away!
[IMAGE: https://image.ibb.co/drwVCA/css11.jpg]
This looks fine!
[IMAGE: https://image.ibb.co/fEgK5V/css12.jpg]
Now we get to the footer. Some CSS included:
[IMAGE: https://image.ibb.co/eLWVCA/css13.jpg]
Not much of a result.
[IMAGE: https://image.ibb.co/jO0e5V/css14.jpg]
Let's add some more CSS code:
[IMAGE: https://image.ibb.co/k5fe5V/css15.jpg]
VOILA!!! Here is a nice looking footer!
[IMAGE: https://image.ibb.co/fJcRkV/css16.jpg]
MISSION ACCOMPLISHED, definitely. I hope you like it and find it useful.
Image source for the pictures I used to build web page layout