Build a Responsive Website with HTML5, CSS3 and Bootstrap 4
4.5 (391 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.
5,112 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build a Responsive Website with HTML5, CSS3 and Bootstrap 4 to your Wishlist.

Add to Wishlist

Build a Responsive Website with HTML5, CSS3 and Bootstrap 4

Learn modern web design and code responsive websites from scratch using HTML5 and CSS3. Develop and code a huge project.
4.5 (391 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.
5,112 students enrolled
Created by Filip Kordanovski
Last updated 6/2017
English
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 6 Articles
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 6.5 hours of Full HD video material divided into 50 downloadable lectures
  • Skills to build beautiful real-world websites from scratch
  • You will learn how to code amazing Bootstrap 4 templates with HTML5 and CSS3
  • Learn to easily create incredibly cool animations using just CSS3
  • You will also learn how to create beautiful animations on scroll using basic JavaScript that will make your website look very professional
  • Learn how to polish a website with smooth scrolling and hover animations
  • Learn the basic steps on how to make a website responsive to fit smaller screens and mobile devices
  • Have a thorough understanding of good practices and principles of HTML5, CSS3, Bootstrap 4 and JavaScript
  • Feel comfortable with the process of coding, creating and designing any templates/websites from scratch
  • Get a free copy of my personal journal containing hundreds of free resources and links to fit the needs of any developer/designer
View Curriculum
Requirements
  • Have a very basic understanding of HTML & CSS (tags, divs, classes, IDs)
  • A code editor of your choice (we will go through this in a lecture at the beginning of the course)
  • An Internet connection is required
  • You won’t need to buy any software – everything we are going to use will be free
  • Desire to learn and improve your skills
Description

***** COURSE COMPLETELY UP TO DATE AS OF 5TH JUNE 2017*****

3 NEW LECTURES ADDED (NEW STUDENT REQUEST LECTURE!, "Meet your instructor" and "Be the FIRST to know about new courses"). Make sure to check these as they contain important information. Check the BONUS section for more information.

*** 4800+ STUDENTS JOINED ALREADY. NUMBERS DON'T LIE - ENROLL NOW ***

***** IMPORTANT UPDATE *****

New section has been added. This is where all the new BONUS lectures will be uploaded. I have published new lectures there so make sure to check these out - We are UPDATING your Bootstrap 4 version to latest.

NEW: Student Request! Request a feature and it may be added as a BONUS lecture.

Have you always wanted to build an amazing looking website but lacked the skills? Maybe you’re already familiar with HTML and CSS but you couldn’t start coding an actual website because you didn’t have the idea or the design concept in mind? Maybe you’ve always wanted to code that template but weren’t feeling comfortable? What if I told you that, with only basic understanding of HTML and CSS you can actually create wonderful websites if you knew time-saving tricks?

Reviews:

"I can say that, so far, i learned a lot. especially the resources are very informative and the final website design looks really cool. Thanks for taking the time explaining the very details." - Виктор Williams

"the pace the instructor is going is really adaptive, i absolutely have no problem coding in real-time. all of the instructions are step by step and the instructor actually makes sure that you understand his concept before he moves on. waiting for you next course!" - Jay Doughlas

In this course I will try to cover every concept of building a website from start to finish. We will be using the most popular CSS framework called Bootstrap 4 (we will get in-depth about Bootstrap). We’ll start with wire-framing our design (I will tell you why this is very important). Then, step by step we will design and code all the sections that the website will be able to offer. We will spice up the website with creating amazing animations using tricks and techniques that I will teach you. You will be creating animations on hover and animations on scroll that will make your website look like a piece of cake. That’s not all though, we will also create smooth scrolling on our website so it can offer even better user experience for the end-user.

To summarize – We will be using a free wire-framing tool to create our prototypes. HTML and CSS will be used to code and build our website. Bootstrap will help us create a responsive website that will be accessible on smaller screens and mobile devices. Also, we will even use a little bit of JavaScript and jQuery to do some event driven things like animations on scroll or trigger animations.

"I was a bit skeptical at first when i bought this, but once I started to dive into the course, i can say that buying this course was one of the best decisions i have made in my short web development career" - Emilio Pet

So, why choose me as an instructor? Why buy this course among all those other courses? It’s because I will offer you a different approach to your learning experience. Each lesson you will be presented with a task that you will have to accomplish on your own. Each lesson you will be asked a question that you should answer before moving on. I believe that good teaching is done through student practice and involvement. At the end of each section you should take the quiz to check up on your skills and see if you’re ready for the next section. At the very end of this course, I will challenge you with an ultimate task – create a project as big as the one we were creating throughout the course and show it to me! I will be glad to see it. So, why wait? If all this sounds great to you, Press on “Take this Course” and start learning today! 100% money-back guarantee!

Who is the target audience?
  • Beginners who have very limited knowledge of HTML and CSS but want to expand their skillset
  • Students who have a basic understanding of HTML and CSS and wish to create amazing responsive websites
  • Web Developers with a desire to spice up their web development and programming skills
  • Anyone who wants to start a career in web design & development
  • Do NOT take this course if you are a web developer with many years of experience
Curriculum For This Course
53 Lectures
06:48:19
+
Course Introduction
7 Lectures 25:15

Welcome message & introduction to the topics that this course covers.

Preview 03:48

Quick showcase of our website that we're going to build throughout the course.

Preview 03:17

The tasks and the questions that you will be asked during most of the lectures.

Tasks, Questions, Quizzes and Resources During the Lectures
05:26

Learn how to ask for help at any time and take advantage of the project files.

Preview 04:17

I've created a chatroom for the students of this course as I think communication between student-student and teacher-student is vital during your learning experience. You can discuss about anything, ask questions, help others and more -

Join the chatroom here: www.discord.gg/GzndDXB

Join the Official Course Chatroom Here!
07:25

***** IMPORTANT UPDATE *****
Bootstrap 4 has received a new update. Please update your Bootstrap 4 version to latest before moving on with the course. I strongly suggest updating it before you start the course. If you've already started the course, no worries - you can update the version at any time. Just check out the BONUS lecture down below for a complete how-to / step-by-step instructions.

Project files are added here. I will occasionally post updated versions of the final project files here, so please check every 1-2 weeks for newer, updated versions. V3 means that there has been an update to the initial version that has some bugs fixed after receiving feedback from the students. 

V4 version has the latest Bootstrap 4 version and fixed navigation bar (responsiveness). Please check the bonus lecture about updating Bootstrap 4 before moving on.

Download the Final Project Files Here
00:35

Who I am. What I do. Read a few sentences about your instructor and get to know him better.

Preview 00:26
+
Let's Get Started
4 Lectures 29:22

Free e-book containing hundreds of useful links at your disposal.

Get My Personal Journal Here
00:01

Here we are taking a look at some of the most popular text editors and we choose one to work with.

Preview 05:41

Here, with the help of our text editor, I'm going to set up the project environment to jump-start our website design experience.

Setting Up The Project Environment
13:51

Brief look at the technologies that we are going to work with throughout the course.

What is HTML, CSS, Bootstrap?
09:49

Refresh your memory and check your basic knowledge before getting your feet wet.

HTML, CSS & BS Quiz
5 questions
+
Building The Website: The 9 Sections
27 Lectures 04:01:03

I am going to explain why is Wireframing important. I am also going to show you some wireframing tools that you can use daily.

Preview 06:44

Getting ready for our journey. Make sure to correctly follow this lecture. After this, you will know how to implement fonts into your designs.

Warm-up: Setting Up the Container, Coding the Home Page & Installing Fonts
16:43

Making our HTML markup of the home page look beautiful.

Home Page: Designing the Home Page with CSS3
14:04

Your first task & question time. Try to answer and complete them correctly.

Home Page: Task, Question and Resources
07:36

Learn how to create navigation bars using just pre-made Bootstrap 4 classes.

Coding and Designing the Navigation Bar
11:17

Writing the HTML for the 'Features' page.

Features Page: Coding the Features Page
10:49

Designing the 'Features' page with CSS.

Features Page: Designing the Features Page
09:01

Spice up your skills with the tasks and the question for the current lecture.

Features Page: Task, Question and Resources
07:35

HTML markup for the 'Timeline' page.

Timeline Page: Coding the Timeline Page
10:14

I will try to explain these 2 concepts before diving into the 'Timeline' section CSS.

Relative vs Absolute Positioning & Pseudo Classes
07:10

CSS markup for the 'Timeline' page.

Timeline Page: Designing the Timeline Page
18:16

Task, question and resources for our 'Timeline' section.

Timeline Page: Task, Question and Resources
08:08

Quick yet powerful way to create a parallax effect in less than 5 minutes.

Designing & Coding the Parallax Page
10:01

Coding the 'Cards' section of our website.

Products Page: Coding the Products Page
09:33

Designing the very same section.

Products Page: Designing the Products Page
05:11

Don't miss these.

Products Page: Task, Question and Resources
07:31

HTML markup for the 'Numbers' section.

Numbers Page: Coding the Numbers Page
03:42

The CSS styles for the 'Numbers' page.

Numbers Page: Designing the Numbers Page
06:55

Check these out.

Numbers Page: Task, Question and Resources
06:45

HTML markup for the 'Testimonials' page.

Testimonials Page: Coding the Testimonials Page
10:06

CSS designs for the 'Testimonials' page.

Testimonials Page: Designing the Testimonials Page
05:50

Again, make sure to complete these before moving forward.

Testimonials Page: Task, Question and Resources
05:14

HTML markup for the 'Contact' page.

Contact Page: Coding the Contact Page
11:38

Designing the 'Contact' page with CSS3.

Contact Page: Designing the Contact Page
10:24

Cool web design/development resources at your disposal. Plus some task.

Contact Page: Task, Question and Resources
05:26

The last bit of our website. Our footer. Lets make it beautiful.

The Footer: Coding the Footer
04:47

CSS3 designs for the last section of our website.

The Footer: Designing the Footer
10:23

Refresh your skills here before continuing.

Main Website Development Quiz
5 questions
+
Polishing the Website: Buttons, Smooth Scrolling & Animations
4 Lectures 35:31

Basic programming skills: make the navigation bar stick to top when scrolling past a different point.

Preview 06:41

Making the buttons work with the old fashioned way AND I'm going to showcase a much cooler way of doing it with some smooth scrolling. Jump in!

Making the Buttons Work & Adding Smooth Scrolling Effect
10:11

Learn how to create animations on scroll the EASIEST way.

Animations on Scroll: Examples & Demonstration
11:03

This is where you and your skills come into place. Animate the remaining website by your own!

Animations on Scroll: Get Your Hands Dirty
07:36

Refresh your skills before moving forward.

Polishing & Animation Quiz
5 questions
+
Making The Website Responsive with Media Queries
3 Lectures 31:41

Introduction to website responsiveness and media queries. Don't miss this.

What are Media Queries and How Do They Work?
06:19

Part 1 of making our website fully responsive.

Making Our Website Responsive – Part 1
13:31

Part 2 of making our website fully responsive.

Making Our Website Responsive – Part 2
11:51

Test your responsiveness skills here.

Media Queries Quiz
5 questions
+
Final Touches & Conclusion
2 Lectures 04:03

Final touch - create a favicon.

Creating a Fav Icon
02:17

Time to say goodbye! Thank you for being a great student!

Congratulations! You made it! What Now & Super Project Challenge
01:46
+
BONUS Lectures
6 Lectures 41:27

*** IMPORTANT *** Update your Bootstrap files as there is a new version released.
I strongly suggest watching this lesson and updating it before you start the course. If you've already started the course, no worries - you can update the version at any time. Just follow along the step-by-step instructions provided in this lecture.

Preview 07:51

This lecture is an update to 'Section 3: Lecture 14: Coding and Designing the Navigation Bar'. We are re-designing the navigation bar and making it fully responsive after a student request.

Student Request: Building a Responsive Navigation Bar
13:51

I'm back with another student request - this time we are creating a responsive multilevel-dropdown tree menu from scratch! Join me!

Student Request: Building a Responsive Multi-level Dropdown Menu
18:37

This is the official course, student-only chatroom. Join hundreds of students, just like you, in a multiple-channel Discord chatroom where you can discuss anything from hobbies to web dev topics and connect with me personally.

Official Course Chatroom!
00:19


To all of my loyal students, here's 75% off my newest course on web design/development!

Discount for my PSD-to-HTML5: Beginner to Advanced course!
00:22
About the Instructor
Filip Kordanovski
4.6 Average rating
601 Reviews
6,069 Students
2 Courses
Front-End Web Developer

Filip Kordanovski is a self-taught front-end web developer from Skopje, Macedonia.
He is truly passionate about his work and he loves to learn new stuff everyday.
Filip has more than 4 years expertise in the field of web development & design and has recently started teaching and publishing courses to share his knowledge with the world.
A truly dedicated persona with huge enthusiasm towards teaching, always aiming to deliver affordable, high quality education/content.