Sunt încântat să împărtășesc aceste patru ore curs despre HTML și CSS cu tine (<- link către curs).

Dacă sunteți curios cu privire la dezvoltarea web, dar nu știți de unde să începeți, acesta este cursul perfect pentru dvs.!

Nu există absolut nici o condiție prealabilă pentru aceasta și nici nu trebuie să instalați un editor de cod! Scrimba te va acoperi acolo.

Instructorul cursului este genial Kevin Powell. Este un mare fan CSS, un instructor YouTube foarte popular și predă HTML și CSS în sălile de clasă. Cu alte cuvinte, ești pe mâini bune.

În timpul cursului, veți învăța elementele de bază ale HTML și CSS și veți începe să vă construiți primele pagini web. Toate lecțiile vor fi practice și vor începe să scrie codul imediat.

După ce ați terminat acest curs și sunteți gata pentru mai multe provocări, puteți verifica Kevin’s bootcamp de design web receptiv de asemenea. Este un curs masiv de 15 ore care vă învață CSS avansat și cum să creați site-uri web receptive la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.

Dar, deocamdată, să aruncăm o privire mai atentă la lecțiile din cursul introductiv.

1. Introducere

Doriti sa invatati sa creati site uri web Incercati cursul nostru

În prima lecție, Kevin oferă o mică introducere la ceea ce vă puteți aștepta pentru curs și câteva sfaturi pentru a învăța cât de mult puteți de la acesta.

2. Ce sunt HTML și CSS?

1611933248 590 Doriti sa invatati sa creati site uri web Incercati cursul nostru

În cea de-a doua distribuție, Kevin ne introduce în HTML și CSS, ce reprezintă aceste acronime și cum HTML și CSS sunt strâns legate.

3. Terminologie de bază și sintaxă

Kevin folosește o carte ca exemplu al modului în care funcționează marcarea HTML și introduce concepte precum elements și tagsși cum să le folosiți.

4. Să scriem niște HTML!

În acest screencast, Kevin introduce <!DOCTYPE html> pentru a anunța browserul că conținutul este HTML și scriem prima noastră pagină web HTML și învățăm câteva elemente fundamentale pe parcurs!

<!DOCTYPE html>
<html>
  <head>
    <title>My first website</title>
  </head>

  <body>
    <h1>My very first webpage</h1>
    <h2>Websites are built with HTML</h2>
    <p>HTML is a markup language that tells the browser what everything is</p>
    <h2>They also use CSS</h2>
    <p>I can't wait to start learning CSS!</p>
  </body>
</html>

5. strong și emphasis

Putem folosi <em> a adauga accent la textul nostru și <strong> a adauga importanţă.

6. Denumirea și organizarea fișierelor

În această parte, Kevin ne învață câteva bune practici în ceea ce privește denumirea fișierelor și ne oferă sfaturi bune despre cum să organizăm fișierele noastre.

7. Ancore și atribute

Putem folosi ancora <a> element pentru a vă conecta la o locație diferită de pe aceeași pagină sau către o altă pagină. A spune <a> unde să legăm, folosim attributes, iar pentru ancore, este href.

<a href="https://scrimba.com">Link to Scrimba</a>

8. Introducere în CSS

Kevin ne introduce în sintaxa CSS și noțiunea de proprietăți și valori în CSS. Cât de folositoare property: value sintaxa putem stiliza paginile noastre web și introduce in linie stil pentru a face ca elementele individuale să arate bine pe pagină.

9. Bazele CSS

În acest videoclip, vom afla despre dimensiunea fontului, culorile, culorile de fundal și alinierea textului. Kevin ne va prezenta patru moduri diferite de a specifica culorile în CSS, folosind cuvinte cheie, hex, rgb și hsl valori.

10. Practică timpul!

Ok, este timpul pentru o practică individuală. Kevin ne pune o sarcină de a crea o pagină despre noi înșine și ne stabilește câteva provocări HTML / CSS pe parcurs.

<!--
HTML
  - h1 (the title of the page)
  - An introductory paragraph
  - Two h2s, each followed by a few paragraphs
  - Inside the paragraphs, use strong and emphasis tags
  - If you are feeling adventurous add a second page and link to it

