$30 off During Our Annual Pro Sale. View Details »

Workshop HTML/CSS pour débutants

Workshop HTML/CSS pour débutants

#FreelanceFair #Rennes #LeVivierRennais - Vous êtes graphiste, webdesigner, chef de projet, marketeux ou exercez une profession qui touche au web de près ou de loin ? Vous souhaitez en apprendre plus sur les bases du développement de site web et faire évoluer vos compétences ? Cet atelier sera l’occasion de mettre les main dans le HTML/CSS afin de réaliser une page web simple et découvrir le fonctionnement de l’intégration web.

Kévin Bizien

March 21, 2018
Tweet

More Decks by Kévin Bizien

Other Decks in Technology

Transcript

  1. Ma première page web Workshop Introduction HTML/CSS kbizien. Freelance Fair

  2. Freelancefair @kbizien #freelancefair Kevin Bizien Creative developer cssflip. kbizien.

  3. Freelancefair @kbizien #freelancefair Fédérons les compétences et transformons le territoire

    rennais ensemble ! Derrière Le Vivier Rennais se regroupent des professionnel.le.s du bassin de Rennes qui souhaitent valoriser des compétences et des expertises auprès des entreprises, des associations, des étudiants... Par le biais de rencontres et d'événements, Le Vivier Rennais souhaite développer des échanges au sein des différents réseaux existants et favoriser les occasions de travailler ensemble. https://rennes.levivier.net/
  4. Freelancefair @kbizien #freelancefair

  5. Freelancefair @kbizien #freelancefair Le navigateur envoie l’URL (requête HTTP vers

    l’adresse IP du serveur) Le serveur renvoie la page HTML CLIENT SERVEUR
  6. Freelancefair @kbizien #freelancefair Place au code !

  7. Freelancefair @kbizien #freelancefair Sublime Text https://www.sublimetext.com

  8. Freelancefair @kbizien #freelancefair Projet Github https://github.com/KBizien/beginners-html-css

  9. Freelancefair @kbizien #freelancefair Ouvrir index.html dans votre navigateur favoris

  10. Freelancefair @kbizien #freelancefair

  11. Freelancefair @kbizien #freelancefair Ajouter du texte dans le body

  12. Freelancefair @kbizien #freelancefair Balises HTML

  13. Freelancefair @kbizien #freelancefair Balises HTML format de texte

  14. Freelancefair @kbizien #freelancefair Attributs HTML

  15. Freelancefair @kbizien #freelancefair Construction d’une page HTML simple

  16. Freelancefair @kbizien #freelancefair Cool, mais c’est pas très esthétique tout

    ça !
  17. Freelancefair @kbizien #freelancefair CSS

  18. Freelancefair @kbizien #freelancefair CSS

  19. Freelancefair @kbizien #freelancefair CSS

  20. Freelancefair @kbizien #freelancefair CSS

  21. Freelancefair @kbizien #freelancefair CSS • selector correspond au nom de

    l'élément HTML ou sélecteur CSS. Les sélecteurs servent à cibler les éléments auxquels nous souhaitons attribuer des styles • property correspond à l'effet de style que l'on souhaite appliquer. CSS dispose d'un ensemble de propriétés permettant la mise en forme d'éléments • value correspond à la valeur de la propriété que l'on souhaite appliquer
  22. Freelancefair @kbizien #freelancefair

  23. Freelancefair @kbizien #freelancefair Cibler des éléments précisément

  24. Freelancefair @kbizien #freelancefair

  25. Freelancefair @kbizien #freelancefair • id ==> un seul élément d’une

    page HTML • class ==> autant d'éléments que l'on souhaite id vs class
  26. Freelancefair @kbizien #freelancefair Styler notre page HTML simple

  27. Freelancefair @kbizien #freelancefair Au boulot ! Retrouvez dans le projet

    la maquette d’une page web (wireframe et design UI), ainsi qu’un lien vers les specifications de ce design. Voyons ensemble ce qu’il en est…
  28. Freelancefair @kbizien #freelancefair Kevin Bizien @kbizien bonjour@kevinbizien.com www.kevinbizien.com Creative developer

    Merci.