Salut tout le monde, bienvenue.
Il est temps pour nous de commencer à coder.
L' une des choses que j'ai remarqué au cours des deux dernières années d'enseignement
est que les élèves diffèrent vraiment dans la façon dont ils entrent et
gèrent différents types de classes de codage.
Certains vont s'asseoir à l'ordinateur, ne jamais lire le livre et juste pirater,
et pirater, et pirater.
Certains d'entre vous sont peut-être un peu coupables de faire toutes les lectures, d'écouter toutes les
conférences, mais jamais d'essayer les choses dont nous avons parlé.
C' est à ça que servent ces devoirs.
Une chance pour vous de passer enfin à travers et de mettre une partie de ce code et de
voir ce qui se passe lorsque vous essayez d'appliquer le style à votre HTML.
Donc, l'objectif de cette affectation de devoirs est que vous me montrez que vous
pouvez écrire un fichier CSS qui peut aller et styliser trois fichiers HTML différents.
Je vais aller de l'avant et après et vous montrer quelques exemples de
notre mission.
J' ai mis les liens ici sur le côté, mais
ça va vraiment être beaucoup plus clair quand je vous montrerai les devoirs en action.
Alors jetons un coup d'oeil.
Quand nous commencerons,
je vais vous donner trois fichiers HTML qui ne sont vraiment pas bien stylés.
Ils commencent,
ils ont une navigation, ils ont trois très grandes images, certaines sont plus petites.
Et puis ils ont le contenu.
Les trois pages que vous allez regarder, la maison, les équipes et l'histoire ont un contenu différent.
Ce que je veux que vous fassiez, c'est écrire vos propres règles CSS qui prendront
ce type de pages, et le transformeront en quelque chose qui ressemble à ceci.
Je sais que ce n'est pas un énorme saut, mais
c'est exactement comme ça que je veux que vous commenciez à coder.
Je veux que vous fassiez de petits changements incrémentiels qui peuvent vous amener de quelque chose
qui est difficile à lire à quelque chose qui est beaucoup plus facile à lire.
Alors allons de l'avant et passons en revue les différentes choses que vous devrez
changer pour obtenir ce look distinct. La
chose la plus importante à comprendre est que vous devez laisser le HTML seul.
Je ne veux pas que vous le modifiiez du tout, au
lieu de cela, je veux seulement que vous stylisez les choses et éditez les choses dans la feuille de style.
Et les choses que vous allez devoir ajouter sont des styles pour
l'en-tête, les en-têtes, la section, les liens et les images.
Alors, laissez-moi passer et vous montrer exactement ce que vous devez regarder.
Pour votre en-tête, c'est assez simple.
Je veux que tu y ailles et que tu ajoutes une couleur de fond.
Pour vos en-têtes, à la fois h1 et h2, je veux que vous modifiez la couleur de la police.
Maintenant, rappelez-vous, c'est différent de la couleur de fond.
C' est la couleur dans laquelle le texte apparaît.
Ensuite, je veux que vous vous assuriez que tous les titres sont affichés en majuscules.
Donc, si tu y retournes, on va jeter un coup d'oeil.
Vous pouvez voir que regarder votre tête et ultime frisbee sont en majuscules,
tandis que dans la version HTML originale, ils sont en minuscules.
Donc, je veux que vous utilisiez CSS pour faire ce changement.
La prochaine chose que je veux que tu fasses, c'est juste pour
le titre h1, je veux que tu caches le texte.
Ensuite, apportez une modification rapide à la partie section de votre HTML.
Je veux que vous stylisez la section différente afin
qu'elle ait une couleur d'arrière-plan différente des autres éléments de votre page.
Ensuite, jetons un coup d'oeil aux liens.
Les changements que vous allez faire ici sont très subtils.
Ils ne sont pas très évidents si je ne vous ai pas dit ce que
vous cherchez.
Et ce que je veux que vous fassiez, c'est que vous changiez la couleur de fond, et
la couleur de la police, pour vos liens.
Une fois que vous avez fait cela, allez dans et
centrer le texte, comme vous allez au centre des textes pour les en-têtes h1.
Enfin, la dernière chose qui gâche vraiment notre exemple initial de page HTML est
ces images énormes qui viennent juste de gêner le chemin.
Donc pour l'instant, puisque nous n'avons pas parlé de la meilleure façon de styliser les images,
je veux que vous les supprimiez de la page.
Mais rappelez-vous, cela pourrait être la partie la plus difficile de toute l'affectation parce que je
ne veux pas que vous changiez le html.
Je veux que ces photos soient là.
Je veux juste que vous utilisiez CSS3 pour les supprimer de la page.
J' espère donc entre regarder cet exemple et regarder en ligne, et regarder
mes photos avant et après, que vous serez en mesure de faire cette tâche de devoirs.
Quand tu auras fini, on utilisera le classement par les pairs.
Quand on fera ça, les notes seront basées sur la façon dont tu as pu
finir ce qu'on faisait.
Quand je parle de l'esthétique,
je parle de avez-vous choisi les couleurs de fond assez et les couleurs de police.
On ne se soucie pas vraiment de ça.
C' est notre première mission de devoirs.
Je veux vraiment que tu ne sentes que du succès.
Cependant, des normes appropriées s'appliquent.
Et ce que je veux dire par là, c'est de ne pas utiliser de noms de couleurs, d'utiliser hexadécimal ou
RVB, et de ne pas mettre toutes vos règles sur une seule ligne.
Assurez-vous que votre feuille de style CSS est facile à lire.
Autre que les styles que j'ai énumérés s'il vous plaît ne changez pas d'autres choses pour le moment.
Il est beaucoup plus difficile de classer.
Mais ne vous inquiétez pas. Au
fur et à mesure que nous suivons ce cours, vous aurez la chance de mettre vos propres
looks uniques en tant que éléments de style.
Pour l'instant, tout ce que je peux dire, c'est bonne chance et
assurez-vous d'aller sur ces forums de discussion si vous avez des questions.