Create Website Landing Page using HTML CSS

This project deals with creating a beautiful website landing page only using basic HTML and CSS. We will also make the page mobile responsive and add some DOM scripts later on.

#1 Creating The Menu

We start this series with designing a Top Menu navigation bar which has clickable menu items. We are using flex layout throughout this site - also in this menu. Later in series - we will add more features to this menu like – responsiveness and making it stick to top.

#2 Layout Design using Flex

Here we are design initial Hero section of page using simple concepts of flex layout. We will also see how to embed an image and how to make a SVG style pattern in this section.

#3 Card Layout Design  

In this video we will learn about creating a Card styled layout - an image at top and description at bottom. We will again use flex based layouts to accomplish this.

#4 Pricing Table Design

Pricing tables are found on any kind of product sites - where you can select various price plans. Such tables are useful for side by side comparison for customers. We will again use some flex layout with HTML lists to make such pricing tables.

#5 Testimonials Section Design

In this section we will design a simple testimonials section with a simple image of user and their comments about the site.

#6 Subscribe Section Design

#7 Footer Design

Every site has a footer which hold lots of information about site content, policy and contacts information. Footer as name suggests sticks to bottom of site. We are making this footer and adding some SVG patterns also.

#8 Refactoring the CSS

Till now we have developed the site in a very rudimentary manner. In this video we will clean up some code and make you understand how to write better and reusable CSS.

#9 How to use Font Awesome

Font awesome is very popular ICONs library which is used in many site globally. They have all kind of icons for websites, brands, navigations etc.  You can enhance the user experience using these icons. In this video, we will explain how to install it, use it and find the icons you need for your site.

#10 Fixed Header

In this video we will make our menu stick to top of screen , even if we scroll to bottom of page. This helps user to navigate easily through site without going to the top.

#11 Make Image slider using CSS animations

In this interesting video, we will clear an image slide (logo slider) with help of only CSS animations. This is very powerful way to use CSS. Such sliders can be used without Javascript. Javascript sliders can make your site very slow - but these slider don' have any big impact on performance of site.

#12 CSS transform effects

You might have already know the CSS transform property :

• Rotate
• Translate
• Scale

We will use those properties to create interesting effects in our site , which can improve the user experience.

#13 Make site responsive using Media Queries

Creating a website only for desktop browser is not a good strategy these days, as most of users are accessing the website on mobile browsers. However, your design might not work best on mobile as it is. In this video we will use CSS media queries to make your site responsive.