Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2020-12-14 01:34:19
30-Day Money-Back Guarantee

This course includes:

  • 4.5 hours on-demand video
  • 5 articles
  • 38 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development CSS

Développer avec Bootstrap 4 & Flexbox

Développement rapide et responsive avec les modules de boîtes flexibles (Flexbox)
Rating: 4.1 out of 54.1 (4 ratings)
46 students
Created by Sandra L
Last updated 3/2020
French
30-Day Money-Back Guarantee

What you'll learn

  • Les concepts de base de Flexbox
  • Maîtriser le passage à la ligne des éléments flexibles
  • Apprendre les propriétés Flex avec Bootstrap 4
  • Créer des pages responsives avec le système de grille et la Flexbox
  • Contrôler l'ordre du flux des éléments flexibles dans le DOM (Document Object Model)
  • Exemples de mises en page avancées avec les boîtes flexibles

Course content

6 sections • 47 lectures • 4h 35m total length

  • Preview00:56

  • Preview03:31
  • Preview03:26
  • Les frameworks Responsives
    00:25

  • Fichiers de Démarrage
    00:01
  • Preview08:19
  • Preview07:01
  • Flex Flow
    08:22
  • Justify Content
    09:17
  • Align Items
    08:20
  • Align Content
    04:53
  • Les propriétés flex
    4 questions

  • Fichiers de Démarrage
    00:01
  • Order
    04:17
  • Flex Grow
    03:27
  • Preview04:17
  • Flex Basis
    02:56
  • Preview04:15

  • Fichiers de Démarrage
    00:01
  • Flexible Menu
    02:55
  • MDN Docs & ressources
    00:02
  • Flexible Menu - Solution
    06:43
  • Flexible Image Gallery
    02:58
  • Flexible Image Gallery - Solution 1/2
    07:26
  • Flexible Image Gallery - Solution 2/2
    06:09
  • Flexible Menu Responsive
    01:07
  • Flexible Menu Responsive - Solution
    11:40
  • Flexible Cards
    07:11
  • Flexible Cards - Solution
    15:37
  • Flexible Pricing Grids
    02:13
  • Flexible Pricing Grids - Solution 1/3
    12:04
  • Flexible Pricing Grids - Solution 2/3
    14:11
  • Flexible Pricing Grids - Solution 3/3
    14:11
  • Flexible Charts
    02:26
  • Flexible Charts - Solution
    17:47

  • Présentation : Projet, Bootstrap & Flex utilities
    07:23
  • Navigation - Flex align et justify content
    05:49
  • Navigation - Flex order
    03:00
  • Navigation - Flex et responsive
    01:43
  • Carousel.js
    05:46
  • Carousel.js - align items
    04:15
  • Centered (vertical et horizontal)
    09:52
  • About - Flex Basis
    10:00
  • Gallery Flex Wrap
    02:39
  • Gallery Flex
    09:41
  • Gallery Flex avec images
    01:48
  • Image & Texte : order & responsive
    09:30
  • Final : bas de page (footer)
    05:21

Requirements

  • Savoir créer une page web avec les balises HTML
  • Connaître les propriétés CSS pour ajouter du style à une page web
  • Avoir déjà utilisé Bootstrap 3 ou 4 au moins une fois
  • Connaître des bases de l'intégration web avec HTML5 et CSS3

Description

Flexbox CSS3 est un modèle de boîte flexible qui succède aux solutions de display "inline" et "float" pour gérer la disposition des éléments et structure des pages web.

Voici, un cours complet pour apprendre les concepts de base de Flexbox, avec :

  • les options de direction et d'orientation (row et column)

  • les options pour aligner des éléments dans un conteneur flexible et gestion des espaces disponibles (fluidité),

  • Alignements et centrages horizontaux et verticaux, justifiés, répartis ...,

  • le contrôle de l'ordre avec la réorganisation des éléments indépendamment de l’ordre du flux (DOM),

  • et, Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé,

Plusieurs démos sur:

  • le conteneur flexible

  • les propriétés flex

  • la disposition des éléments flex en colonne et rangée

  • les options d'alignement des éléments flex

  • le contrôle de l'ordre des éléments flex

Des TP pour une mise en pratique rapide :

  • des exemples et projets de mise en page, de simple à plus complexe, avec les propriétés Flex

  • menu responsive flex, galerie d'images ...

Et, Bootstrap 4 avec Flex: un projet pour découvrir les bénéfices du CSS moderne et d'une mise en page contrôlée et facilitée grâce aux classes et utilities Flex de Bootstrap 4.

Who this course is for:

  • Intégrateur HTML & CSS, Désigner & Développeur
  • Des notions de javascript

Instructor

Sandra L
Javascript and Web Developer
Sandra L
  • 4.3 Instructor Rating
  • 1,151 Reviews
  • 22,508 Students
  • 19 Courses

Hello

I am Sandy, freelance web and mobile Developer based out of Toronto, in Ontario, Canada, I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery. 

I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few. 

I am also keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.

On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff. 

*****************************

Bonjour,

Je suis Sandy, développeur javascript et mobile. Je suis passionnée de développement Front (HTML, CSS, CSS3 Animation, Sass, Javascript et ReactJS...).

Mes autres intérêts sont le graphic et motion design. Je suis également passionnée de conception visuelle, le montage vidéo, la photographie et le gaming.

Venez rejoindre ma communauté de 20k+ apprenants. Je publie régulièrement pour enrichir mon catalogue de nouveau contenu. Depuis 2014, je partage mes connaissances, aussi bien en français qu'en anglais, sur les technologies Front et javascript qui ne cessent d'évoluer et d'offrir de nouvelles fonctionnalités pour faciliter notre réussite dans ce beau métier du développement et de la transformation digitale.

Cheers, Salutations !

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.