de Preetish HS

Urmați acești pași pentru a deveni un CSS Superstar

Urmati acesti pasi pentru a deveni un CSS Superstar

CSS (Cascading Style Sheets) este una dintre tehnologiile de bază utilizate pentru construirea paginilor web. Întrucât este singurul limbaj de foaie de stil pe care browserele îl pot înțelege, este important să învățați CSS în profunzime pentru a stăpâni dezvoltarea web.

Este foarte ușor să începeți cu CSS. Cu doar câteva ore de antrenament, puteți stiliza cu ușurință texte, elemente și machete. Cu toate acestea, devine din ce în ce mai dificil și în curând vei ajunge la o situație în care codul tău începe să devină destul de dezordonat. Componentele care funcționau înainte de a începe să se spargă, iar tu google și găsești soluția care îți remediază elementul, dar rupe alte 5 elemente, deoarece soluția pe care ai găsit-o pe Google a schimbat display sau position ?

De ce este important să învățați CSS în modul corect

Dacă nu aveți o înțelegere mai profundă a elementelor de bază, CSS devine mai mult un metoda de încercare și eroare. Veți încerca valori diferite pentru proprietăți diferite și, în cele din urmă, veți păstra cea care funcționează aproape de ceea ce doriți, fără a înțelege cum funcționează.

Veți începe să căutați lucruri de bază precum „Cum să centrezi două divs” sau „Cum să aliniați un div și un text pe verticală” și copiați lipiți codul de la StackOverflow sau codePen de fiecare dată. Înapoi în acele zile, când flexbox nu a fost atât de popular, „Cum aliniați un div atât pe verticală cât și pe orizontală într-o pagină?” a fost o întrebare clasică a interviului CSS. Mulți începători ar putea obține partea orizontală corect, dar doar câțiva au reușit și partea verticală.

Foaia de parcurs ??

1. Bazele?

Dacă abia începeți dezvoltarea web, aflați câteva elemente de bază ale HTML înainte de a începe CSS. În CSS, citiți mai întâi teoria despre ce este CSS, cum funcționează în browser și sintaxa și utilizarea sa de bază.

Aflați despre diferitele tipuri de foi de stil disponibile, diferențele lor, selectoarele și stilul de bază, cum ar fi font-size, width, height etc.

Puteți începe parcurgând tutoriale la MDN.

2. Model CSS Box?

Urmati acesti pasi pentru a deveni un CSS Superstar
credit: https://developer.mozilla.org

Înțelegeți elementele de bază ale Mod casetă CSSl și proprietățile asociate acestuia, cum ar fi margin, border, padding etc.

3. Imagini și fundal?

Imaginile fac ca pagina web să prindă viață. Există multe modalități de a adăuga o imagine, cum ar fi etichetele de imagine, adăugarea de culori de fundal / degrade și imagini de fundal la diferite alte etichete. De asemenea, ați putea aplica ceea ce ați învățat anterior, cum ar fi setarea de margini pentru imagini sau utilizarea mai multor imagini și dezvoltarea unei galerii simple.

<img src="https://www.freecodecamp.org/news/follow-these-steps-to-become-a-css-superstar-837cd6cb9b1a/images/wallpaper.jpg" ><div class="image" > </div>
.image {   background-image: url(../images/wallpaper.jpg);}

4. Afișare și poziție?

Aceste două sunt unele dintre cele mai importante proprietăți de import din CSS, unde trebuie să acordați atenție pentru a le înțelege corect. Cunoașterea bine a acestor două proprietăți vă poate face călătoria CSS mult mai ușoară.

 display: block | inline | inline-block | table | etc

Înțelegeți cum fiecare dintre acestea display se folosesc proprietăți. Veți începe să observați câteva elemente HTML, cum ar fi <deuv&gt; &lt;p> sau 1> behave lafișaj ike: bloc și some elements ca > <span&gt; comporta-te ca display: inline.

position: static | absolute | relative | fixed | sticky

Aceasta este una dintre proprietățile în care chiar și programatorii cu experiență fac greșeli. Aflați cum funcționează fiecare dintre ele, cum afectează poziția unui element fraților sau părinților săi, în ce situații le folosiți etc.

Acest pas este atât de important încât îl puteți repeta din nou și din nou până înțelegeți!

float: left | right

Deși aspectele plutitoare sunt o școală cam veche acum, există multe site-uri vechi care încă folosesc aspectele plutitoare.

