Tutorialspoint

#May Motivation Use code MAY10 for extra 10% off

HTML & CSS Flexbox: Learn and Build Responsive Websites in 2023

person icon Luís Carlos

4

HTML & CSS Flexbox: Learn and Build Responsive Websites in 2023

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

updated on icon Updated on May, 2024

language icon Language - English

person icon Luís Carlos

English [CC]

category icon Web Development,HTML,CSS,Web Design

Lectures -51

Resources -8

Duration -3 hours

4

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

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.

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- Section 7 and Bootstrap -Section 8)

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.

Goals

What will you learn in this course:

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

Prerequisites

What are the prerequisites for this course?

  • This course is suitable for people with basic interest and basic knowledge of web development and want to increase their knowledge in this area
HTML & CSS Flexbox: Learn and Build Responsive Websites in 2023

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction
2 Lectures
  • play icon Introduction 02:55 02:55
  • play icon Flexbox Layout Model 03:26 03:26
Create Overall Layout With Parent Properties
9 Lectures
Tutorialspoint
Flex Item Properties to Fine Tune Layout
6 Lectures
Tutorialspoint
Create your First Layout with Flexbox
10 Lectures
Tutorialspoint
Responsive Design & Media Queries
3 Lectures
Tutorialspoint
Page content Made With Flexbox for real world
8 Lectures
Tutorialspoint
Mini Projects With Flexbox & Jquery - Add Interactivity
3 Lectures
Tutorialspoint
Flexbox Model with Bootstrap Framework
10 Lectures
Tutorialspoint

Instructor Details

Luís Carlos

Luís Carlos

e


Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515