O tendință de creștere în dezvoltarea front-end este ideea că puteți să vă scufundați direct în Javascript și să reușiți. Sincer, în bine sau în rău probabil că poți. Dar construiți doar pe o fundație fragilă care se va întoarce să vă muște.

De ce am nevoie de HTML sau CSS?

Cadrele UI pe care le cunoaștem astăzi le place Reacţiona și Vue construiți deasupra elementelor de bază ale unei pagini web: HTML și CSS. Deși aceste cadre UI supraîncarcă aceste elemente de bază prin intermediul unor instrumente interesante și Javascript, ceea ce construiești este în esență același lucru cu Site-ul Space Jam din 1996.

Dar am înțeles, scrierea HTML și CSS manual este datată nu?

Înțelegeți ce fac instrumentele dvs.

A avea cel puțin o înțelegere de bază a ceea ce se întâmplă sub capotă vă va ajuta foarte mult pe măsură ce vă dezvoltați și depanați aplicațiile.

Este posibil să fi întâlnit câteva lucruri ciudate în browser, cum ar fi de ce HTML transformă codul acolo? Folosind următoarele ca exemplu:

<style>
p {
  color: purple;
}
</style>
<h1>My Cool Page</h1>
<p>
  Some cool stuff
  <div>Is this still cool?</div>
</p>

Când încărcați acest lucru în Chrome, veți observa câteva modificări …

Puneti Javascript invatati mai intai HTML si CSS
Exemplu de browser HTML fix

De ce nu este tot paragraful meu rece și violet?

Ei bine, se pare că browserul dvs. este util și vă remediază automat codul. O etichetă de paragraf (<p>) nu poate conține un alt element la nivel de bloc, deci Chrome și alte browsere vă vor ajusta codul HTML din mers pentru a-l face valid. HTML este foarte îngăduitor în acest fel! Dar aceasta este o eroare obișnuită care împiedică dezvoltatorii vechi și noi, care nu sunt familiarizați cu modul în care funcționează HTML.

Aflați magia CSS

CSS poate face foarte mult în zilele noastre. Este mult mai mult decât setarea câtorva culori, dar vă oferă posibilitatea de a furniza modele UI consistente în întreaga aplicație.

Nu vă fie frică de ea! Dacă ați început în Javascript, s-ar putea să fiți tentați să faceți totul acolo, dar veți găsi rapid că gestionarea întregii puteri reale a CSS în JS este o durere și, sincer, inutil dacă nu sunteți Facebook.

Ce poti face? Construi scena cu titlul filmului Alien cu CSS pur. Luați câteva efectuați cursorul pentru butoane. Sau doar animă orice!

Unul dintre preferatele mele este crearea unei clase de animație de încărcare de tip Facebook, care va aplica un fundal de gradient animat oricărui lucru pe care îl adăugați:

