Web Development Masterclass: Learn HTML, CSS Flexbox, Bootstrap for Responsive Web Design

Are you a  looking for a web development class that helps you to build a modern website with responsive design 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 class. I have several years of experience as a trainer and I will share all my knowledge in the area of web development.

Why Flexbox?

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 code & clean code to create them.

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

• CSS3 properties for parents (container) and childrens (flex items) using
• 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 layout with the respective content
• Advanced layout techniques
• Use of media queries to create responsible sites
• Apply Flexbox model using Bootstrap

How is the course structured?

The course is structured in several sections where the first part is dedicated to the properties used for creating websites using the flexbox model. After properties I will guide you to a real webpage, where i create the holy grail layout using 2 methods, one where we 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 are already able to build websites, and only need to adapt your website to all types of devices, which is why you learn  to use media queries in site creation. 

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 in the layouts that i create.

Target Students

This course is intended for people who work in the area of ​​web development with knowledge of HTML and CSS or any person with an interest in this area

At the end feel free to leave a comment!

Join me in this challenge and see how easy and fun is to learn flexbox!

If you want to learn more in the web development area, you can watch my other courses:

• Cool Responsive Web Forms with HTML & CSS3 Flexbox - Guide to Front-End Web Development
  
  
  
• HTML and CSS Web Development Masterclass - Create your First Website
  
  

• HTML & CSS3 Flexbox Web Development Guide - Create Web Galleries with Responsive Web Design
  
  

• Create Interactive Websites With HTML, CSS Flexbox & Jquery
  
  
  
• Build a Dynamic Navigation Menu with HTML & CSS Flexbox

• Course presentation
• Introduction
• Flexbox layout model
• Flexbox properties
• Display property
• Flexbox default behavior
• Flexbox direction
• Flex wrap
• Flex flow
• Justify content
• Align items
• Align content
• Order property
• Flex grow
• Flex shrink
• Flex basis
• Flex
• Align self
• Holy Grail layout introdution
• Holy Grail layout - 1st method
• Holy Grail layout - 2nd method
• Holy Grail layout - create header content
• Holy Grail layout - create navigation links
• Holy Grail layout - create main content
• Holy Grail layout - create aside content
• Holy Grail layout - create footer content
• Advanced layout technique - part 1
• Advanced layout technique - part 2 (Holy Grail layout)
• Introduction to Media Queries
• Make your Webpage with Responsive Layout (Holy Grail Layout)
• Responsive Design without Media Queries (With Flex-Wrap)
• Bootstrap flex intro
• Bootstrap - Display utility classes and use of breakpoints
• Bootstrap - Direction utility classes
• Bootstrap - Flex wrap utility classes
• Bootstrap - Justify content utility classes
• Bootstrap - Align item utility classes
• Bootstrap - Align content utility classes
• Bootstrap - Align self utility classes
• Bootstrap - Flex Grow & Shrink utility classes
• Bootstrap - Order utility classes