5. Culori, fonturi, liste și tabele ☑️

Înțelegeți diferite formate de culoare, cum ar fi HEX cod, rgb, rgba, hsl, hsla, transparent etc.

color: white;color: #fff;color: rgb(255, 255, 255);color: rgba(255, 255, 255, 1);color: hsl(0, 100%, 100%);color: hsla(0, 100%, 100%, 1);color: transparent;

Aflați cum să utilizați diferite fonturi. Unele fonturi nu sunt disponibile în toate browserele, deci va trebui să învățați să adăugați fonturi manual cu woff sau ttf fișiere sau importul de fonturi Google.

CSS poate transforma un element de bază lista neordonata <ul> într-o frumoasă bară de navigare! Cu ani în urmă, tabelele erau folosite pentru a crea planuri de ecran, slavă Domnului că nu mai facem asta! ?

6. Pseudo-clase și combinatori ➕

Un CSS pseudo-clasă este un cuvânt cheie adăugat la un selector care specifică o stare specială a elementelor selectate. O pseudo-clasă poate fi la fel de simplă ca :hover sau :visited sau ceva complex precum:nth-last-of-type(odd)

Combinatoare ajutați-ne să aplicăm stiluri elementelor copilului sau fraților cu ușurință, fără a fi nevoie să creați noi clase pentru fiecare dintre ele.

/* all the paragraph elements inside the container will have color red */
.container > p {  color: yellow;}

7. Depanare și instrumente de dezvoltare?

CSS nu aruncă nicio eroare. Se întrerupe în mod tăcut interfața de utilizare dacă nu obțineți stilurile corecte? deci învățarea modului de utilizare a instrumentelor Dev este foarte importantă.

Instrumentele Chrome Dev sunt un instrument uimitor pentru dezvoltatorii web. Este plin de o mulțime de funcții excelente pentru depanarea site-ului dvs. în timp real și are, de asemenea, instrumente de verificare a performanței, cum ar fi far încorporat în el.

8. Practică Practică Practică?

0*RapmXy8eJSyb2OX6
Fotografie de David Rangel pe Unsplash

Conținutul pe care l-ați învățat mai sus este suficient pentru a dezvolta un site web de bază, așa că în acest moment ar trebui să începeți să practicați prin dezvoltarea de site-uri web mici. Veți întâlni diverse provocări atunci când creați o aplicație reală. Pentru practica dvs., puteți dezvolta un site web simplu pentru o stațiune, sau puteți crea o galerie de imagini sau un blog sau puteți, de asemenea, să creați câteva caracteristici de bază ale rețelelor sociale preferate, cum ar fi Facebook sau Instagram.

9. Proiectare web receptivă ??

1611677767 32 Urmati acesti pasi pentru a deveni un CSS Superstar
credit: Wikipedia

După învățarea dezvoltării web pentru desktop, există o mulțime de alte dispozitive prin intermediul cărora sunt accesate site-urile web. Suportarea acestor dispozitive este la fel de importantă. Înainte ca designul Responsive să devină popular, dezvoltatorii obișnuiau să proiecteze un site web separat pentru telefoane mobile, un site separat pentru dispozitive tactile etc. m.facebook.com și atingeți.facebook.com?

Există 3 lucruri importante în proiectarea web receptivă:

Aspecte fluide:

Lățimea setată cu px nu scalează pe baza ferestrei browserului. Pentru a scala elementele în funcție de dimensiunea browserului, trebuie să creăm machete fluide prin setarea dimensiunilor în % sau rem unități.

Interogări media:

O interogare media este o tehnică care include un bloc de proprietăți CSS numai dacă o anumită condiție este adevărată. Stabilim puncte de întrerupere pe baza designului nostru și schimbăm CSS în funcție de lățimea browserului.

@media only screen and (max-width: 600px) {
 body {
   background-color: lightblue;
 }
}

Imagini receptive:

Imaginile scad pe măsură ce lățimea ferestrei browserului scade sau dacă site-ul web este vizualizat pe dispozitive mobile. Uneori ar fi dificil să ne concentrăm pe detaliile importante ale unei anumite imagini, așa că ar trebui să folosim imagini diferite pentru diferite ecrane.

10. Flexbox și Grid ◼️ ⬛?

Au trecut aproximativ 10 ani (!) De când a fost introdus pentru prima dată Flexbox, dar a fost încorporat abia recent în 2015. – sursă

