HTML et CSS modernes depuis le début (y compris Sass)
Créez des sites Web et des interfaces utilisateur modernes et réactifs avec HTML5, CSS3 et Sass ! Apprendre la grille Flex et CSS
Créer plusieurs projets de site Web et d'interface utilisateur de haute qualité
Mise en page sémantique HTML5 et fondamentaux CSS
Projets Flexbox & Grille CSS
Variables CSS, transitions, listes déroulantes, superpositions et plus
Hébergement et déploiement de sites Web avec FTP et Git
Tous les niveaux de compétence
Ce cours s’adresse aux développeurs débutants et chevronnés qui souhaitent apprendre à créer des sites Web et des interfaces utilisateur réactifs avec les technologies HTML5 et CSS3+ modernes telles que Flexbox et CSS Grid, ainsi que le précompilateur Sass. Ce cours comprend des heures d’apprentissage et d’amp; étudier des sections parallèlement à des projets réels. Arrêtez de vous fier à des frameworks comme Bootstrap pour votre interface utilisateur et apprenez à créer vos propres mises en page et classes utilitaires pour créer des sites Web et des interfaces utilisateur d’application personnalisés.
Les premières sections sont adaptées aux débutants, donc même si vous n’avez jamais rien construit auparavant, vous apprendrez toutes les bases. Si vous avez déjà de l’expérience avec HTML & CSS, passez simplement à la section 3 ou 4 et commencez.
Ce que nous couvrons
- Comment fonctionnent les sites Web
- Configuration du code Visual Studio, raccourcis, serveur en direct et amp ; Emmet
- Mise en page sémantique HTML5
- Fondamentaux CSS
- Conception réactive Avec Media Queries
- Unités CSS – rem, em, vh, vw, etc
- Flexbox
- Grille CSS
- Animation avec images clés et amp ; Transitions
- Variables CSS
- Pré-compilateur Sass avec projet de portefeuille
- Projets complets & Mini projets
- Déploiement du site Web vers l’hébergement mutualisé et amp ; Netlify avec Git
- Beaucoup plus
Sections sur Sass sera ajouté très prochainement !
Introduction
1
Welcome To The Course
2
How The Web Works (Summarized)
3
The Roles Of HTML & CSS In Web Development
4
Getting Setup With Visual Studio Code
HTML Basics
1
Section Intro
2
Create & Open HTML Pages
3
Doctype & Basic Layout
4
Setting Up Live Server (VSCode Extension)
5
Meta Tags & Search Engines
6
Headings, Paragraphs & Typography
7
Links, Images & Attributes
8
Lists & Tables
9
Forms & Input
10
Block & Inline Level Elements
11
Divs & Spans, Classes & Ids
12
HTML Entities
13
HTML5 Semantic Tags & Challenge
14
HTML5 Semantics Solution & Wrap Up
CSS Basics
1
Section Intro
2
Implementing CSS
3
Basic CSS Selectors
4
Dev Tools Introduction
5
Fonts In CSS
6
Color Types
7
Backgrounds & Borders
8
Box Model, Margin & Padding
9
Float & Alignment
10
Link State & Button Styling
11
Navigation Menu Styling
12
Inline, Block & Inline-Block Display
13
Positioning
14
Form Style Challenge
15
Form Style Solution
16
Aside: Visibility, Order & Negative Margin
Hotel Website
1
Project Intro
2
Aside: Design & Ideas
3
File Structure & Navbar
4
Showcase & Home Info
5
Features & Footer
6
About Page
7
Contact Page
Intro To Responsive Layouts
1
What Is Responsive Design?
2
Getting Started With Media Queries
3
Em & Rem Units
4
Vh & Vw Units
5
Making The Hotel Website Fully Responsive
Intro To Flexbox
1
What Is Flexbox?
2
Flexbox Basics
3
Flex Properties
4
Flex Alignment & Justify
EdgeLedger Website (Flexbox)
1
Project Intro
2
Header HTML & Navbar Styles
3
Hero Section & Overlay
4
Icons & Solutions Sections
5
Cases & Blog Sections
6
Finishing The Homepage
7
Responsive Media Queries
8
Inner Pages
9
Navbar & Lightbox Effects
10
Extra - Adding a Favicon
Website Deployment - Shared Host
1
Types Of Web Hosting
2
Shared Hosting Setup
3
Hosting Company Links
4
Setting Up Email
5
Upload Your Site via FTP
6
BONUS: Contact Form Submission (PHP Script)
More CSS Concepts - Advanced Selectors, Animation & More
1
Targeted Selectors
2
nth-child Pseudo Selectors
3
before & after Pseudo Selectors
4
Box Shadows
5
Text Shadows
6
CSS Variables (Custom Properties)
7
Keyframe Animation 1
8
Keyframe Animation 2
9
CSS Transitions
10
Transform Property
Mini Projects With Keyframes, Transitions, etc
1
Presentation Website [1] - Intro & HTML
2
Presentation Website [2] - Page CSS
3
Presentation Website [3] - Text Animation
4
Hamburger Menu Overlay [1] - HTML & Base CSS
5
Hamburger Menu Overlay [2] - Creating The Hamburger
6
Hamburger Menu Overlay [3] - Animating The Hamburger Lines
7
Hamburger Menu Overlay [4] - Menu Overlay
8
Knowledge Timeline [1] - HTML & Base CSS
9
Knowledge Timeline [2] - Boxes & Arrows
10
Knowledge Timeline [3] - Responsive Media Queries
11
Knowledge Timeline [4] - Scroll In Animation
12
Quick Dropdown Menu Project
CSS Grid
1
What Is CSS Grid?
2
Grid Basics & Columns
3
Grid Rows
4
Spanning Columns & Rows
5
Auto-Fit & Minmax
6
Grid Template Areas
7
Media Queries & The Grid
NewsGrid Website
1
Project Intro
2
Setup & Favicon
3
Core Styles, Variables & Navbar
4
Showcase With Overlay & Button Styles
5
Home Articles Grid
6
Footer With Grid
7
About Page & Page Container
8
Article Page
9
Responsive Media Queries
10
Bonus: Intro To Photoshop (NewsGrid Logo)
Website Deployment With Netlify (FREE)
1
How It Works
2
Git & Pushing To Github
3
Git Commands & Links
4
Netlify Deploy & Form Submission
5
Custom Domain Name
Learning Sass
1
What Is Sass?
2
Environment Setup With Node-Sass
3
Koala Sass Compiler - GUI Alternative
4
Variables & Partials
5
Nesting & Structuring
6
Inheritance & Contrast
7
Functions, Mixins & More
Portfolio Website With Sass
1
Project Intro
2
Project Setup
3
Header & Main Nav
4
Specialize & Stats Section
5
Process Section & Footer
6
About Page Info Section
7
About Page Logos & Testimonials
8
Work Gallery With Transitions
9
Contact Page
10
Responsive Media Queries
11
Deploy & Contact Form With Spam Filter
Where To Go From Here
1
Where To Go From Here
