Development
Web Development
Responsive Design
Build Responsive Website Using HTML5, CSS3, JS And Bootstrap
4.2 (3,198 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.
97,690 students enrolled

Build Responsive Website Using HTML5, CSS3, JS And Bootstrap

Learn HTML5, CSS3, JavaScript, jQuery and Bootstrap framework by building a modern looking responsive website.
4.2 (3,198 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.
97,690 students enrolled
Created by Irfan Dayan
Last updated 10/2019
English
English [Auto], Italian [Auto], 1 more
  • Turkish [Auto]
Preview this course
Build Responsive Website Using HTML5, CSS3, JS And Bootstrap
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 16 articles
  • 17 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
  • At the end of this course, You will have a great skills set like HTML5, CSS3, JavaScript, JQuery and Bootstrap Framwork.
  • You will learn about web design guidelines which you can apply to real world web projects.
  • You will see, the complete web development process from start to finish project.
  • You will be able to build modern looking website which will look great on all the small & wide screens.
  • You will learn about media queries and will be able to make website perfect for responsive design.
  • You will get complete code for real responsive website
Course content
Expand all 75 lectures 07:55:28
+ – Introduction To Course
4 lectures 03:21

In this lecture, you will get an introduction to the course. You will know what this course is all about. And I'll walk you little bit through the course syllabus. 

Welcome & Getting Started!
Preview 02:37

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

View Project Demo
Preview 00:02

Read important notes before you move forward. 

IMPORTANT NOTES!
00:39

Please download resource file before you go ahead. 

Download Resources File
00:02
+ – Web Design Guidelines
10 lectures 32:15

In this lecture, I'll give you a brief introduction to web design. You will know what web design is and you will get familiar with some aspects of web design.  

What is Web Design?
02:08

In this lecture, you will know about web wireframing. You will know the importance of wireframing in web design process. And I'll show you how you can create a wireframe for your web project.

What is Wireframing?
04:54

In this lecture, I'll give you a brief introduction to User Interface & User Experience for web design. I'll show you an example of UI & UX so you can get better idea of UI & UX.

What is UI & UX?
01:48

In this lecture, you will learn about web typography. I'll teach you, the basic principles of web typography and you will be also introduced to some of great online tools for choosing good typography. 

Web Typogrphy
06:51

In this lecture, you will learn about the importance of web colors. You will learn how to choose a good color scheme for your web project. 

Web Colors
04:46

In this lecture, you will learn about the importance of web icons. I'll show you how to use web icons the right way. 

Icons for Web
02:07

In this lecture, you will learn about the importance of images for web. You will learn, how images can effect on the whole web site. You will learn, how to choose the right images for your web site. 

Images for Web
03:08

In this lecture, you will learn about web whitespacing. You will learn what whitespacing is and what is the importance of whitespacing.

Whitespacing for Web Design
03:47

In this lecture, I'll show you how you can get inspiration for web because It is important to always get inspiration for your web projects. 

Getting Inspiration for Web Design
02:04

Web design quiz

Web Design Quiz
7 questions

Conclusion To Web Design Guidelines.

Conclusion To Web Design Guidelines
00:42
+ – Getting Started With HTML
6 lectures 17:55

In this lecture, I'll introduce you some of the best code editors for your web project. And brackets will be editor for this course. 

Choosing Code Editor
02:33

In this lecture, You will learn what html is. You will learn very basic of html markup language and you will get familiar with html elements and attributes. It will be a good start up for html markup language. 

What Is HTML?
02:02

In this lecture, I'll show the very basic structure of html document. 

Basic HTML Structure
01:12

In this lecture, I'll code only the html markup for small business page as starter web page. You will learn about new html5 elements in this lecture.  

Coding Small Business Page With HTML5
11:37

You can download the html markup code for small business page. 

Download Code
00:02

HTML quiz

HTML Quiz
4 questions

Conclusion To Getting Started With HTML.

Conclusion To Getting Started With HTML
00:29
+ – Styling With CSS
7 lectures 31:30

In this lecture, I'll show you how to use google chrome developer tool for inspecting web elements on web page.

Google Chrome Developer Tools
02:01

In this lecture, you will learn about basic CSS. You will learn, how to write simple css rule set for a web element. In this video, I'll add style.css to small business web. 

What is CSS?
02:56

In this lecture, you will learn about CSS box model. Every element on web page has box model so it is important to learn about CSS box model.

CSS Box Model
03:33

In this lecture, you will learn about CSS class and id selectors. Web elements can easily be styled using CSS class and Id selectors once specified for them.  

Class & ID Selectors
01:15

In this lecture, I'll start adding CSS to small business page. You will learn some new CSS properties in this video. It will give you a good start up for adding CSS to web project. 

Add CSS To Small Business Page
21:03

Download css styling code for small business page.

Download Code
00:02

CSS quiz

CSS Quiz
6 questions

Conclusion To Styling With CSS

Conclusion To Styling With CSS
00:40
+ – Working With JavaScript & JQuery
4 lectures 05:43

In this lecture, you will learn very basic of JavaScript language. I'll show how to write very basic JS code.

Basic JavaScript
01:47

In this lecture, I'll introduce you JQuery library. I'll show you how to download and add it to your project. I'll write very basic of jQuery code.

Getting Sarted With JQuery
03:40

Download jQuery code for small business page.

Download Code
00:01

This Quiz is about JavaScript and JQuery Library.

JavaScript & JQuery Quiz
2 questions

Conclusion to Working With JavaScript & jQuery

Conclusion to Working With JavaScript & jQuery
00:14
+ – Bootstrap Responsive Framework
6 lectures 20:10

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

Bootstrap Framework Version
02:40

In this lecture, you will get started with Bootstrap framework. You will get an idea what bootstrap framework.

What Is Bootstrap Framework?
02:57

In this lecture, you will learn about Bootstrap grid system. 

Bootstrap Grid System
03:02

In this lecture, I'll add bootstrap framework to small business web page to make it responsive for small screens. 

Add Bootstrap Framework To Small Business Page
11:10

Download bootstrap code for small business page.

Download Code
00:01

Bootstrap quiz

Bootstrap Framework Quiz
2 questions

Conclusion To Bootstrap Responsive Framework,

Conclusion To Bootstrap Responsive Framework
00:20
+ – Building Real Responsive Website
21 lectures 03:46:25

In this lecture, you will get an introduction to real responsive web site.

Introudction To Build Responsive Website
Preview 03:11

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

Important Note Before You Go Ahead
00:20

In this lecture, I will start setting up the project folder for this real responsive web site and I'l add resources like for fonts, icons and will also add some little bit of rest CSS.

Setting Up Project Folder
14:28

In this video, I'll write HTML5 markup for header part.

Building Header - Part 01
Preview 12:40

In this lecture, I'll continue building header part by applying CSS to header part.

Building Header - Part 02
Preview 18:52

In this lecture, I'll write the HTML5 markup for About Us section. 

Building About Us - Part 01
13:39

In this lecture, I'll continue with About Us section by apply CSS to it. 

Building About Us - Part 02
17:40

In this lecture, I'll start building testimonial section.

Building Testimonials - Part 01
10:22

In this lecture, I'll continue with Testimonial section by applying CSS to Testimonial section.

Building Testimonials - Part 02
11:48

In this lecture, I'll start coding HTML5 markup for features section.

Building Features - Part 01
13:18

In this lecture, I'll continue building features sections by applying CSS to it. 

Building Features - Part 02
16:25

In this lecture, I'll start writing HTML5 markup for Purchase Now section.

Building Purchase Now - Part 01
04:00

In this lecture, I'll continue working on Purchase Now section. 

Building Purchase Now - Part 02
06:56

In this lecture, I will just code the HTML5 markup for screens section. Later on in jQuery section, I'll add responsive slider to screens.

Building Screens
05:30

In this lecture, I'll start writing HTML5 markup for counter section.

Building Counter - Part 01
05:40

In this lecture, I'll continue with Counter section by applying CSS to it. 

Building Counter - Part 02
08:49

In this lecture, I'll start coding HTML5 markup for Download Now section.

Building Download Now - Part 01
10:11

In this lecture, I will continue with Building Now section by applying CSS to it. 

Building Download Now - Part 02
14:21

In this lecture, I will write HTML5 markup for Contact Us section.

Building Contact Us - Part 01
12:29

In this lecture, I'll apply CSS to footer section.

Building Contact Us - Part 02
14:56

In this lecture, I'll build footer section. 

Building Footer
10:50
+ – Adding JavaScript & JQuery Effects
8 lectures 01:38:14

In this lecture, I will start building navigation for real responsive web site.

Building Navigation - Part 01
18:07

In this lecture, I'll continue building navigation section.

Building Navigation - Part 02
14:23

In this lecture, I'll continue working on building navigation section.

Building Navigation - Part 03
14:54

In this lecture, I'll add an auto padding to adjust header to different screens size. 

Add Auto Padding To Header
05:21

In this lecture, I'l fix screens section by add bx responsive slider.

Add Slider To Screens
15:38

In this lecture, I'll jQuery counter to counter section.

Add Counters
06:32

In this lecture, I'll start adding animation to different elements of web page.

Add Animation - Part 01
08:50

In this lecture, I'll continue adding animation to different sections. 

Add Animation - Part 02
14:29
+ – Make Website Perfect For Responsive Layout
1 lecture 23:46

In this lecture, I'll introduce media queries and will make the web site perfect for responsive layout.

Media Queries & Making Website Perfect For Responsive Layout
23:46
+ – Optimization, Validation And Testing of Website
4 lectures 13:25

In this lecture, I'll validate the HTML5 markup for this site.

Markup Validation
01:45

In this lecture, I'll optimize images for website. 

Images Optimization
04:16

In this lecture, I'll add very basic SEO to website.

Add Basic SEO
02:36

In this lecture, I'll test the web site across all the major browsers.

Cross Browser Testing
04:48
Requirements
  • A Text Editor
Description

*** Over 95,000+ Students Are Already Taking This course ***

*** BEST REVIEWED course on Udemy ***

✔ Are looking to learn Web Design & Web Development Skills? Then this is the RIGHT course For you! The very first things you need to learn HTML5, CSS3, JavaScript and JQuery to become a Web Developer and off-course some Web Design Guidelines.  This course will exactly teach you all these New Skills to become a good Web Developer. This course also teach how to use Bootstrap Framework which is the most Popular Responsive Framework on the internet. In this course, you will also learn Web Design Guidelines, which you can apply to Real World Websites. 

This course will first give basic understanding of HTML5, CSS3, JavaScript, JQuery and Bootstrap Framework then by combining all these skills, you will  Build a Modern Looking Responsive Website which will look Great on all the Small and Wide Screens. 

✔ Student's Reviews:

  • Excellent, excellent course! You can follow through the whole process of modern website creation! From wireframing and user experience design, through important technologies (like HTML5, CSS3, Bootstrap, Javascript, jQuery) to some SEO, you will learn a lot! I enrolled into this course, because I already knew some HTML and CSS, but have never put together a whole site. I've got practical advice and the guidance I was looking for. Thanks! - Peter

  • Almost Perfect explanation about html css js and boostrap and responsive design with different layouts am enjoying this course and waiting for more courses!!  Thank you Author - Imran Sufi

✔ Enroll now and I'll see you inside the classroom!

Who this course is for:
  • This course is for anyone who want to learn web design and web development skills. This course will teach you some web design guideline and you will learn HTML5, CSS3, JS, jQuery & Bootstrap at ground level.
Featured review
Andres A Chavarria
Andres A Chavarria ( 18 courses, 11 reviews )
a year ago
Got to the end of the course The professor is definitely here to help! there are a lot of new things to learn and it will be an amazing experience for you while you take this journey on how to create a beautiful website from scratch! Way to go Irfan!