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.4 (276 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.
10,373 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 70
  • Length 8 hours
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 English Closed captions available

Course Description

*** Over 10,000+ Students are already taking this course ***

*** Course is Fully UP TO DATE for SEPTEMBER 2016 *** 

*** 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 Irfan Dayan! - 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!

What are the requirements?

  • A Text Editor

What am I going to get from this course?

  • 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

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction To Course
02:38

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. 

Article

Please download resource file before you go ahead. 

Section 2: Web Design Guidelines
02:08

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.  

04:54

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.

01:48

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.

06:51

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. 

04:46

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. 

02:07

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

03:08

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. 

03:47

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

02:04

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. 

Web Design Quiz
7 questions
Conclusion To Web Design Guidelines
Article
Section 3: Getting Started With HTML
02:33

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. 

02:02

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. 

01:12

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

11:37

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.  

Article

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

HTML Quiz
4 questions
Conclusion To Getting Started With HTML
Article
Section 4: Styling With CSS
02:01

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

02:56

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. 

03:33

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.

01:15

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.  

21:03

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. 

Download Code
Article
CSS Quiz
6 questions
Conclusion To Styling With CSS
Article
Section 5: Working With JavaScript & JQuery
01:47

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

04:25

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.

Download Code
Article
2 questions

This Quiz is about JavaScript and JQuery Library.

Conclusion to Working With JavaScript & jQuery
Article
Section 6: Bootstrap Responsive Framework
02:57

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

02:59

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

11:10

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

Download Code
Article
Bootstrap Framework Quiz
2 questions
Conclusion To Bootstrap Responsive Framework
Article
Section 7: Building Real Responsive Website
03:11

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

14:28

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.

12:40

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

18:52

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

13:39

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

17:40

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

10:24

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

11:48

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

13:18

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

16:25

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

04:00

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

06:56

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

05:30

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.

05:40

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

08:49

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

10:11

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

14:21

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

12:29

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

14:56

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

10:50

In this lecture, I'll build footer section. 

Section 8: Adding JavaScript & JQuery Effects
18:07

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

14:23

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

14:54

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

05:21

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

15:38

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

06:32

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

08:50

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

14:29

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

Section 9: Make Website Perfect For Responsive Layout
23:46

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

Section 10: Optimization, Validation And Testing of Website
01:45

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

04:16

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

02:36

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

04:47

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

Section 11: Download Code
Download Full Website Code
Article
Section 12: Conclusion
02:15

Great! You have made it. 

Section 13: Bonus Lecture
Bonus Lecture: 01
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Irfan Dayan, Teacher & Senior Web Developer

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!

 


Ready to start learning?
Take This Course