Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn Online Store Responsive Website Design HTML/CSS

Name: Learn Online Store Responsive Website Design HTML/CSS
Rating: 4.3 (120 reviews)

Online Store Responsive Bootstrap Layout Design Website With Slider, Icons, Typography and More...

Created byAkshay Kashyap

Last updated 8/2019

English

What you'll learn

You will be able to make Responsive Online Store Website
You can create responsive grid layout using bootstrap
After completing this course you will be able to use font awesome icons
You will learn how to make different Slider
You will be able to make any website responsive
You will learn how to use typography in the website.
And lot more...

Course content

7 sections • 39 lectures • 2h 44m total length

Introduction1:46
To get started and learn what we are going to build just enroll now.
What we are going to build?2:25
Setup Environment2:46
In this lecture you are able to setup the environment. You can download the images from the resources section. So just download it and put it in the asset folder.
Link External Sources (Bootstrap, Font Awesome)3:19
In this lecture, we will understand how to link bootstrap and font awesome icon. You will also learn how to link custom style to the html file using CSS.
HTML Tag Snippets with Class & IDs2:21
In this lecture, you will understand how to write html tags in vs code editor. You will learn how to rapidly create html elements with class and id.
Understanding Bootstrap Grid System4:11
After this lecture, you are able to create bootstrap grid system. You will able to create responsive grid columns with bootstrap.

Bootstrap Responsive Navigation5:30
After this course, You will be able to create navigation with bootstrap. Along with that you will be able to create homepage with slick carousel.
Working with Google Font1:50
After Completing this lecture, Student will be able to link google font to the website for typography.
CSS Variables & Global Classes3:55
After this lecture, you will be able to create CSS variables and also learn how to create global classes used in website.
Navigation with Custom Style3:10
After this lecture, you will be able to complete the custom style to the navigation.
Bootstrap Navigation with Font Awesome Icon3:32
After this lecture, you will be able to create bootstrap navigation for you website. Along with that you will understand how to add icons in the navigation with using bootstrap classes.

Getting Started with Slick Slider5:49
After this lecture, you will be able to style the bootstrap navigation menu. Along with that you are able to link and create slider using slick slider.
Creating Slick Slider8:03
After this lecture, you are able to create slick slider using slick library. You also gonna learn how to add auto slide feature to the slider.
Navigating Slide Through Next & Prev3:59
In this lecture, you will be able to learn how to create next and previous button to the slider. When you hover mouse over the slider I want to display the next and previous button and hide them if the cursor move outside the slider.
Working with Slider Dots4:44
After this lecture, you are able to create slider dots. You will learn how to work with slick slider dots and style it.
Product Slider5:09
After this lecture, you will be able to create products slider using slick slider.
Styling Product Slider5:19
After this lecture, you will be able to complete the slider by styling it.

Getting Started with Feature Product1:51
After this lecture, you will be able to create features product section.
Style Features Product2:25
After this lecture, you will be able to style the feature section.
Features Product Slider Design9:00
After this lecture, you will be able to create slick slider using slick library. We will create slick slider in the feature product section.
Style Feature Product Slider2:54
After this lecture, you will be able to style the feature product slider.
Slides To Show1:02
After this lecture, you will be able to specify how many slides you want to display on the homepage. We will able to display product slider as much as we want.

Sofa Layout6:43
After this lecture, you will be able to create sofa layout with sofa image, title and description.
Design Title, Description and Icons6:29
After completing this lecture you are able to specify title, description and add some icons with add to cart button.
Design Product Sofa Slider4:04
After this lecture, you will be able to create sofa product slider using slick slider.
Design Banner Ads4:25
After this lecture, you will be able to create banner ads. Along with that you are able to style the sofa product slider.

