Udemy

Platform

English

Language

Web Development

Category

CSS Flexbox: Learn and Build Responsive Websites in 2021

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

4.00 (111 reviews)

Students

3.5 hours

Content

Jul 2019

Last Update
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*






Screenshots

CSS Flexbox: Learn and Build Responsive Websites in 2021
CSS Flexbox: Learn and Build Responsive Websites in 2021
CSS Flexbox: Learn and Build Responsive Websites in 2021
CSS Flexbox: Learn and Build Responsive Websites in 2021

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


Reviews

L
LeRoy8 January 2019

The pace of the course and the level of explanation are just right. The only weakness is the introduction. It could give a few more nuggets of wisdom i.e the flexbox model is all included in CSS 3. Also a caution about support in older browsers.

S
Shachindra4 January 2019

Great content. But the non-understandable accent of the tutor makes it difficult to understand.Even the caption could not translate his speech correctly. I want the author to take note of this for his future lessons.

B
Brian4 July 2018

This was a great help in my learning about website creation. All the topics are explained to detail which was very useful. Thanks

G
George25 June 2018

Excellent demonstration as this model can be easy to apply to build the complete layout of a website. The instructor explains in detail all the properties and they are applied in simple cases and other of greater complexity. The instructor is able to implement in the pages several languages like the case of Jquery giving approaching to a great diversity of contents that can be all of them together

D
Dali22 June 2018

Teacher is very concise when describing the different issues and has a great knowledge of this layout model. Detailed layout are done with great application in real websites. For me this is a brilliant course. Thanks

A
Ad31 May 2018

This is a great CSS flexbox course. I learn a lot with instructor tips. Very well explained, showing all details when the code is made. Thanks

T
Tarini5 May 2018

Very clear and concise in explaining the different issues. Many examples made help to clearly understand how this model works

F
Fredy21 April 2018

I really enjoyed this class despite some fears at first regarding the content. The instructor shows a high level knowledge of the subject, and use real examples that can apply in any project. Thanks

B
Brian12 April 2018

I highly recommend this course for all web developers. Great evolution in website construction using this simple method

S
Salim10 April 2018

Great sharing of valuable information by the instructor, where he showed great knowledge on the subject

R
Ranbir6 April 2018

Very good quality and explanations. I have learned a lot of helpful information. Overall course is 5 stars, very comprehensive and enjoyable

P
Pat5 April 2018

Excellent classes that show how flexbox can simplify what was sometimes really hard in the creation of web pages. Very good knowledge by the instructor.

P
Paul4 April 2018

This is perfect for my level of knowledge because the instructor shows all the details to explain how to get the final layout of a webpage. Besides showing the detail how the flexbox model works, it explains all the other css properties and html code involved in the construction of the pages. This model will greatly simplify my work. Thank you

J
Jordan29 March 2018

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.

F
Falguni28 March 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


Coupons

DateDiscountStatus
7/16/2019100% OFFExpired
7/25/2019100% OFFExpired

1353728

Udemy ID

9/18/2017

Course created date

7/9/2019

Course Indexed date
Bot
Course Submitted by