HTML & CSS Flexbox: Create Amazing Responsive Websites

Learn advanced HTML, CSS3 Flexbox, Bootstrap Flex, Media Queries, Jquery and Create Websites with Responsive Design

3.75 (114 reviews)
Udemy
platform
English
language
Web Development
category
instructor
984
students
3.5 hours
content
Jul 2019
last update
$34.99
regular price

What you will learn

Understand and correctly use the flexbox properties used for flex container and flex items

Know the default behavior of flexbox model

Understand how to position and align flex items in layout

Optimize code with shorthand properties

Create a complete layout

Use nested flex containers

Create, position and align layout content

Use advanced layout techniques with :nth-child selector

Use of media queries and flexbox properties for responsive web design

Create responsive webpages with different kind of contents using flexbox

Use of CSS3 properties to create animation and effects

Create responsive web galleries, forms and image accordion slider

Create interactive pages using Jquery

Use of flexbox model with boostrap framework

Description


*** Udemy  best seller in Flexbox topic***

"Perfect!!! The instructor is an excellent communicator, and explains practical content in a concise manner, in a way that is easily understood. I've been working on building my own web app, and he makes difficult concepts simple." - Jordan McEachern


***Last Update - July 2019***


Are you looking for a course to build a modern website in the easiest and most efficient way? 

If your answer is  yes, you're in the right place. Here you will learn how to build responsive and modern websites using the flexbox layout model.

My name is Luis Carlos, im an enginner & a web developer, and I will be your guide in the next hours for this course. I have several years of experience as a trainer and I will pass on all my knowledge in the area of web development.


Why Flexbox?


CSS Flexbox simplifies complexity.

With Flexbox you will be able to do more with layouts, and  allow you to reach the complex layout in an easier  and fun way writing less & clean code to create them.


What you will learn and be able to do at the end?

  • Properties for parents (container) and childrens (flex items)

  • Align and position flex items

  • Arrange items in different directions and orders

  • Fill the remaining space and shrink elements to not overflow

  • Create a responsive webpage  with the respective content

  • Advanced layout techniques

  • Use of media queries and flexbox properties to create responsible sites

  • Creation of a responsive form and web gallery using flexbox

  • Use of CSS3 properties to create animations and effects

  • Create interactive pages with Jquery

  • Flexbox Model applied with Bootstrap framework


How is the course structured?

The course is structured in several sections where the first part (section 2 and 3) is dedicated to the properties used for creating websites using the flexbox model. The section 4 guide to a real webpage, where i create the holy grail layout using 2 methods, one where i use only one dimension layout and later the same layout will be done in two dimensions using nested containers.

With the main layout finished it will  be added the content in order to understand how the flexbox will position and align all the content of the page.

After create the first real webpage, it's time to learn advanced techniques to create layouts, where you can check the great dynamic and versatility of the flexbox model.

At this point you can already create websites to your own projects, and only need to adapt your website to all types of devices, which is why you learn in section 5 to use media queries in site creation. 

Section 6 is dedicated to the creation of pages with different kinds of contents, using always the flexbox model, showing the great capacity that this model has for creating multiple web contents (Responsive web galleries/ Forms / Image accordion slider/interactive pages using Jquery)

The course has some documents available that you can follow and can work as your guide, where it is possible to verify the planning and details that I outlined for the creation of the webpage and some details about layouts and some flexbox properties.

Finally, i have created quizzes in which you can test the knowledge acquired during the course



Recommended speed:

1 - 1.25x


-----What people say about my courses------

Recent reviews from another courses:

"Ideal for students that are starting in this area. The instrutor goes direct to the subject, and make good code exemples. I have truly enjoyed this starting course of html. im waiting for new videos and other courses in this area by this instructor"

*AA*


"Good basic stuff fot those who are starting. Exercises made in videos are very well explained in each topic. I feel confident to the next exercises"

*TK*


"Videos with well defined content. Great step by step overview of each base number with many examples to understand all the conversions. This tutorial is very well prepared, the pace is perfect and the material presented is structured well."

*JW*





Content

Introduction

Course Structure & Kick off
Introduction
Flexbox Layout Model

Create Overall Layout With Parent Properties

Introduction
Display
Flexbox! What is the default behavior?
Define container direction using Flex-direction
Flex- direction values
Wrap items using Flex-wrap
Flex- wrap
Shorthand Flex-flow property
Justify-content aligment property
Justify-content
Align-items
Align-content

Flex Item Properties to Fine Tune Layout

Define flex items order with Order property
Order
Flex-grow
Flex-grow calculation
Flex-shrink
Flex-basis
Flex shorthand property
Align-self

Create your First Layout with Flexbox

Introduction
Holy Grail layout - Create your first real layout (1st version)
Holy Grail with Nested Flex Containers (2nd version)
Holy Grail Layout - header content
Holy Grail Layout - nav content
Holy Grail Layout - article content
Holy Grail Layout - aside content
Holy Grail Layout - footer content
Advanced Layout Technique - Part 1
Advanced Layout Technique - Part 2 (Holy Grail)

Responsive Design & Media Queries

