In this HTML CSS landing page tutorial, we’ll take a basic landing page design and convert it to HTML and CSS.

Get the project code from here: https://github.com/codebubb/landing-page-tutorial/

Frontend Project: Landing page design using HTML CSS
——————————————————————————————————————

  • 00:00 Introduction
  • 00:17 Design Overview
  • 01:05 Creating Column Structure
  • 03:17 Styling Columns
  • 06:55 The Left Column
  • 20:29 The Centre Column
  • 27:07 The Right Column
  • 37:12 Conclusion

This frontend project will focus on creating a HTML CSS landing page design using HTML CSS.

We’ll take an initial design created in Sketch and create the basic markup for the columns in the design and gradually start to add content and style each section as we go.

There are several things I think you’ll learn during the tutorial, such as creating the menu with the customised ordered list element by using the CSS counter feature.

We’ll also be making use of flexbox quite extensively throughout the landing page tutorial and we’ll be using a combination of the flexbox row and flexbox column directions to create the blocky, column-based layout of the design.

We’ll also be using images from the design, the font that the landing page design uses and some interesting typography effects.

So all in all this makes a good front end projects for beginners or maybe one to add to your front end projects for practice.

#html #css #web-development #programming #developer

Front-end Project: Landing Page Design [HTML/CSS]
6.30 GEEK