Skip to content
UdemyWeb DevelopmentPaid courseIntermediate levelCertificate

HTML & CSS Flexbox: Create Amazing Responsive Websites (Udemy.com)

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

Created by: Luis Carlos

Last updated June 2023

icon
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

How it compares

Against the other 815 rated Udemy courses in Web Development on CourseDuck:

  • Rating4.2 out of 5higher than 13% of them
  • Reviews116#619 of 816 by number of reviews
  • Length3.4 hoursshorter than 75% of them
  • Last updatedJune 2023earlier than 68% of them

icon
Course 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*





icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

Luis Carlos

Luís Carlos é um entusiasta do mundo da tecnologia desde a sua adolescência. Nascido em Lisboa, Portugal, cedo demonstrou interesse pelas novas tecnologias e pela forma como estas podem conectar as pessoas. Licenciou-se em Engenharia de Telecomunicações, destacando-se pela sua dedicação e paixão pela área.

Após concluir a formação académica, Luís decidiu partilhar o seu conhecimento com os outros. Tornou-se formador em tecnologias de informação e matemática, sempre em busca de  inspirar os seus alunos a explorarem o mundo digital. Luís acredita que a educação é fundamental para o desenvolvimento pessoal e profissional e, por isso, utiliza métodos inovadores e interativos para cativar a atenção dos seus alunos.

Além de ensinar, Luís continua a estudar e a manter-se atualizado sobre as tendências do setor, pois considera que aprender nunca deve ter fim. A sua paixão e compromisso com a educação têm impactado positivamente a vida de muitos estudantes, preparando-os para os desafios do futuro.

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.2

116 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By LeRoy Rice on 1/8/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.

By Sachindra Kumar Tripathi on 1/4/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.

By Paul McGregor on 4/4/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

By Rob McDonald on 4/2/2018

Hard to understand the instructor and he talked to fast

By Thomas Friz on 3/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.

By Rafa Logres on 3/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

By Albert Arnulf on 1/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

By Larry Lutz on 1/17/2018

Little opportunity to apply what is being talked about. Not building anything or integrating knowledge.

By Brandon on 1/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

By Ab Sunil on 1/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

Showing all 10 reviews on CourseDuck

Read all 116 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 84 / 100