Introduction and importance of Media Queries
Responsive Design without Media Queries (With Flex-Wrap)
Make your Webpage with Responsive Layout (Holy Grail Layout)

Page content Made With Flexbox for real world

Introduction
Responsive Web Gallery (Part 1) - Plan and define the main elements
Responsive Web Gallery (Part 2) - Fine-tune your layout
Responsive web gallery using background-color css property
Responsive Form built with Flexbox (Part 1)
Responsive Form built with Flexbox (Part 2) - Change elements order
Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation
Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout

Mini Projects With Flexbox & Jquery - Add Interactivity

Introduction
Create a FAQS Page with Flexbox & Jquery
Create Section Tabs Using Jquery

Flexbox Model with Bootstrap Framework

Bootstrap Flex Intro
Bootstrap display utility classes and use of Breakpoints for responsive design
Flex direction
Flex wrap using bootstrap
Justify Content
Align Items
Align Content
Align Self
Order property applied with Bootstrap
Flex Grow/Shrink utility classes

Screenshots

HTML & CSS Flexbox: Create Amazing Responsive Websites - Screenshot_01HTML & CSS Flexbox: Create Amazing Responsive Websites - Screenshot_02HTML & CSS Flexbox: Create Amazing Responsive Websites - Screenshot_03HTML & CSS Flexbox: Create Amazing Responsive Websites - Screenshot_04

Reviews

Falguni
March 28, 2018
Course focused on the developer's point of view, well detailed. good pace by the instructor with very good tips for building modern layouts
Hamad
March 26, 2018
Great approach how it easily work with clear and simply css instructions that this model use. very good knowledge by the instructor
Joshua
March 25, 2018
A completely learning resource where you will learn so much. Instructor knowledge is very good and deserves a great rating. Excellent value . Thanks
Maurice
March 20, 2018
Good pace, easy to understand. Essential information if moving from traditional box model layouts with floats to flexbox model.
Abelard
March 15, 2018
I really enjoyed this course. Always focused on the subject so that the student understands to the end how to use this technique correctly and efficiently
Thomas
March 12, 2018
This is a practical course where examples are created from the simplest to the higher complexity and some of them can be applied in real life. Excellent method to implement in the construction of websites being of easy implementation even for people with a minimum of experience in this area.
Haris
March 8, 2018
This course should title itself "how to create websites very easily with flexbox". This new method is very innovative and will make life easier for many programmers. Great instructor job and knowledge about this method used
Rafa
March 6, 2018
Instructor Luis was 5 stars at explaining the main concepts. Excellent course with great content that explains how this model makes it easier to create websites. Is ideal for those who want to build websites in a more efficient with fairly comprehensive code. Ideal for beginners and people with some knowledge of web development
Altan
February 10, 2018
Everything in this course is well done, engaging and attractive, with a good curriculum organization and respective material. It all just flows very well and makes the content easy and enjoyable to consume. The course is clearly effective and i can get solid understanding of how Flexbox works and helped me to fill in any technical gaps. In latest section instructor walks through several real world examples that drive home the way Flexbox can be used in different contexts in a webpages. Thanks
Albert
January 27, 2018
The instructor does an excellent job of explaining the details. Easy concepts are well explained and give me a deeper understanding of how flexbox works and can make in a easy way great layouts.Real layouts made are great. Can't wait to learn more from this instructor and about flexbox. Brilliant. Thanks
Karl
January 19, 2018
This is a good course where I can see what flexbox properties apply for different situations. The great advantage of this course is that the instructor applies these properties to build a page from its beginning which helps to apply the properties in concrete projects instead of being simple blocks without utility. Section 4 is top showing all the flexbox's ability to build a true page. Very good knowledge by the instructor, going to detail, clearly explaining the code that writes. I recommend this course for everyone.
Larry
January 17, 2018
Little opportunity to apply what is being talked about. Not building anything or integrating knowledge.
Abhinav
January 15, 2018
The course content is precise and lectures are very knowledgeable and keeps us interested in the different material. thanks
Brandon
January 14, 2018
Awesome experience this course for people that want to learn the best web technologies. Everything in this course is excellent with a lot of great information an practice exercises that can be used in any real situation. Thanks a lot for this great opportunity
Ab
January 14, 2018
This class has opened up new areas for me. Very enjoyable. Incredible amount of learning how to use flexbox model. The course is very well structured and can be followed by students with less knowledge as well as for more advanced students. The instructor builds a layout from the beginning with its content, clearly creating all the steps to take to create a page. 5 stars. thank you

Coupons

DateDiscountStatus
7/16/2019100% OFF
expired
7/25/2019100% OFF
expired
9/16/202285% OFF
expired

Charts

Price

HTML & CSS Flexbox: Create Amazing Responsive Websites - Price chart

Rating

HTML & CSS Flexbox: Create Amazing Responsive Websites - Ratings chart

Enrollment distribution

HTML & CSS Flexbox: Create Amazing Responsive Websites - Distribution chart
1353728
udemy ID
9/18/2017
course created date
7/9/2019
course indexed date
Bot
course submited by