Partage

Exercices pratiques pour HTML5 et CSS3

9 mars 2013 à 0:06:31

Bonjour à tous!

Je viens de finir le chapitre HTML5 et les bases de CSS3. J'aimerais maintenant me pratiquer afin de bien ancré le tout. Je sais que je peux essayer de recréé un site qui existe déjà, mais je préférerais avoir des exercices si possible. Où pourrais-je en trouver? Merci d'avance!

AventixSC

27 juin 2013 à 19:00:49

Voilà un lien qui pourrait t'aider, mais depuis le temps... tu as dû trouver...

Sinon, ça pourra servir à d'autres.

http://toulibre.org/pub/2012-02-29-rencontre/presentation/exercices/index.php@nocrypt&solution.html

pegouNekuie

1 juin 2015 à 21:09:37

<samp class="li1"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></samp><samp class="li1"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"></samp><samp class="li1"><head></samp><samp class="li1"><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /></samp><samp class="li2"><title>Page en xHTML 1.1 Strict et encodage caractères en UTF-8</title></samp><samp class="li1"></head></samp><samp class="li1"><body></samp><samp class="li1"> </samp><samp class="li1"><h1>Page en xHTML 1.1 Strict et encodage caractères en UTF-8</h1></samp><samp class="li2"> </samp><samp class="li1"><p>ceci est le corps de mon document<br /></samp><samp class="li1">c'est du xHTML1.1 strict avec encodage de caractères précisé en unicode UTF-8</p></samp><samp class="li1"> </samp><samp class="li1"><p>C'est la bonne pratique du WEB moderne,<br /></samp><samp class="li2">En contre partie je devrais</p></samp><samp class="li1"><ul></samp><samp class="li1"><li>Écrire les balises en lettres minuscules,</li></samp><samp class="li1"><li>respecter la casse sur les attributs des balises,</li></samp><samp class="li1"><li>fermer toutes les balises y compris celles qui n'ont pas de contenu,</li></samp><samp class="li2"></ul></samp><samp class="li1"> </samp><samp class="li1"><p>Ces contraintes ne sont pas énormes et <strong>respecter la norme est un point important</strong>.<br /></samp><samp class="li1">Désormais je ferai en sorte de respecter cette norme. La liste des balises et attributs ainsi que le contexte d'utilisation</samp><samp class="li1">est disponible sur <a href="http://giminik.developpez.com/xhtml/html.html">ce site</a>. je m'y rendrai à chaque fois que j'aurai un doute.</samp><samp class="li2">De plus pour m'assurer de la qualité des pages générées, je les validerai systématiquement sur le</samp><samp class="li1"><a href="http://validator.w3.org/check">site du W3C</a>.</p></samp><samp class="li1"> </samp><samp class="li1"><p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p></samp><samp class="li1"></body></samp><samp class="li2"></html></samp>

Anonyme

8 juillet 2015 à 23:20:52

Est-ce que vous croyez que openclassrooms serait content si je leur propose 2-3 exercices HTML5 / CSS3 avec une solution pas à pas en réexpliquant tout pour bien garder en tête toute les balises et propriétés possibles dans ces langages ? Si oui alors c'est avec plaisir que je le ferais

Mais j'aimerais avoir votre avis avant de me lancer sur une idée dont je ne sais pas quel impact elle aura x/

chloecorfmat

10 juillet 2015 à 22:58:52

Salut !

Déjà, dommage de ne pas avoir créé un nouveau sujet pour ça, mais bon... C'est pas grave !

Sinon, je pense que ça serait vraiment une bonne idée... Je trouve que c'est souvent ce qu'il manque sur Openclassroom... Les cours sont vraiment très bien fait, les exemples sont clairs et les exercices proposés récapitulent bien le cours... Par contre, je trouve qu'il manque vraiment des exercices...

