Watch Demo

Rs. 12800  Rs. 699

Learn CSS3 Flexbox & Build Responsive Websites in 2018

Create Websites efficiently using Responsive Design with HTML, Flexbox model, Media Queries, CSS Animation and Jqueryhort description.

02h:45m
Lifetime access
0 learners
About this course

Here you will learn how to build responsive and modern websites using the flexbox layout model. My name is Luis Carlos, I'm an engineer & 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. lexbox 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.

Read more
Course Objectives


Course Content

  • Properties for parents (container) and children (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
Who is this course for?

This course is ideal for people who work or study in the area of web development that want to learn the best trending and modern web technologies. Students should have basic knowledge of HTML, CSS and Jquery

Course Plan

1. Introduction
3 videos
Introduction 02:56

Flexbox Layout Model 03:26
2. Create Overall Layout With Parent Properties
9 videos
Display 04:00

Default behaviour 03:39

Flex-direction 04:20

Flex-wrap 03:27

Flex-flow 02:00

Justify-content 03:49

Align-items 04:22

Align-content 03:26
3. Flex Item Properties to Fine Tune Layout
6 videos
Order 03:22

Flex-grow 04:55

Flex-shrink 02:29

Flex-basis 02:08

Flex 04:32

Align-self 02:43
4. Create your First Layout with Flexbox
10 videos
Holy Grail layout - Create your first real layout (1st version) 05:23

Holy Grail with Nested Flex Containers (2nd version) 02:10

Holy Grail Layout - header content 05:36

Holy Grail Layout - nav content 02:32

Holy Grail Layout - article content 03:05

Holy Grail Layout - aside content 01:43

Holy Grail Layout - footer content 02:09

Advanced Layout Technique - Part 1 04:44

Advanced Layout Technique - Part 2 (Holy Grail) 03:22
5. Responsive Design & Media Queries
3 videos
Make your Webpage with Responsive Layout (Holy Grail Layout) 04:35

Responsive Design without Media Queries (With Flex-Wrap) 02:57
6. Made With Flexbox
7 videos
Introduction 00:37

Responsive Web Gallery (Part 1) - Plan and define the main elements 05:01

Responsive Web Gallery (Part 2) - Fine-tune your layout 06:42

Responsive Form built with Flexbox (Part 1) 08:38

Responsive Form built with Flexbox (Part 2) - Change elements order 03:16

Dynamic Navigation Menu / Image accordion slider (Part 1) - Layout Creation 06:54

Dynamic Navigation Menu / Image accordion slider (Part 2) - Tuning Layout 05:52
7. Mini Projects With Flexbox & Jquery
3 videos
Introduction 00:35

Create a FAQS Page with Flexbox & Jquery 09:56

Create Section Tabs Using Jquery 12:42

Meet the Author


Luis Carlos
Engineer and Web developer
Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences. As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people. You can follow some of my articles in my website where i share some tutorials in the area of new technologies.
More from Luis Carlos
Ratings and Reviews     0.0/5

You may also like