Build Modern Responsive Website With HTML5, CSS3 & Bootstrap
4.6 (358 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,055 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Modern Responsive Website With HTML5, CSS3 & Bootstrap to your Wishlist.

Add to Wishlist

Build Modern Responsive Website With HTML5, CSS3 & Bootstrap

Learn HTML5, CSS3, jQuery, Bootstrap And Build Modern Responsive Website With Modern Trends From Scratch.
4.6 (358 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,055 students enrolled
Created by Irfan Dayan
Last updated 8/2017
English
Current price: $12 Original price: $195 Discount: 94% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 5 Articles
  • 24 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I 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 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.
View Curriculum
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 1700+ 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 is the target audience?
  • This course is for anyone who want to learn Web Development Skills. This course will teach you HTML5, CSS3, jQuery & Bootstrap at ground level.
Compare to Other Web Development Courses
Curriculum For This Course
111 Lectures
13:04:50
+
Getting Started!
4 Lectures 06:25

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:03

Read important notes before you move forward. 

IMPORTANT NOTES!
00:35

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
5 Lectures 28:23

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

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

Preview 05:28
+
Bootstrap Framework
5 Lectures 22:58

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

Bootstrap Framework Version
02:40

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
15 More Sections
About the Instructor
Irfan Dayan
4.5 Average rating
1,627 Reviews
39,513 Students
3 Courses
Freelancer, Web Developer, HTML5, CSS3 and JavaScript Expert

Hi, I'm Irfan Dayan! I hold degree in Software Engineering. 

I'm senior web developer working as a freelancer for last 7 years and with great passion for online teaching. I've worked on hundred of web projects for my happy clients, I mean 'HAPPY' clients :)

Teaching online is great way to spread knowledge in this modern world, therefore I'm here to teach you best of my web development skills. 

Waiting for something or someone? I think, you must not :) Sign up today and join me to take you on some awesome journey! The journey of learning GREAT! skills for web development!