.loading {
  background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
Puneti Javascript invatati mai intai HTML si CSS
Exemplu de încărcare a animației

A crapa un codepen și încearcă-l singur!

Faceți rezultatele căutării relevante

Motoarele de căutare fac tot posibilul să descopere modul în care conținutul pe care îl scrieți este relevant pentru utilizatorii care îl caută. Dar modul în care scrieți HTML face diferența, ajutându-i să determine acea valoare. O greșeală obișnuită pe care o văd este folosirea Titlu elemente incorecte sau pur și simplu nu le folosesc deloc.

<h1>All</h1>
<h1>My</h1>
<h1>Content</h1>
<h1>Is</h1>
<h1>Important</h1>

Luați în considerare schița acestei postări de blog:

- Put Down the Javascript - Learn HTML & CSS
  - Why do I need HTML or CSS?
  - Understand what Your tools are doing
  - Learn the magic of CSS
...

„Învățați magia CSS” nu este cheia de luat de pe pagină, așa că nu aș vrea să o prezint drept cea mai importantă. Totuși, titlul postării, „Pune jos Javascriptul – Învață HTML și CSS”, reflectă povestea generală, devenind cea mai importantă, așa că aș dori să o fac # 1

Deci, cu HTML-ul meu, aș vrea să-l fac să arate ceva mai asemănător:

<h1>Put Down the Javascript - Learn HTML & CSS</h1>
<h2>Why do I need HTML or CSS?</h2>
<h2>Understand what Your tools are doing</h2>
<h2>Put Down the JS - Learn HTML & CSS/h2>

Astfel, Google, Bing și toate celelalte motoare de căutare știu exact care ar trebui să fie cea mai importantă parte a paginii și să ajute la identificarea ierarhiei generale.

Conduceți accesibilitatea prin dezvoltarea incluzivă

Dacă nu codificăm în mod responsabil, excludem automat persoanele de la accesarea site-ului pe care lucrăm atât de mult să îl construim. Adesea, acestor oameni le pasă de ceea ce se construiește la fel de mult, dacă nu chiar mai mult decât noi.

Făcând o mică temă pentru prima dată și cheltuind încă o secundă gândindu-ne la ceea ce scriem, putem fi inclusivi pentru toți prietenii care vizitează site-urile noastre.

Luați o listă simplă de navigare frecvent văzută astăzi în majoritatea site-urilor web. S-ar putea să fiți tentați să scrieți câteva div pentru că funcționează nu?

<div className="nav">
  <div><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 1</a></div>
  <div><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 2</a></div>
  <div><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 3</a></div>
</div>

Problema este că nu sunt la fel de ușor de preluat de cititoarele de ecran. Pentru a remedia acest lucru, puteți / tehnic / puteți scrie chiar mai puțin HTML ( div are 3 caractere, ul și li sunt 2?).

<ul className="nav">
  <li><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 1</a></li>
  <li><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 2</a></li>
  <li><a href="https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/#">Link 3</a></li>
</ul>

Făcând un pas mai departe, dacă acesta este meniul de navigare, înfășurați-l într-un Element de navigare HTML 5 (<nav>) și utilizatorii vor putea acum accesa direct meniul.

Verifică Proiectul A11y pentru mai multe sfaturi bune despre accesibilitate.

Simplificați-vă codul, adoptați funcționalități native

Ai fi surprins cât de multă funcționalitate există nativ în browserele moderne, cu mai mult suport pentru browser decât probabil aveți nevoie (îmi pare rău pentru cei dintre voi care încă acceptă IE9).

Cu unele HTML de bază, puteți crea o intrare de text care are un text care poate fi căutat, completat automat, într-o listă derulantă:

<label>My Favorite Color</label>
<input type="text" name="color" list="colors">
<datalist id="colors">
  <option value="Magenta">
  <option value="Purple">
  <option value="Ultraviolet">
</datalist>
1611648785 253 Puneti Javascript invatati mai intai HTML si CSS
Selector de culoare preferat

Profitând de pseudo-selectoarele CSS, putem stiliza dinamic un element de tip casetă de selectare în funcție de dacă este bifat:

<style>
.is-checked {
    display: none;
}

#my-checkbox:checked + span .is-checked {
    display: inline;
}

#my-checkbox:checked + span .not-checked {
    display: none;
}
</style>

<label for="my-checkbox">
  <input id="my-checkbox" type="checkbox" />
  <span>
    <span class="not-checked">Not Checked</span>
    <span class="is-checked">Checked</span>
    </span>
</label>
1611648785 851 Puneti Javascript invatati mai intai HTML si CSS
Casetă de selectare dinamică

Aceasta este meseria ta, fii atent la ea

1611648785 835 Puneti Javascript invatati mai intai HTML si CSS
https://twitter.com/markdalgleish/status/1155430223963234304

Aș paria că majoritatea oamenilor care citesc acest lucru fac acest lucru pentru că le pasă de codul lor și sunt foarte pasionați de ceea ce fac. La fel ca orice alt meșteșug care a venit înainte de dezvoltare, practicarea și concentrarea asupra fundamentelor vă vor consolida abilitatea de dezvoltator. Bonus, veți obține o victorie ușoară, ajutând să fiți mai incluzivi cu munca dvs. și să atrageți mai mulți oameni la aplicația dvs.!

Publicat inițial la https://www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css