How to Code a Website Using HTML and CSS? By Sudhir Bhushan Leave a Comment Creating a website with HTML is not difficult, but you will need some technical expertise for it. With some simple steps, you will learn the coding features. But first, it is important to know about HTML and CSS. HTML (hypertext markup language) defines the content and structure of the web page, and it defines – where things go and how the structure is laid off. It states what is on the page in simple coding language. CSS (cascading style sheets) helps to define the styling and overall presentation of the web page. Both HTML and CSS work together to create the final structure and design for the web page. Top Page ContentsSteps to Code a Website Using HTML and CSS1. Start with basics2. Understand the document structure3. Know about the CSS selectors4. Use the CSS style sheet5. Download Bootstra6. Pick your design7. Customise your website8. Add Images and Content9. Fine-tune the Colours10. Create added pagesIn Short, Steps to Code a Website Using HTML and CSS 1. Start with basics The HTML tag is the main element of HTML, and you must know about it. It looks like – <b>hello</b>. The tag is the bold tag, which remains in the opening and closing of the codes. But there are many other tags you will have to work with while coding and designing page elements. To italicize the text, use <i> tag that is between the opening and closing format. The <p> tag indicates the para of the text. The <u> tag indicates the underline option=n in the tag The <h1> tag is the main header on the coding page and is an important part of the web page. Apart from the simple tags, there are many complex ones like – item 1, item 2, and item 3. To work on these tags, it’s essential to understand tags before you begin the process. Top 2. Understand the document structure Your HTML page is similar to the building blocks where you put the blocks on top of one another that ends up with a big structure. The HTML document structure is somewhat similar. You can use this code: <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <p>My first web page.</p> </body> </html> Using the above code, paste it to your file and save the document as index.html to create a perfectly valid HTML page. The tags stand for: This tag – <!doctype html> – is for Page declaration. This tag – <html lang=”en”> – declares what comes next. The <head> tag includes the basic parameters of the page to go to this section. This tag – <meta charset=”utf-8″> – defines the character set used to write the documents. This tag – <title>Hello, world!</title> – defines the page title. The <body> tag is where all the page content goes. This tag – h1>Hello, world!</h1> – is the main page header. The tag – <p>My first web page.</p> – is used for para text. This is the closing tag – </html> – of the HTML document. To make things easier, you can install an HTML editor called Sublime Text. Top 3. Know about the CSS selectors CSS works on different selectors as HTML tags. The selectors decide the appearance. For example: p { font-size: 18px; } Here the document has a font size of 18. You can assign class to specific HTML tags – <p class=”normal-text”>. This text is going to be 18px. </p>. Here, the text defines the elements in the class, and font size is an example of a CSS property. 18px is the value you assign to the property. There are many other CSS properties you can consider. Read: Different HTML and CSS Font Style for Websites Top 4. Use the CSS style sheet A structural element has its order, and the order is crucial on a page. It dictates the final appearance and construction of the web page. CSS documents are referred as to style sheets. A CSS stylesheet has a list of class definitions used in a corresponding HTML document. The order of the definition is not important. You can put a CSS style sheet together by defining each class. Moreover, test if the outcome in page design is what you are looking for. For this, downloading Bootstrap is important. Top 5. Download Bootstra Bootstrap is an open-source toolkit that creates websites with CSS and HTML. It takes care of the structure of the CSS style sheet and HTML. It delivers a framework, which makes sure that your website is optimised. With Bootstrap, you don’t need to start with scratch, you can directly go to the main part. You don’t have to worry about creating the early stages of an HTML website. You can follow two paths in Bootstrap: Go to the website or homepage and download the main bootstrap package, and start building a website. Get a starter pack for bootstrap with a demo web page and a good-looking design. Starting with the ready structures saves a lot of time, so you don’t have to figure out the basics of HTML, just need to focus on laying the content. Top 6. Pick your design You can use a Bootstrap template while creating a website with CSS or HTML. To download the template, you can click the free download option and save a zip file on your computer. Unzip the package and move all the contents to the main directory of the local server or the web hosting account. When you open the location in the web browser, you will see a stock version. But, you will need to learn how to use the template using HTML and CSS to create a good design. Top 7. Customise your website Start by working on the homepage of your website first. When you open the index.html file in Bootstrap; in the Sublime Text, you will find the head section. <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> <title>Creative – Start Bootstrap Theme</title> <! – Theme CSS – Includes Bootstrap – > <link href=”css/creative.min.css” rel=”stylesheet”> </head> The brackets you see between- <! – … – > – is html comment. This part – <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> – is a bootstrap declaration tag which defines the size of viewport. This tag – <link href=”css/creative.min.css” rel=”stylesheet”> – loads the stylesheet of the template. You can easily modify the last declaration. You can use the non-shortened version of the CSS sheet. In the coding part, you will have to get into the detail. Top 8. Add Images and Content Change the title in the head section and replace your text between the tags. You can use the code – <title>My HTML Site</title> – for it. You can customise other blocks on the page, which include different sections for navigation, about block, portfolio, contact block, footer, and call-to-action. The best way to modify the pages is to go through the blocks one by one. You can move the sections around the page using the section tags. Top 9. Fine-tune the Colours For changing colours of fonts, assign inline styling – <p style=”colour: #FF0000;”>Red text</p>. All the colours are represented by the values here. You can assign colours via the CSS style sheet. Through this code – <p class=”red”>Red text</p> – you can assign colours via bootstrap. To change the colour, you will have to find the tag that is responsible for the styling. Go to the style sheet and modify the class. To change the font and size, you will need to see the find definition in the CSS: .SOMECLASS { font-family: “Merriweather”, Roboto, sans-serif; font-size: 18px; Load different fonts and set the font size to 18px. You can place this definition in any CSS class. While changing colours in the bootstrap, look at the CSS style sheet. Top 10. Create added pages You can build any number of sub-pages while creating an HTML or CSS website. Some common pages include – about page, contact page, portfolio, products, team, and policies. Top In Short, You can build a simple website with CSS and HTML. Start with learning the Bootstrap structure, check out case studies, etc. Bootstrap is the best path that lets you optimise the features of the website. You can also build a website with CSS with the above features. You may also like:The Ultimate Guide to Backing Up Your WordPress Website & Save It For a Bad DayThe Ultimate Guide on How to Choose a Domain Name8 Crucial Tips to Choose the Perfect Business Domain Name19 Mistakes To Avoid Before Launching An eCommerce Website