Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

Build Modern Responsive Website With HTML5, CSS3 & Bootstrap

Name: Build Modern Responsive Website With HTML5, CSS3 & Bootstrap
Rating: 4.4 (1160 reviews)

Learn HTML5, CSS3, jQuery, Bootstrap And Build Modern Responsive Website With Modern Trends From Scratch.

Created byIrfan Dayan

Last updated 10/2019

English

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

25 sections • 114 lectures • 13h 52m total length

Course Introduction5:41
I welcome you to this course. This course is about building modern responsive website with HTML5, CSS3, Bootstrap and some jQuery.
View Project Demo0:02
You can view the project demo at given link inside this lecture.
IMPORTANT NOTES!0:40
Read important notes before you move forward.
Download Resources0:05
Please download attached web development resources.

What Is Wireframing?3:17
In this video, we will learn about wireframes and why wireframe is crucial part of any web design process.
Create Website Wireframe14:18
In this video, we will create the wireframe of the website which we are going to build in this course.
Exercise - Complete Wireframe1:55
In this video, I want give you a task. And the task is to complete the wireframe.
Resources - Wireframe Tools2:59
In this video, I want to share some useful resources with you about wire framing tools.

Setup Basic Website Folder6:21
In this video, I will setup the basic website folder.
Add Basic HTML5 Document3:56
In this video, we will start coding the vesco project by adding the basic html5 document
Add Meta Tags4:12
In this video, we will add some important meta information to our vesco project.
Add Title & Favicon4:12
In this video, I will go ahead and I’ll add title and favicon to our Vesco project.
Add Basic External Files4:47
In this video, we will add some external files to our Vesco project.
Resources - Web Development2:02
In this video, I’m going to share some useful resource with you.
Quiz

Choose Right Fonts8:21
In this video, we will choose the right font for vesco project.
Resources - Web Fonts4:46
In this video, As always I’m going to share some resources which would be about web fonts.
Choose Right Colors6:12
In this video, we will continue our journey and will choose some good colors for our vesco project.
Resources - Web Colors3:36
In this video, I’ll share some resources about web colors.
Important Note Before You Go Ahead0:20
Please use https://fontawesome.com/v4.7.0/ for accessing Font-awesome library.
Choose Right Icons5:28
In this video, we will continue and we will choose Icons for our Vesco project.

Bootstrap Framework Version3:07
In this lecture, we will decide which version of bootstrap framework to use.
What Is Bootstrap?3:19
In this section, we will learn about Bootstrap framework. It is important to understand Bootstrap framework before we use it in our vesco project
Add Bootstrap To Website3:49
In this video, we will continue to add Bootstrap framework to our vesco project.
Bootstrap Grid System2:26
In this video, we will discuss bootstrap grid system.
Bootstrap Grid Examples10:44
In this video, I’ll give you some examples of bootstrap grid system.
Quiz

Introduction - Home2:11
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.
Add HTML - Home7:51
In this video, I'll write html markup for home section.
Add CSS (Part 1) - Home8:33
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.
Add CSS (Part 2) - Home8:49
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.
Add CSS (Part 3) - Home12:40
In this video, we will style the button of home section.
Add Parallax Effect - Home6:39
In this video, we will add parallax scrolling effect to the home section of vesco project.
Add Animation Effect - Home11:44
In this video, We will add cool animation to the elements of home section.

Introduction - Services1:08
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.
Add HTML (Part 1) - Services6:32
In this video, we will start writing HTML markup for services section of Vesco website.
Add HTML (Part 2) - Services9:51
In this video, we will complete HTML markup for services section.
Add CSS (Part 1) - Services7:11
In this video, we will start styling the services section of vesco website.
Add CSS (Part 2) - Services12:19
In this video, we will continue our journey and we will add some more css to services section of veso website.
Add Animation Effect Using jQuery - Services12:55
In this video, we will add animations to the services section.

Introduction - About1:37
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.
Add HTML - About10:42
In this video, we are going to write HTML markup for about section. Let us get started.
Add CSS (Part 1) - About10:03
In this video, we are going to start styling the about section.
Add CSS (Part 2) - About5:04
In this video, We will continue styling the about section.
Add Diagonal Background - About8:33
In this video, I will design the diagonal background image on right side of about section.

Introduction - Work1:56
In this new section, we are going to build work section of vesco website.
Add HTML (Part 1) - Work7:38
In this video, I’ll start writing html markup for work section.
Add HTML (Part 2) - Work6:44
In this video, I will continue writing html markup for work section.
Add CSS - Work6:23
In this video, I will start styling the work section.
Add Zoom Effect - Work4:35
In this video, I’ll add image zoom effect for work section.
Add Magnify-Gallery Effect Using jQuery - Work14:04
In this video, I’ll add magnify popup & gallery feature to work section.

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 5000+ Students Are Already Taking This course ***

*** BEST REVIEWED Course on Udemy ***

This course is about Building a 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 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 a real-world website.

You will learn, how to choose the 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 the Bootstrap framework which will really speed up the development time and it will allow adding 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 building a responsive html5 website in this course. The 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.

Build Modern Responsive Website With HTML5, CSS3 & Bootstrap

What you'll learn

Explore related topics

Course content

Getting Started!4 lectures • 6min

Setting Up Working Environment3 lectures • 10min

Creating Website Wireframe4 lectures • 22min

Building Basic Structure of Website6 lectures • 26min

Setting Up Fonts, Colors & Icons6 lectures • 29min

Bootstrap Framework5 lectures • 23min

Building Home Section7 lectures • 58min

Building Services Section6 lectures • 50min

Building About Section5 lectures • 36min

Building Work Section6 lectures • 41min

Requirements

Description

Who this course is for: