Modern Responsive Website with CSS3 Flexbox and ES6
4.3 (147 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.
9,463 students enrolled

Modern Responsive Website with CSS3 Flexbox and ES6

Learn how to build BEAUTIFUL responsive websites from SCRATCH using HTML5, CSS, CSS3 Flexbox and Javascript (ES6)
4.3 (147 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.
9,463 students enrolled
Created by Vladica Lapcevic
Last updated 4/2018
English
English [Auto-generated]
Current price: $11.99 Original price: $199.99 Discount: 94% off
3 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6.5 hours on-demand video
  • 34 downloadable 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 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Be able to create beautiful websites from scratch
  • Make RESPONSIVE websites that look great on all screen sizes

  • Improve HTML5, CSS3 and Javascript skills

  • Make your websites stand out
Course content
Expand all 46 lectures 06:40:49
+ Setting up website structure
23 lectures 03:53:48
Preparing images for our project
06:10
Adding the main banner
09:54
Adding logo to the navigation bar
11:08
Choosing font for our website
04:57
Adding menu to the navigation bar
09:02
Learning Flexbox
15:45
Using flexbox to format nav layout
12:17
Improving main menu
08:02
Adding header text
14:05
Adding arrow button to header
07:23
Creating About us section
11:40
Adding icons to About us section
14:31
Creating Gallery section
10:06
Adding effects to gallery images
07:56
Adding Testimonials section
08:19
Styling Testimonials section
14:18
Adding arrow navigation to Testimonials
11:56
Adding Contact section
18:36
Styling submit button
08:48
Adding Footer
13:31
Website current state overview
03:25
+ Adding interactions to website
9 lectures 01:23:23
Using Javascript to add interactions to our page
01:28
Setting up main JS file
02:44
Changing navigation background on scroll
11:36
Adding click event to navigation items
12:54
Adding scroll to section
13:28
Making testimonials changeable
12:14
Opening larger image on gallery image click
11:27
Styling popup image
11:43
Closing popup image
05:49
+ Making website responsive
9 lectures 01:18:11
Making our website responsive
00:46
Explaining Viewport meta tag
03:09
Setting CSS structure for responsive code
04:36
Adding first responsive code
09:43
Creating mobile navigation
21:54
Styling mobile navigation
13:59
Adding menu toggle button
07:35
Finishing mobile navigation
05:28
Styling for smallest screens
11:01
+ Conclusion
3 lectures 02:56
Preview of finished website
01:20
Next steps
01:09
Thank you
00:27
Requirements
  • Very basic HTML and CSS knowledge would be helpful
  • NO advanced HTML, CSS, or JS knowledge is required
  • Basic text editor of your choice
Description

This course is a part of upcoming collection of courses called Become a Guru, which has a goals of turning students into professional developers, no matter how much of previous experience they have.

In this course:

- You will learn how to code websites from scratch

- You will learn most advanced HTML5, CSS3 and Javascript principles

- You will learn CSS3 Flexbox

- We will make our website look amazing by using Javascript for interaction

- You will learn how to turn your code into Beautiful websites 

- We'll explore free stock image websites

- We'll be using fonts for our icons in order to make or icons more flexible

- You will learn how to find modern fonts

After this course you will have all skills you need in order to create modern website.

If you are a beginner, this course will turn you into professional.

And if you already have some coding skills, this course will make you even better developer.

Welcome!

Who this course is for:
  • Anyone who wants to learn how to create amazing looking websites
  • Anyone who wants to improve development skills
  • Anyone who wants to learn modern CSS3 (Flexbox) and Javascript (ES6)