In this tutorial, we’ll complete another landing page design by converting a design into a responsive landing page.
Grab the code from the Github repository here: l
This was the original landing page design: />
— Follow Me —
— Thanks! —
Front-end Project: Responsive Landing Page
00: 00 Introduction
00: 20 Setup
01: 06 Markup
04: 39 SCSS Variables
05: 51 HTML, Body Tags
06: 26 Typography
10: 13 Hero Styling
11: 47 Header Styling
14: 57 Hero Styling
18: 21 Responsive
21: 53 Making the nav more visible
23: 43 Wrap-up
So in this web development tutorial, we’ll convert an existing landing page design into a completely responsive HTML and CSS website.
There isn’t a huge amount of content on the page so we’ll be focusing on the Typography and also the responsiveness of the page to ensure it looks good on both desktop and mobile devices.
To start off, we’ll put together all of the HTML markup for our landing page and then we’ll structure that in a way which is meaningful for the design.
We’ll then move on to adding some basic styling as well as setting colour values to some SCSS variables so they can be used throughout the rest of the web page.
Before getting in to the main section of styles for our landing page, we’ll take a look at the Typography for our design and pick some Google fonts which will represent our landing page design.
With our basic CSS rules setup, we’ll move on to styling the header with appropriate rules that will ensure the navigation is easy to see and use and then well finish up our main styles by working on the hero section that contains the main information about the landing page.
To finish off the tutorial, we’ll look at the styles that will help our page respond well to smaller screen sizes which involves setting up various media queries at various breakpoints to ensure the content on the landing page adapts to the amount of space that is available.