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: ![](https://image.ibb.co/hHDMKq/FINALWHOLEPAGELAYOUT.jpg) Screenshots - HTML code ![](https://image.ibb.co/b0CTXA/1.jpg) ![](https://image.ibb.co/kYjLeq/2.jpg) ![](https://image.ibb.co/mN7HQV/3.jpg) ![](https://image.ibb.co/dHnvCA/4.jpg) ![](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: ![](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: ![](https://image.ibb.co/fB4ssA/celastrana2.jpg) Part Two: ![](https://image.ibb.co/bVcqeq/celastrana3.jpg) Part Three: ![](https://image.ibb.co/ktndXA/celastrana4.jpg) Part Four: ![](https://image.ibb.co/mSvnQV/celastrana5.jpg) Part Five: ![](https://image.ibb.co/b3SOzq/celastrana6.jpg) Part Six: ![](https://image.ibb.co/n9anQV/celastrana7.jpg) Part Seven: ![](https://image.ibb.co/fT71kV/celastrana8.jpg) Now, CSS works its magic! ![](https://image.ibb.co/jkxFeq/css1.jpg) We can already see some changes, the most noticeable is that the content is centered. ![](https://image.ibb.co/bSgxsA/css2.jpg) So, we add more CSS. ![](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. ![](https://image.ibb.co/gU96kV/css4.jpg) CSS code for navigation: ![](https://image.ibb.co/kipTzq/css5.jpg) Here is the result: ![](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. ![](https://image.ibb.co/gKCsQV/css7.jpg) The text goes to the left, while the picture is on the right. Mission accomplished. ![](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: ![](https://image.ibb.co/fikqCA/css9.jpg) This is what we get - a frustration! Something is wrong here! But... ![](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! ![](https://image.ibb.co/drwVCA/css11.jpg) This looks fine! ![](https://image.ibb.co/fEgK5V/css12.jpg) Now we get to the footer. Some CSS included: ![](https://image.ibb.co/eLWVCA/css13.jpg) Not much of a result. ![](https://image.ibb.co/jO0e5V/css14.jpg) Let's add some more CSS code: ![](https://image.ibb.co/k5fe5V/css15.jpg) VOILA!!! Here is a nice looking footer! ![](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](https://www.pexels.com/) [Image source for the icons I used for the footer](https://www.iconfinder.com/iconsets/social-media-2112)