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
#12 CSS transform effects
You might have already know the CSS transform property :
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.