Tutoriel Debutant - Créer son premier site avec HTML / CSS

Aujourd'hui, on se retrouve pour un challenge html/css, vous allez avoir 24H00 pour réaliser un site web à partir d'une maquette.

00:00 - Introduction
2:20 - Création du projet
10:41 - Landing Page
24:16 - Menu de navigation
36:52 - Section services
45:31 - Section meilleures ventes
1:04:06 - Section nos plantes
1:15:01 - Pied de page
1:20:33 - Ancre de page
1:22:30 - Outro

🖥️Héberge ton projet / site web avec Hostinger (- 10% avec la code GRAVEN)

📌Télécharger le code source du projet (version responsive) :

📌Liens utiles :

🖼️ Credit :
Merci à Baptiste (alias Baptoufou) pour le design de la maquette

Merci à Pixabay pour les images libre de droits

🎥 Logiciels :

Montage: Davinci Resolve
Tournage : OBS Studio
Logiciel : Visual Studio Code

🎵 Musiques :

- Jazzeton - Quincas Moreira
- Carried - Lauren Duski
- Pitch - Lish Grooves
- Night on the Town - TrackTribe
- Almonds and Olives - Aaron Lieberman
- When Johnny Goes Marching - E's Jammy Jams
- Easy Stroll - TrackTribe
- Swing Theory - Freedom Trail Studio
- Sad Sunday - E's Jammy Jams
- Three Wise People - E's Jammy Jams
- Four More Weeks - Vans in Japan

outro : Subway Dreams par Dan Henig

end()

[Gravenilvectuto]

Yo les devs, je vous propose aujourd'hui la correction du challenge css proposé hier sur la chaine.

Désolé pour le retard étant du à un problème de rendu

De même il n'y a pas de bouton "En savoirs plus" car j'ai préparé le tp sur une ancienne release de la maquette.

Bon visionnage à vous

[dubbacteria]

J'ai pas encore tout fini mais ce tutorial est juste incroyable ! Clairement le meilleur que j'ai vu, il mérite tellement plus de vu !

[bakeEmpireStaking]

J’adore tu devrais le faire plus souvent des projets.

[folder]

Graven nous a donné 24h pour faire ce travail et lui il le termine en une heure et demi !
j te donne mon chapeau !

[mohamedwalidbekhechi]

Merci beaucoup graven pour tes tutoriels sur youtube ainsi que les corrections des TP jai vraiment bien appris le python grâce à toi.
Je te souhaite tout le bonheur du monde

[sou]

4:41 sur VSCode on peux générer la structure de la page web automatiquement juste en faisant "!" entrer

[kayakmou]

Salut ! C'est EXACTEMENT la vidéo que je cherchais. Je n'ai pas eu le temps de finir la maquette car je suis débutante j'ai galéré mdr, mais voilà c'est juste pile ce que je veux: pouvoir s'entrainer a reproduire des maquettes tout en ayant une correction !! Merci beaucoup tu expliques vraiment super bien ! :) Bonne journée !

[nayanisik]

Ce cours devrais être payé car y’en na avec de moin bonne explication et Payen
Tu mérite plus de vie que d’autre personne

[warrenayang]

T'es le meilleur Graven ! Force à toi !

[hardel]

Franchement pas mal la vidéo.
En tant que dév web, je peux dire que les explications sont assez claire pour des débutants.

Le seul défaut que je puisse trouver, c'est le manque de vitesse.
Je trouve ça un poil lent, après c'est que mon avis.

Petite idée pour la suite, faire un système de panier en JS dans la continuité de ce projet.
Avec une page résumé des articles sélectionner.

[didou]

Actuellement en train d'apprendre le code HTML et CSS j'ai reproduit ton tuto en suivant t'as vidéo. J'ai appris des balises que je ne connaissais pas encore mais aussi la mise en forme que je maitrise peu. J'apprends le code avec CodeAcadémy mais suivre des tutos comme le tien et un + pour moi. Merci ;).

[kose]

Le rythme de la video et juste excellent j'ai commencé le html et CSS depuis 3 jours (open classrooms) et honnêtement j'ai saisie chaque notion et reproduit l'exercice, je vais m'exercer sur ses bases vue aujourd'hui pour les reproduire avec d'autres images, fonts et positionnement c'est juste génial. Je te le redis le rythme choisis et parfait pour un débutant. Un grand merci à toi je m'abonne pour le merveilleux moment passer à m'instruire avec toi.

[adkofficiel]

La vidéo est sortie y’a maintenant 3 ans mais merci TUTO juste INCROYABLE du début à la fin je like et m’abonne direct ❤

[nekosama]

Merci beaucoup pour votre générosité débordante, par le biais de cette vidéo vous avez prouvez vaillance ainsi que votre grand cœur, qui apporte à chacune de mes questions une réponse direct et satisfaisante. Ayez toute ma gratitude et faites en bonne usage. Au revoir
Audrey Maxine Revol

[andrediasdasilva]

Merci Graven j'apprends plus et plus vite avec tes vidéos qu'avec mes cours. Je suis en reconversion pro et je vais passer plus de temps sur ta chaine qu'avec ma famille pour le moment !

[aldebertmoudugenou]

Clairement le meilleur tuto que j'ai jamais vu. Clair, pédagogique, Bravo et merci !

[mohamedwalidbekhechi]

Ainsi que pour la partie création web vu que en ce moment je me forme en plus de mon diplôme d'ingénieur en génie civil spécialisé en structure
Je te remercie et je tiens a dire de très bonne explication

[EnigmatikZone]

je n'arrive pas a mettre les icônes

[nicosnicos]

Ce serait cool que tu fasse une deuxième chaine consacrer aux exercices avec correction
. J'ai adoré ta vidéo tu es très pédagogue.
Je viens de finir le cour HTLM/CSS sur open class room. Et en regardant ta vidéo ca ma aider vachement a comprendre. J'en veux d'autre ^^

[saerdiagne]

Franchement merci 🙏 grâce à vous je suis en pleine reconversion professionnelle vous m’avez fait aimer l’informatique