Later, we'll place the dark and light theme switcher between the logo and nav items, but let’s focus on the logo and menu items first.įor the logo, I won’t be using an image but a combination of text and emoji placed inside a span tag so I can style them differently. The navbar will have a logo to the left and nav menu items to the right. We will be coding the landing page section by section so it doesn’t get too complicated to understand. The basic HTML boilerplate looks like this: The CSS files, JavaScript files, icons, and images go in their respective subfolders inside the assets folder. The HTML and readme files and a screenshot for the readme are in the root. The folder structure follows the convention that many front end developers use. How to Make a Hamburger Menu for the Landing Page.How to Make the Landing Page Responsive.How to Style the Dark and Light Theme Switcher.How to Make the Dark and Light Theme Switcher.How to Style the Email Subscription Section.How to Make the Email Subscription Section.How to Style the Lightbox Image Gallery.To follow along with me, grab the starter files from this GitHub repoĬheck out the live demo too so you can get familiar with what we are building. I believe that as a beginner, you will be able to level up your CSS too after completing this tutorial. and most importantly, a responsive web page.The name of our fictional TV channel is JabTV, and the purpose of making the landing page is to collect emails.īy the end of this tutorial, you will be able to make: In this text-based tutorial, I’m going to take you through how to make a landing page for a boxing TV channel with plain HTML, CSS, and JavaScript. It can help drive customers to your site where they'll find your products and services and hopefully take action. Having a good landing page for your website is important.
0 Comments
Leave a Reply. |