Learn How to Build Website with HTML, CSS in quick and easy steps

Learn How to Build Website with HTML, CSS in quick and easy steps

Learn how to build a fast and amazing responsive website that will work on all devices, Desktop, Laptop, Tablet, and Mobile phone.

Create a Website with HTML, CSS and you can start learning with below quick and easy steps:

Doctype, Meta Tags, and CSS

The doctype should define the page as an HTML5 document.

<!DOCTYPE html>

A meta tag should define the character set to be UTF-8:

<meta charset="UTF-8">

A viewport meta tag should make the web site work on all devices and screen resolutions:

<meta name="viewport" content="width=device-width, initial-scale=1">

Take care of all your styling needs and all device and browser differences.

<link rel="stylesheet" href="YOUR_CSS_FILE_PATH_HERE">

To learn more about styling with W3.CSS, please visit our W3.CSS Tutorial.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="YOUR_CSS_FILE_PATH_HERE">
<body>

<!-- Content will go here -->

</body>
</html>
Creating Page Content

HTML5 Semantic Elements

These are some of the most common semantic HTML elements:

The <section>element can be used to define a part of a website with related content.

The <article> element can be used to define an individual piece of content.

The <header> element can be used to define a header (in a document, a section, or an article).

The <footer> element can be used to define a footer (in a document, a section, or an article).

The <nav> element can be used to define a container of navigation links.

The Navigation / Menu Bar

<!-- Navigation -->
<nav>
  <a href="#home">Home</a>
  <a href="#about">About Us</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact Us</a>
</nav>

Footer Section

Finally we will use a <footer> or <div> to create a footer section:

<!-- Footer -->
<footer>
  <a href="#home">Home</a>
  <a href="#about">About Us</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact Us</a>
</footer>

Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!

Was this page helpful? Do not forget to share this post!

Leave a Reply

Your email address will not be published. Required fields are marked *