New Arrivals7:20
After this lecture, you will be able to create grid nested layout using bootstrap grid system.
Best Seller & Feature4:02
After this lecture, you will be able to create and learn how to use existing html elements to rapidly create new data design.
Brand Slider5:33
After this lecture, you will be able to create brand slider using brand icons. You can put different icons as well if you want.
What Our Client Says?4:40
After this lecture, you will be able to create what our client says section. You will understand how to create slider inside the container and display user messages.
Styling What our Client Says?5:07
After this lecture, you will be able to style the what our client says section. You will understand how to style it and make it attractive.
Bootstrap Stripe5:56
After this lecture, you will be able to create bootstrap stripe. You will see how to put information in that stripe.

Footer Grid Layout5:32
After this lecture, you will be able to create footer grid layout. You will learn how to create footer with bootstrap grid system.
Services, Extras & Instagram3:52
After this lecture, you will be able to use bootstrap grid columns and put data into these columns.
Styling Footer4:29
In this lecture, you are able to style the footer with custom style using css.
Newsletter Layout4:54
After this lecture, you will be able to create newsletter section. You will learn how to create input tag with email placeholder. along with that you will able to create button just beside that input tag.
Finishing Footer With Copyright Symbol1:49
After this lecture, you will be able to finish your website with copyright symbol and complete your website.
Making Website Completely Responsive4:12
In this lecture, you will see how to finish this website with making it responsive. After complete this lecture you are able to make your website responsive for mobile, tablet and desktop device.
We will finish this website with this lecture.
Final Review0:29
In this lecture, we will finish this website.
So thank you for enrolling in this course. If you want to learn more make sure you check out new course.

Requirements

You should have computer or laptop to run code with browser.
Student need to have a basic understanding of HTML & CSS
Beneficial if have Basic JavaScript Knowledge

Description

Hey everyone, Welcome to the Online Store Responsive Website Design Course.

In this course, you will able to learn how to create a responsive website with bootstrap framework. You will be able to create responsive bootstrap grid system to make complete website design. After completing this course, you can create your own website with bootstrap using a grid system.

In this course you will learn how to use slick slider library to make sliders, Font Awesome icon to add various icons, Google fonts which use to add typography and much more. After this course, you are not limited to create a responsive design but also understand how to design advanced layout. This Website looks realistic to the real websites so it helps you to make modern trending design.

So what we are going to Learn in this website.

Responsive Mobile & Tablet Friendly Design
Bootstrap Framework
Bootstrap Grid System & Flex box
Font Awesome Icons
Google Fonts
Well Design Structure
Slick Slider
Real World Trending Design
And much more...

Every Code in this course is well explained. We keep eye on each class of the bootstrap framework and see what is the use and how to use that class on the website. I separated this course with very short video lectures to understand each view and code. After finishing this course you can download the completion certificate with my support on Instagram @akki.2013.

Not just that but you will learn a lot more than this. But before you take this course you have the following things.

You need to have a basic understanding of HTML and CSS.
You need a computer/laptop to code.
Basic JavaScript Knowledge Beneficial

Upon completing this course you will be ready to tackle new design using HTML & CSS. You will understand how to overcome from the HTML fear and make your own simple website.

For whom this course for...

Anyone who wants to expert in web design and make complex design
Anyone who wants to create a responsive website with basic Html and CSS knowledge.
The beginner who looking for a new design and learn it.
Bootstrap Developer who wants to know how to use bootstrap to make responsive website design.

Not only do you get great technical content, but you will also get access to our Question and Answer Forums, where you and other students can get help on the course material and content.

All of this comes with a 30-day money-back guarantee so you can enroll today completely risk-free!

We'll see you inside the course!

Who this course is for:

Beginners who want to learn how to make responsive website with basic HTML & CSS
Students want to create sliders but don't know how to use it in the website.
Beginners who want to learn online store website with just HTML & CSS
Anyone who wants to start web development

Learn Online Store Responsive Website Design HTML/CSS

What you'll learn

Explore related topics

Course content

Introduction & Setup6 lectures • 17min

Navigation Menu5 lectures • 18min

Homepage with Slider6 lectures • 33min

Features Products5 lectures • 17min

Sofa With Product Slider4 lectures • 22min

Advanced Bootstrap Grid Layout6 lectures • 33min

Footer7 lectures • 25min

Requirements

Description

Who this course is for: