Build a basic landing page with HTML + CSS

Table of Contents

This bite-sized tutorial will teach you the basics of creating a landing or coming soon page with HTML and CSS. Whilst you don’t need any prior experience, you’ll need a coding editor if you want to code-along and create the project for yourself.

Getting Started

  • Create your project folder and name it emma’s-patisserie.
  • Within your folder, create an index.html file and two more folders named, “css” and “img.”
  • Open the css folder and create a document called style.css.
  • Drag and drop this image inside the img folder.
  • Open your project folder using VS Code or any coding editor of your choice.

The Index Page

The index.html is the name typically given to the homepage of a website. As our project only has one page, the landing page, we’ve named it index.html. Now open your index.html file and type out the following code inside of it.

The code begins with a <!DOCTYPE> tag. This is used to specify the version of HTML the document is written in. Next, the <HTML> is the document root element which defines the entire HTML document.

The <head> element contains some general information about the webpage. The <meta> tags specify the metadata about the HTML page. These are additional information that you add to your website to give it more functionality. Then the <link> tag is used to link the HTML page to a CSS page which we’ll write next. The last tag within the <head> element is the <title> tag. This is used to display the title of the page on the browser tab.

The <body> tag is used for defining the document’s body. Next, the <section> tag is used to create the content section for the webpage. The <main> tag is used to specify unique content that is not duplicated across the page. Then the <h1>, <h2> and <p> tags are used to write the document’s text.

Finally, the landing page HTML ends with <form> element which contains two input tags for the email and submit button.

The CSS Page

Open up the style.css page and type out the following code inside of it.

The code begins by resetting the default styles that are set by browsers so that we can write our own. The CSS selector * is used to reset the page’s default margins and padding to zero. By setting box-sizing: border-box; the padding and border will be included in the element’s width and height.

Using the CSS selectors HTML and body, we add a default font and line-height to the web page. For the rest of the CSS document, we simply select the HTML elements and add styles such as colours, borders, widths and heights.

Final Thoughts

Congratulations on completing this tutorial, you’ve successfully coded your own landing page! To keep the momentum going I recommend that you tackle more HTML + CSS projects, with each one progressing in complexity.

get the best real-world tutorial, right to your inbox!

    let's get social!

    recent posts

    Get the best real-world projects, right to your inbox!