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: /
Credit to the original design which can be found here: l
— Follow Me —
— Thanks! —
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.