Build Modern Responsive Website With HTML5, CSS3 & Bootstrap
4.4 (1,038 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,943 students enrolled

Build Modern Responsive Website With HTML5, CSS3 & Bootstrap

Learn HTML5, CSS3, jQuery, Bootstrap And Build Modern Responsive Website With Modern Trends From Scratch.
4.4 (1,038 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,943 students enrolled
Created by Irfan Dayan
Last updated 10/2019
English
English [Auto], Italian [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14 hours on-demand video
  • 5 articles
  • 25 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • You will see the complete Web Development process from Start to Finish project.
  • At the end of this course, You will have a great skills set of HTML5, CSS3, JQuery and Bootstrap (+BS 4) Framework.
  • You will learn new ways of coding, tips & tricks and modern best practice to develop a website.
  • You will be able to Build Modern looking Responsive Website which will look great on all the small & wide screens.
  • You will learn about CSS3 Media Queries and You will be able to make website perfect for responsive design.
  • You will get Complete Source Code for real responsive website.
Course content
Expand all 114 lectures 13:52:58
+ Getting Started!
4 lectures 06:29

I welcome you to this course. This course is about building modern responsive website with HTML5, CSS3, Bootstrap and some jQuery.

Preview 05:41

You can view the project demo at given link inside this lecture.

Preview 00:02

Read important notes before you move forward. 

IMPORTANT NOTES!
00:40

Please download attached web development resources. 

Download Resources
00:05
+ Setting Up Working Environment
3 lectures 09:51

In this video, we will take the very first step which is to install the internet browser.

Preview 01:15

In this video, I will introduce you, Chrome Developer Tools.

Preview 05:05

In this video, we will set up the code editor.

Install Brackets Code Editor
03:31
+ Creating Website Wireframe
4 lectures 22:29

In this video, we will learn about wireframes and why wireframe is crucial part of any web design process.

Preview 03:17

In this video, we will create the wireframe of the website which we are going to build in this course.

Preview 14:18

In this video, I want give you a task. And the task is to complete the wireframe.

Exercise - Complete Wireframe
01:55

In this video, I want to share some useful resources with you about wire framing tools.

Resources - Wireframe Tools
02:59
+ Building Basic Structure of Website
6 lectures 25:30

 In this video, I will setup the basic website folder.

Preview 06:21

In this video, we will start coding the vesco project by adding the basic html5 document

Preview 03:56

In this video, we will add some important meta information to our vesco project.

Add Meta Tags
04:12

In this video, I will go ahead and I’ll add title and favicon to our Vesco project.

Add Title & Favicon
04:12

In this video, we will add some external files to our Vesco project.

Add Basic External Files
04:47

In this video, I’m going to share some useful resource with you.

Resources - Web Development
02:02

Basic coding quiz

Quiz
8 questions
+ Setting Up Fonts, Colors & Icons
6 lectures 28:43

In this video, we will choose the right font for vesco project.

Preview 08:21

In this video, As always I’m going to share some resources which would be about web fonts. 

Resources - Web Fonts
04:46

In this video, we will continue our journey and will choose some good colors for our vesco project.

Preview 06:12

In this video, I’ll share some resources about web colors.

Resources - Web Colors
03:36

Please  use https://fontawesome.com/v4.7.0/ for accessing Font-awesome library.

Important Note Before You Go Ahead
00:20

In this video, we will continue and we will choose Icons for our Vesco project.

Preview 05:28
+ Bootstrap Framework
5 lectures 23:25

In this lecture, we will decide which version of bootstrap framework to use. 

Bootstrap Framework Version
03:07

In this section, we will learn about Bootstrap framework. It is important to understand Bootstrap framework before we use it in our vesco project

What Is Bootstrap?
03:19

In this video, we will continue to add Bootstrap framework to our vesco project.

Add Bootstrap To Website
03:49

In this video, we will discuss bootstrap grid system.

Preview 02:26

In this video, I’ll give you some examples of bootstrap grid system.

Preview 10:44

Bootstrap quiz

Quiz
5 questions
+ Building Home Section
7 lectures 58:27

In this section, we will start building the very first part of VESCO project which is the home section. In this video, I will give you an introduction to the home section and we will discuss what we have to build for home section.

Preview 02:11

In this video, I'll write html markup for home section. 

Preview 07:51

In this video, we will start styling the home section. The objective in this video is to set a background image (hero image) on home section that will cover the entire browser window all the time.

Preview 08:33

In this video, we will continue working on home section and we will add css to vertically align the heading and button in middle of home section. 

Preview 08:49

In this video, we will style the button of home section.

Preview 12:40

In this video, we will add parallax scrolling effect to the home section of vesco project.

Preview 06:39

In this video, We will add cool animation to the elements of home section.

Preview 11:44
+ Building Services Section
6 lectures 49:56

In this new section, we will start building the services section of VESCO website. In this video, we will discuss the layout & different elements of services section.

Preview 01:08

In this video, we will start writing HTML markup for services section of Vesco website.

Preview 06:32

In this video, we will complete HTML markup for services section.

Preview 09:51

In this video, we will start styling the services section of vesco website.

Preview 07:11

In this video, we will continue our journey and we will add some more css to services section of veso website.

Preview 12:19

In this video, we will add animations to the services section.

Preview 12:55
+ Building About Section
5 lectures 35:59

In this section, we are going to build about section of vesco website. In this video, I am going to discuss the design and elements of about section.

Preview 01:37

In this video, we are going to write HTML markup for about section. Let us get started.

Add HTML - About
10:42

In this video, we are going to start styling the about section.

Add CSS (Part 1) - About
10:03

In this video, We will continue styling the about section.

Add CSS (Part 2) - About
05:04

In this video, I will design the diagonal background image on right side of about section.

Add Diagonal Background - About
08:33
+ Building Work Section
6 lectures 41:20

In this new section, we are going to build work section of vesco website.

Preview 01:56

In this video, I’ll start writing html markup for work section.

Add HTML (Part 1) - Work
07:38

In this video, I will continue writing html markup for work section.

Add HTML (Part 2) - Work
06:44

In this video, I will start styling the work section.

Add CSS - Work
06:23

In this video, I’ll add image zoom effect for work section.

Add Zoom Effect - Work
04:35

In this video, I’ll add magnify popup & gallery feature to work section.

Add Magnify-Gallery Effect Using jQuery - Work
14:04
Requirements
  • No Coding Experience is Required. You will start learning from the Very Basics.
  • All you need to get started is a Code Editor & Internet Browser.
  • If you know basic html & css that would be bonus otherwise No Worries.
Description

*** Over 4750+ Students Are Already Taking This course ***

*** BEST REVIEWED Course on Udemy ***

This course is about Building Modern Responsive Website with HTML5, CSS3, Bootstrap and some jQuery.

In this course, you will learn how to Build a Modern looking Responsive Website with modern web development technologies like HTML5, CSS3, Bootstrap and some jQuery from scratch.

No coding experience is required for this course. You will learn, how to build a modern responsive website from the very scratch with zero experience. 

This course will teach you, how to create a wire-frame for a website before actually starting the development. And then you will learn how to convert  a wire-frame to real world website.

You will learn, how to choose right web color, fonts and icons for your website. 

In this course, you will learn how to write HTML5 markup the best way. You will learn the Integration of Bootstrap framework which will really speed up the development time and it will allow to add some really great features to a website.

You will learn, new CSS3 techniques to style a website and you will also be introduced to some new concepts such as CSS3 media quires & breakpoints and with some jQuery you will learn how to add cool features to a website. 

While building that amazing beautiful website, you will learn new ways of coding, tips & tricks and modern best practices that will make you a professional web developer in a very short time.

Student's Reviews:

  • This course is one of my favorite courses and I learn new things and on my path to build responsive html5 website in this course. Instructor is teaching step by step with high quality audio and videos, Even at 360p video quality is excellent. -  Awais Riaz

Who this course is for:
  • This course is for anyone who want to learn Web Development Skills. This course will teach you HTML5, CSS3, jQuery & Bootstrap at ground level.