CSS
  - Change the color of the h1
  - Change the text alignment of the h1
  - Change the color of the h2s
  - Change the font-size of the paragraphs
  - If you added a link, change the color of it
 -->

11. Recapitulează până la acest punct

În această distribuție, trecem rapid peste tot ce am învățat despre HTML și CSS până în acest moment. Repetarea este mama învățării!

12. Liste

Acum, Kevin ne arată cum să creăm liste în HTML folosind <ol> pentru liste comandate și <ul> pentru liste neordonate.

<ol>
  <li>List item one</li>
  <li>a second list item</li>
</ol>

<ul>
  <li>bullet point</li>
  <li>another bullet</li>
</ul>
etichetele ol și ul redate pentru a arăta diferența dintre cele două
Clic Aici pentru a merge la distribuție

13. Imagini

1611933249 299 Doriti sa invatati sa creati site uri web Incercati cursul nostru

Imaginile se închid de la sine și ambele <img> sunt valabile <img />. Kevin explică și modul de utilizare src și alt atribute și cum alt ajută la îmbunătățirea accesibilității.

<img
  src="https://www.freecodecamp.org/news/want-to-learn-to-build-websites-try-our-free-4-hour-crash-course-on-html-css-2/images/dog-in-blanket.jpg"
  alt="a dog wrapped in a blanket sitting on the road"
/>

14. Practică timpul!

Bine, este timpul pentru al doilea nostru screencast de practică. Kevin ne pune o provocare de a converti unele fișiere de reducere în pagina web HTML / CSS. Nu vă faceți griji dacă nu sunteți sigur ce markdown pentru că, în această sesiune de practică, Kevin ne va ajuta să finalizăm sarcina.

15. CSS intern

În acest capitol, Kevin introduce CSS intern, o alternativă la scrierea CSS inline.

CSS intern este scris în același fișier ca HTML, dar într-un fișier separat <style> etichetă

<!DOCTYPE html>
<html>
  <head>
    <title>All about Earth and Mars</title>
    <style>
      h1 {
        font-size: 60px;
      }

      p {
        font-size: 24px;
        color: steelblue;
      }
    </style>
  </head>
  <body>
    <h1>Earth and Mars</h1>
    <p>Earth and Mars are two planets within our solar system.</p>
  </body>
</html>
Codul redat mai sus cu stiluri aplicate
Clic Aici pentru a merge la distribuție

16. CSS extern

CSS extern este o altă abordare a gestionării CSS. De această dată Kevin ne arată cum putem extrage CSS într-un fișier separat și cum să legăm foile de stil CSS la fișierele noastre HTML cu un <link> etichetă

<link href="https://www.freecodecamp.org/news/want-to-learn-to-build-websites-try-our-free-4-hour-crash-course-on-html-css-2/css/style.css" rel="stylesheet" />

17. Clase și ID-uri

În acest screencast, Kevin se concentrează pe trei tipuri de selectoare în CSS și când ați putea dori să utilizați care.

/* Element selector  */
a {
  color: darksalmon;
}

/* Class selector  */
.intro {
  font-size: 24px;
}

/* ID selector  */
#earth-title {
  color: lightgreen;
}

18. Comentarii în HTML și CSS

Putem adăuga comentarii în HTML:

<html>
  <head>
    <title>Comments!</title>
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/want-to-learn-to-build-websites-try-our-free-4-hour-crash-course-on-html-css-2/css/style.css" />
  </head>
  <body>
    <h1>Comments!</h1>
    <!-- My comment goes here -->
  </body>
</html>

Și în CSS:

/* TODO: change the color of the text to white */

body {
  background: #333;
  color: white;
}

/* Some more comments */

h1 {
  color: red;
}

19. Singurele etichete pe care trebuie să le cunoașteți (deocamdată)

În această parte a cursului, Kevin ne reamintește că nu trebuie să știm totul în acest moment și, în acest stadiu, trebuie să cunoaștem doar următoarele etichete:

h1 -> h6
p
strong and em
a
ul, ol, li
img

Și ar fi bine dacă putem face diferența dintre următoarele etichete:

header
main
section
footer
nav
div

20. Introducere în modelul cutiei

