Web Page Design Steps & Homepage Layout in HTML/CSS

Summary

This document describes the steps to design a web page and structure a homepage layout using HTML and CSS. It covers initial layout design, setting up the code environment, building elements with HTML, styling with CSS, and customizing the page.

Full Transcript

Web Page Design steps & Homepage layout in HTML/CSS 1. Designing Layout Before actually starting to design a web page, it is necessary to prepare a rough overview for your web page. This helps the user to put elements according to their need. Web pages should be divided into 3...

Web Page Design steps & Homepage layout in HTML/CSS 1. Designing Layout Before actually starting to design a web page, it is necessary to prepare a rough overview for your web page. This helps the user to put elements according to their need. Web pages should be divided into 3 parts header, body and footer part. 2. Do code set up Firstly, create one folder where you are going to store all your web pages. Prepare the style.css file if we want to add external code to our HTML web page and simple index.html page just for checking whether the code is working properly or not. 3. Building elements Start designing elements for building web page, firstly create , and after putting all elements lastlypart. It should be collection of different tags like ,, to heading tags, ,,, ,, , , and elements like , , , etc. 4. Some CSS code to your layout fix elements at some specific location, it is necessary to set them using some CSS code and try to highlight your important elements. 5. Customize your web page This step helps us to improve the looks and feel of our webpage. It includes things like adding a background image to the website, adding some video content to engage the user with web pages, adding links, comments, lists to your web page. HTML Page Layout Page layout is the part of graphic design that deals with the arrangement of visual elements on a page.