Flexbox și Grid sunt stilurile folosite pentru a crea machete flexibile și ne fac viața mult mai ușoară! Acesta este unul dintre cele mai bune lucruri care s-au întâmplat vreodată cu CSS. ?

Aspectul prezentat mai jos ar fi luat mai mult de 300 de linii de cod CSS fără Flexbox sau Grid.

11. Transformări, tranziții și animații?

Învățarea transformărilor și tranzițiilor de bază va fi utilă dacă doriți să creați o pagină web interactivă cu părți în mișcare pe evenimente de la mouse sau evenimente de la tastatură, cum ar fi hover sau clic.

Înainte de CSS3, animațiile se făceau mai ales folosind jQuery – O bibliotecă JavaScript. Acum CSS a devenit atât de puternic încât putem realiza animații complexe fără JavaScript.

12. Preprocesatori ✴️

Preprocesoare CSS sunt limbaje de scriptare care extind capacitățile implicite ale CSS. Acestea ne permit să folosim logica în codul nostru CSS, cum ar fi variabile, cuibărire, moștenire, mixini, funcții și operații matematice. Unele dintre cele populare sunt SASS, MAI PUȚIN, STIL și POSTCSS.

SCSS formatul SASS este mai utilizat, deci este bine să începeți cu SASS pentru dezvoltare.

autoprefixer pluginul POSTCSS face ca regulile dvs. CSS să fie compatibile în diferite browsere prin adăugarea de reguli suplimentare, cum ar fi -moz- și-webkit-.

13. Cadrele ?

Cadrele de învățare precum Bootstrap, Semantic-UI sau Materializa este opțional, dar foarte util pentru o dezvoltare mai rapidă, deoarece oferă o mulțime de stiluri și machete din cutie.

Aceste cadre sunt testate pe diferite browsere, astfel încât utilizarea acestora va evita unele dintre problemele de compatibilitate. Majoritatea cadrelor urmează modelul de design receptiv și sunt disponibile multe șabloane gratuite de la terți pentru a începe rapid.

14. Specificitate ?

încearcă să modifice un stil de buton de bootstrap, dar nu reușește, utilizează Google pentru o soluție !important , se entuziasmează cu gândul că este soluția corectă pentru toate problemele!”Și așa ți-ai condamnat proiectul! ? Dacă înțelegeți conceptul de Specificitate corect, problemele legate de regulile de suprapunere în mai multe foi de stil vor fi reduse semnificativ.

Specificitatea este o pondere care se aplică unei declarații CSS date, determinată de numărul fiecărui tip de selector din selectorul care se potrivește. Fiecare selector are o greutate diferită și utilizarea mai multor selectoare poate schimba specificitatea. Dacă specificitățile generale sunt egale, atunci se ia în considerare ordinea. Vedeți exemplul de mai jos:

<style>div.wrapper p.paragraph {
  color: pink;
}#container p{
  color: violet;
}p {
 color: green;
}.paragraph {
 color: yellow;
}
</style><div class="wrapper" id="container">
  <p class="paragraph"> This is a dummy text </p>
</div>

Care crezi că ar fi culoarea paragrafului? ?

15. Arhitectura CSS?

Scrierea codului CSS este ușoară, dar scrierea codului CSS care poate fi întreținut este dificilă. Trebuie urmată o structură și o metodă adecvate pentru a scrie un cod CSS bun. Doar respectarea celor mai bune practici nu este suficientă pentru a scrie CSS care poate fi întreținut.

Unele dintre tiparele de arhitectură pentru CSS sunt BEM, OOCSS, SMACSS etc. Puteți parcurge documentația și alege oricare tipar se potrivește gusturilor și proiectului dvs.

Iată-l! ?

Stăpânirea CSS necesită răbdare și multă practică. Pe măsură ce începeți să exersați, veți experimenta măreția CSS. 15 pași mari ar putea părea descurajatori la început, dar de fapt nu sunt. Am iubit fiecare pas și experiența mea s-a îmbunătățit de fiecare dată. ?

Mulțumesc că mi-ai citit articolul. Sper că ați găsit acest lucru util. Dacă da, asigurați-vă că lăsați multe palme! ? (Puteți lăsa până la 50?)

Vrei să mă angajezi pentru următorul tău proiect? Trimite-mi un e-mail la contact@preetish.in?