Acum este timpul să descoperim modelul cutiei.
Majoritatea elementelor sunt elemente de bloc, ceea ce înseamnă că au o lățime de 100% față de părintele lor și au o înălțime de 0.

Aceasta este o distribuție strălucitoare, în care Kevin explică nu doar simplu și succint modul în care funcționează modelul cutiei, ci și ne salvează de capcanele obișnuite în care cad din când în când chiar dezvoltatorii cu experiență.

21. Marjă și căptușeală

Următoarele sunt marginile și căptușelile.
Marginile sunt folosite pentru a controla poziția unui element relativ la cei din jur, în timp ce umplutura este utilizată pentru a controla poziționarea conținutului interior elementul nostru.
Kevin face o treabă extraordinară explicând multe moduri diferite de umplere și margini care pot fi setate în CSS.

/*  */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

/* Shorthand version would be */
padding: 20px 30px 40px 50px;

margin-top: 500px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 10px;

/* Shorthand version would be */
margin: 500px 100px 10px;

22. Frontiere

Ultima piesă din modelul cutiei – margini. Bordurile sunt adăugate în jurul elementelor dvs. Și pot fi setate într-un mod similar cu marginile și căptușeala.

border-color: yellow;
border-width: 20px;
border-style: solid;

/* Shorthand version would be */
border: solid yellow 20px;

23. Înfășurarea modelului cutiei

În acest capitol, Kevin ne ajută să trecem în revistă modelul cutiei CSS și ne oferă o vizualizare frumoasă pentru referințe viitoare.

Vizualizarea modelului casetei CSS
Clic Aici a merge la distribuție

24. Un aspect de bază

Acum suntem gata să creăm un aspect foarte simplu.

Exemplu de aspect de pagină
Clic Aici pentru a merge la distribuție

Kevin ne va ghida prin crearea unei pagini despre dinozauri, unde vom putea pune în practică tot ceea ce am învățat până acum.

25. Un aspect de bază – centrarea unui element pe pagină

În acest capitol, Kevin ne arată cum să centrăm elementul principal. Nu este prea dificil, dar există câteva piese dificile.

Exemplu de aspect de pagină cu elementul principal centrat
Clic Aici pentru a merge la distribuție

26. Crearea coloanelor cu flexbox

Până acum ne descurcă destul de bine.

În cadrul ultimei distribuții, Kevin introduce un proiect mini-capstone pentru a crea acest aspect HTML de la zero.

Aspectul proiectului Capstone, sarcina
Clic Aici pentru a merge la distribuție

Adesea, multe modele folosesc coloane în subsol. În această distribuție, Kevin ne arată cum să folosim display: flex pentru a crea acest aspect îngrijit.

Footer în zoom, implementat folosind coloane flexbox
Clic Aici pentru a merge la distribuție

27. Crearea aspectului de la zero – HTML

În acest screencast, Kevin împarte designul în bucăți gestionabile și ne conduce prin implementarea HTML.

Aspectul Capstone cu casete evidențiate în jurul secțiunilor aspectului
Clic Aici pentru a merge la distribuție

În acest screencast, creăm marcajul HTML.

Aspectul este scris doar în HTML
Clic Aici pentru a merge la distribuție

28. Crearea aspectului – CSS

Și în partea finală a acestui curs, scriem CSS pentru a crea aspectul final.

Aspectul proiectului Capstone, terminat
Clic Aici pentru a merge la distribuție

29. Ce urmează?

Esti tare! poster

Dacă ajungeți până la această distribuție, atunci dați-vă o lovitură pe spate. Felicitări pentru că ai terminat cursul! Am acoperit MULȚI și aveți toate motivele pentru a fi mândri de voi înșivă.

Unde poți merge de aici? Prima recomandare a lui Kevin este instalarea unui editor de text. Oricare dintre acestea în această etapă ar fi bun și puteți schimba oricând mai târziu. Codul VS este foarte popular și dintr-un motiv bun.

De asemenea, ar trebui să fii cu ochii pe viitorul curs avansat al lui Kevin cu privire la modul de a construi site-uri web receptive, așa că fii sigur inscrie-te la newsletter-ul lui Kevin.

Codificare fericita 🙂


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.