J'y pensais justement il y a quelques jours... Je me disais, qu'il pourrait être intéressant de proposer différents exercices (pourquoi pas une banque d'exercice) avec la correction... Qui permettrait à tout le monde de s'exercer...

Bref, je suis pour !

Chloé Corfmat | Etudiante à l'ENSSAT en Informatique, Multimédia et Réseaux à Lannion en alternance | www.chloecorfmat.fr

Lucky13

11 juillet 2015 à 0:10:36

Sauf qu'OC ne fait presque rien de lui même, la plus part du temps se sont des rédacteurs volontaires.

Cela peut être l'opportunité de créer et proposer un tel projet perso si la demande est réelle.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

chloecorfmat

11 juillet 2015 à 0:11:47

Exacte... J'avoue que je serais assez partante !

Chloé Corfmat | Etudiante à l'ENSSAT en Informatique, Multimédia et Réseaux à Lannion en alternance | www.chloecorfmat.fr

Anonyme

11 juillet 2015 à 6:45:07

J'ai préféré poster ici pour recycler le sujet

Vu vos avis ma décision est toute faite : Je vais m'y pencher dessus et essayer de proposer un exercice pour fin juillet . Cependant ne vous fiez pas à cette date car je vais sûrement mettre plus de temps pour bien le mettre au point x) .

Allez hop, c'est parti donc ! S'il y a des remarques ou idée là-dessus n'hésitez pas à l'écrire ci-dessous .

Anonyme

15 juillet 2015 à 17:59:41

J'ai donc commencé à rédiger ce fameux cours : Cliquez donc ici pour voir mon avancée.

Si vous avez des remarques, des questions ou des idées à me donner n'hésitez pas à écrire dans ce sujet (que je surveille fréquemment) ou à poster des messages en bas des cours en rédaction : Je suis preneur de tout conseil

-
Edité par LaureneG 16 juillet 2015 à 12:10:30

Anonyme

16 juillet 2015 à 9:48:38

Je suis en train de réfléchir : Est-ce qu'il y a vraiment besoin de 2-3 rappels de cours avant les exercices ou quelques exercices guidés font l'affaire ? Parce que je suis en train de rédiger le cours mais sans savoir si ça va être vraiment utile puisqu'on le traite dans le tuto de Mathieu Nebra sur HTML5 / CSS3 :S

Enfin voilà qu'en pensez-vous ? Bonne ou mauvaise idée la partie rappel de cours ?

chloecorfmat

16 juillet 2015 à 11:23:49

Déjà, personnellement, je n'arrive pas à accéder à ton début de tutoriel ! :)

Sinon, je pense que le plus simple est de rappeler en haut de chaque page d'exercice ou de catégorie, quel(s) tutoriel(s) il faut avoir suivi/compris avant de pouvoir réussir les exercices de la page...

Je ne sais pas si je suis très claire !

Chloé Corfmat | Etudiante à l'ENSSAT en Informatique, Multimédia et Réseaux à Lannion en alternance | www.chloecorfmat.fr

Lucky13

16 juillet 2015 à 11:26:31

chloecorfmat a écrit:

Déjà, personnellement, je n'arrive pas à accéder à ton début de tutoriel !

Idem. Il faut remettre ta rédaction accessible quelques heures.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

16 juillet 2015 à 11:30:37

"Accéder au début de mon tutoriel" effectivement je n'ai pas compris xS

Cependant oui effectivement : Guider l'exercice avec les liens vers le tutoriel et faire une liste à faire sur l'exercice peut-être une bonne idée.

Et je viens de remarquer qu'en faite mes chapitres et parties sont mal nommés, et que je part à l'extérieur de l'objectif de départ x/ Je vais les refaire, comme ça ce qui viendra dedans sera moins vers le hors-sujet

EDIT : Remettre accessible ma rédaction quelques heures ? Je ne vous suis pas x/

EDIT : Suite à quelques réflexions je vois que je suis en train de partir dans de gros rappel de cours alors que cela est déjà très bien expliqué dans le tuto HTML5 / CSS3. J'ai donc décidé de modifier un peu mes parties et chapitres pour éviter de dériver en cours et me fixer sur mon objectif principal :

PARTIE 1 : Faire un site basique en HTML5 / CSS3

   1. EXERCICE : Créer un site basique en HTML5 / CSS3

   2. Aide exercice sur le header

   3. Aide exercice sur la section

        etc

PARTIE 2 : Faire un site avancé en HTML5 / CSS3

   1. EXERCICE : Créer un site avancé en HTML5 / CSS3

   2. Aide exercice léger sur le header

   3. Aide exercice léger sur la section

        etc

PARTIE 3 : Faire un site complexe en HTML5 / CSS3

   1. EXERCICE : Créer un site complexe en HTML5 / CSS3

      (Pas d'autres chapitres, on laisse la personne faire le site seule)

Qu'est-ce que vous en pensez ?

-
Edité par Anonyme 16 juillet 2015 à 11:44:56

LaureneG

16 juillet 2015 à 12:11:55

Bonjour,

@Brynanum : j'ai édité ton post pour qu'il redirige vers la bonne adresse. (L'adresse publique finit par waiting-for-publication.)

Keep calm and read Cyrano | Nos conseils pour écrire un cours

Lucky13

16 juillet 2015 à 12:16:28

Voilà, merci LaureneG

Ensuite pour les chapitres, j'aurais remplacé être organisé par soyez organisé, etc...

-
Edité par Lucky13 16 juillet 2015 à 12:19:16

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

16 juillet 2015 à 12:30:06

@LaureneG : Merci pour le lien

@Lucky13 : J'avais peur justement que le "soyez" fasse un ordre :S mais je vais changer un peu le sommaire car ça ne convient pas avec l'objectif de faire des exercices pour s'améliorer. (Voir un peu plus haut)

Lucky13

16 juillet 2015 à 13:19:08

Oui je te comprend, mais ça peut aussi être perçu comme un conseil. Quoiqu'il en soit c'est rectifiable, concentre toi plus sur ton organisation et son contenu.

Je pense que tu as encore du boulot

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

16 juillet 2015 à 13:58:14

Oui, encore un bon paquet ! Mais j'ai le temps que je veux et je suis motivé de faire ces exercices, donc ça va le faire je pense

Et je le prend comme conseil pour la suite : Par la suite je mettrais le verbe à l'impératif au lieu de l'infinitif dans ces cas là

Anonyme

16 juillet 2015 à 14:54:44

J'ai un petit bug sur le cours : Pourquoi j'ai 3 parties "Comment suivre/faire ce cours ?" Alors que je les avais mis en h1 dans l'introduction ? :S Et comment le supprimer ? L'éditeur ne me l'affiche pas...

-
Edité par Anonyme 16 juillet 2015 à 14:55:23

Anonyme

16 juillet 2015 à 15:13:28

Merci à celui qui a réparé ce petit bug

LaureneG

16 juillet 2015 à 15:14:48

Brynanum a écrit:

J'ai un petit bug sur le cours : Pourquoi j'ai 3 parties "Comment suivre/faire ce cours ?" Alors que je les avais mis en h1 dans l'introduction ? :S Et comment le supprimer ? L'éditeur ne me l'affiche pas...

Oui, ça vient justement de ça : il ne faut pas mettre de titres dans l'introduction, sinon ça fait planter la moulinette qui convertit le cours de format Une seule page à format Plusieurs parties.

Pour les supprimer (et pour supprimer d'autres chapitres ou parties), il faut repasser le cours en taille Une seule page, supprimer les parties, et repasser au format Plusieurs parties. Ça devrait être corrigé.

Keep calm and read Cyrano | Nos conseils pour écrire un cours

Anonyme

16 juillet 2015 à 15:20:40

Ok dac, j'ai trouvé une alternative pour le titre. Je retiens tout de même la méthode du débug x)

-
Edité par Anonyme 16 juillet 2015 à 15:20:53

Anonyme

16 juillet 2015 à 18:25:29

L'énoncé de mon 1er exercice est rédigé ! Je recherche donc 2-3 personnes pour le tester : Toutes les étapes à suivre pour le faire se trouve sur mon cours dans le chapitre EXERCICE de la partie 1 (le lien vers mon cours se trouve plus haut).

Bien entendu je reste preneur de tout avis sur l'introduction, le sommaire et l'énoncé en lui-même en postant votre commentaire ici ou par MP.

Merci d'avance pour vos réponses

Anonyme

17 juillet 2015 à 17:43:31

Je déplace mon sujet de cours autre part, je met donc une redirection ici :

https://openclassrooms.com/forum/sujet/perfectionnez-vous-en-html-et-css

Toute la situation y est résumé.

Bryan.

nasseranaoui1

28 janvier 2017 à 0:00:13

salut tout le monde est ce que vous pouvez me suggérer des exercices en css ?

Anonyme

1 février 2017 à 23:09:14

Salut,

Pour ma part, je ne te cache pas que j'ai laissé mon cours sur HTML/CSS de côté, suite à de nombreuses occupations dans la vie...

Cependant, je peux te donner une petite liste de courses à faire :

- Faire un carrousel pur CSS

- Réaliser des dégradés pour faire un background animé pur CSS

- Reproduire un codepen n'ayant que du CSS (votre le site page le même nom)

Enjoy.