Web Development Tutorial: Learn HTML, CSS Flexbox, Bootstrap & Build Websites with Responsive Design | Luis Carlos | Skillshare

Web Development Tutorial: Learn HTML, CSS Flexbox, Bootstrap & Build Websites with Responsive Design

Luis Carlos, Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
41 Videos (2h 15m)
    • Course presentation

      2:26
    • Introduction

      2:55
    • Flexbox layout model

      3:26
    • Flexbox properties

      1:48
    • Display property

      3:59
    • Flexbox default behavior

      3:38
    • Flexbox direction

      4:19
    • Flex wrap

      3:26
    • Flex flow

      1:59
    • Justify content

      3:49
    • Align items

      4:22
    • Align content

      3:26
    • Order property

      3:22
    • Flex grow

      4:55
    • Flex shrink

      2:29
    • Flex basis

      2:07
    • Flex

      4:32
    • Align self

      2:43
    • Holy Grail layout introdution

      0:56
    • Holy Grail layout - 1st method

      5:22
    • Holy Grail layout - 2nd method

      2:09
    • Holy Grail layout - create header content

      5:35
    • Holy Grail layout - create navigation links

      2:32
    • Holy Grail layout - create main content

      3:05
    • Holy Grail layout - create aside content

      1:42
    • Holy Grail layout - create footer content

      2:08
    • Advanced layout technique - part 1

      4:43
    • Advanced layout technique - part 2 (Holy Grail layout)

      3:22
    • Introduction to Media Queries

      6:05
    • Make your Webpage with Responsive Layout (Holy Grail Layout)

      4:35
    • Responsive Design without Media Queries (With Flex-Wrap)

      2:57
    • Bootstrap flex intro

      1:40
    • Bootstrap - Display utility classes and use of breakpoints

      7:21
    • Bootstrap - Direction utility classes

      2:27
    • Bootstrap - Flex wrap utility classes

      2:28
    • Bootstrap - Justify content utility classes

      2:18
    • Bootstrap - Align item utility classes

      2:11
    • Bootstrap - Align content utility classes

      2:28
    • Bootstrap - Align self utility classes

      2:16
    • Bootstrap - Flex Grow & Shrink utility classes

      4:14
    • Bootstrap - Order utility classes

      2:40

About This Class

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 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?

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 the sourse 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 timeto 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!

117

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Luis Carlos

Engineer, Web Developer and Instructor

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 technol...

See full profile

Report class