In the CSS code snippet above, I’m removing the default margin and padding assigned to all elements by browsers and setting the box-sizing to border-box. I also have some CSS variables declared and some less complicated resets. We need to style the logo to make it look like one, and we'll use Flexbox to place the logo and menu items side by side.įor the whole web page, I will be using the Roboto font. The navbar looks pretty ugly at this point, so we need to style it. The nav menu now looks like this in the browser: The bars will be span tags placed in a container div with a class of hamburger. The bars will be hidden on the desktop version and visible on mobile phones.įor this, I will be using bars made with raw HTML and CSS, not icons. In addition, we need some bars for the mobile menu.

The nav menu items are generic links placed in an unordered list tag, as shown in the snippet below: It’s a combination of the words “Jab” and “TV”, with a punch emoji. 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.

Bootstrap 4 navbar templates centered logo responsive