Følg disse trin for at blive en CSS Superstar

CSS (Cascading Style Sheets) er en af ​​de vigtigste teknologier, der bruges til opbygning af websider. Da det er det ENESTE sprog for stilark, som browsere kan forstå, er det vigtigt at lære CSS i dybden for at mestre webudvikling.

Det er meget let at komme i gang med CSS. Med kun et par timers træning kan du nemt style tekster, elementer og layout. Det bliver dog gradvis vanskeligt, og snart kommer du til en situation, hvor din kode begynder at blive ganske rodet. Komponenterne, som før fungerede, før du begynder at bryde, og du googler og finder den rettelse, der løser dit element, men bryder 5 andre elementer, da løsningen, du fandt på google, ændrede display eller position?

Hvorfor det er vigtigt at lære CSS på den rigtige måde

Hvis du ikke har en dybere forståelse af det grundlæggende, bliver CSS mere som en prøve-og-fejl-metode. Du prøver forskellige værdier for forskellige egenskaber og endelig holder den, der fungerer tæt på det, du ønskede, uden faktisk at forstå, hvordan det fungerer.

Du begynder at google grundlæggende ting som "hvordan man centrerer to divs" eller "hvordan man retter en div og en tekst lodret" og kopier og indsæt koden fra StackOverflow eller codePen hver gang. Tilbage i de dage, hvor flexbox ikke var så populær, "hvordan retter du en div både lodret og vandret på en side?" var et klassisk CSS-interviewspørgsmål. Mange begyndere kunne få den vandrette del rigtigt, men kun få fåede den lodrette del også.

Køreplanen ??

1. Grundlæggende?

Hvis du lige er begyndt med webudvikling, skal du lære nogle af de grundlæggende HTML-egenskaber, inden du starter CSS. I CSS skal du først læse teorien om, hvad CSS er, hvordan det fungerer i browseren, og dets grundlæggende syntaks og brug.

Lær om de forskellige typer af stylesheets til rådighed, deres forskelle, selektorer, og grundlæggende styling såsom font-size, width, heightetc.

Du kan komme i gang ved at gå igennem tutorials på MDN.

2. CSS Box Model?

Forstå det grundlæggende i CSS box model og egenskaberne forbundet med det såsom margin, border, padding etc

3. Billeder og baggrund?

Billeder gør websiden levende. Der er mange måder at tilføje et billede såsom billedkoder, tilføje baggrundsfarver / gradienter og baggrundsbilleder til forskellige andre koder. Du kan også anvende det, du tidligere har lært, såsom at indstille grænser til billeder eller bruge flere billeder og udvikle et simpelt galleri.

.image { background-image: url(../images/wallpaper.jpg);}

4. Visning og placering?

Disse to er nogle af de mest importegenskaber i CSS, hvor du skal være opmærksom på at forstå dem korrekt. At kende disse to egenskaber godt kan gøre din CSS-rejse meget glattere.

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

Forstå, hvordan hver af disse display egenskaber bruges. Du begynder at lægge mærke til nogle HTML-elementer såsom ike display: blok og s jeg kan lide i v> & lt;p> or 1> behave l ome eements > t; opføre sig som display: inline.

position: static | absolute | relative | fixed | sticky

Dette er en af ​​egenskaberne, hvor selv erfarne programmører laver fejl. Lær hvordan hver af dem fungerer, hvordan positionen for et element påvirker dets søskende eller forældre, i hvilke situationer du bruger dem osv.

Dette trin er så vigtigt, at du kan gentage det igen og igen, indtil du forstår!

float: left | right

Selvom floatlayouts er lidt gamle skole nu, er der mange gamle hjemmesider, der stadig bruger floatlayouts.

5. Farver, skrifttyper, lister og tabeller ☑️

Forstå forskellige farve formater såsom HEXkode, rgb, rgba, hsl, hsla, transparentetc

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;

Lær, hvordan du bruger forskellige skrifttyper. Nogle skrifttyper er ikke tilgængelige i alle browsere, så du bliver nødt til at lære at tilføje skrifttyper manuelt med woffeller ttffiler eller importere Google-skrifttyper.

CSS kan gøre en grundlæggende uordnet liste< ul> til en smuk navigationslinje! For mange år siden blev tabeller brugt til at oprette skærmlayout, takk og lov, det gør vi ikke længere! ?

6. Pseudoklasser og kombinatorer ➕

En CSS- pseudoklasse er et nøgleord, der føjes til en vælger, der specificerer en speciel tilstand for det eller de valgte element (er). En pseudoklasse kan være så enkel som :hover eller :visitedeller noget kompleks som:nth-last-of-type(odd)

Kombinatorer hjælper os med at anvende stilarter på børneelementer eller søskende uden at skulle oprette nye klasser til hver af dem.

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

7. Fejlfindings- og udviklingsværktøjer?

CSS kaster ikke nogen fejl. Det bryder lydløst brugergrænsefladen, hvis du ikke får typografierne korrekte? så det er meget vigtigt at lære at bruge Dev-værktøjer.

Chrome Dev-værktøjer er et fantastisk værktøj til webudviklere. Den er fyldt med mange gode funktioner til fejlfinding af dit websted i realtid og har også funktionskontrolværktøjer som fyrtårn indbygget i det.

8. Træne Træne øve?

Indholdet, du har lært ovenfor, er nok til at udvikle et grundlæggende websted, så på dette tidspunkt skal du begynde at øve ved at udvikle små websteder. Du støder på forskellige udfordringer, når du bygger en rigtig applikation. Til din praksis kan du udvikle et simpelt websted til en udvej eller oprette et billedgalleri eller en blog, eller du kan også oprette et par grundlæggende funktioner i dine yndlings sociale medier som Facebook eller Instagram.

9. Responsivt webdesign ??

After learning web development for desktop there are a lot of other devices through which the websites are accessed. Supporting these devices is equally important. Before the Responsive design got popular, developers used to design a separate website for mobiles, a separate website for touch-enabled devices etc. remember m.facebook.com and touch.facebook.com?

There are 3 important things in Responsive web design:

Fluid Layouts:

Width set with px does not scale based on the browser window. To make the elements scale based on the browser size, we need to create fluid layouts by setting the sizes in % or rem units.

Media Queries:

A media query is a technique to include a block of CSS properties only if a certain condition is true. We set breakpoints based on our design and change the CSS depending on the browser width.

@media only screen and (max-width: 600px) {

 body {

   background-color: lightblue;

 }

}

Responsive images:

Images scale down as the width of the browser window decreases or if the website is viewed in mobile devices. Sometimes it would be difficult to focus on the important details on a particular image so we’d need to use different images for different screens.

10. Flexbox and Grid ◼️ ⬛ ?

It’s been around 10 years(!) since Flexbox was first introduced, but it was incorporated only recently in 2015. — source

Flexbox and Grid are the styles used to create flexible layouts, and they make our lives so much easier! This is one of the best things that has ever happened to CSS. ?

The layout shown below would have taken more than 300 lines of CSS code without Flexbox or Grid.

11. Transforms, transitions and animations ?

Learning basic transforms and transitions will come in handy if you want to create an interactive web page with moving parts on mouse events or keyboard events such as hover or click.

Before CSS3, animations were done mostly using jQuery — A JavaScript library. Now CSS has become so powerful that we can do complex animations without any JavaScript.

12. Preprocessors ✴️

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. Some of the popular ones are SASS, LESS, STYLUS and POSTCSS.

The SCSS format of SASS is more widely used, so it's good to get started with SASS for development.

The autoprefixer plugin of POSTCSS makes your CSS rules compatible across various browsers by adding extra rules such as -moz- and-webkit-.

13. Frameworks ?

Learning frameworks such as Bootstrap, Semantic-UI or Materialize is optional but very useful for faster development as they provide a lot of styles and layouts out of the box.

These Frameworks are tested across various browsers, so using these will avoid some of the compatibility issues. Most of the frameworks follow the responsive design pattern and lots of free 3rd party templates are be available to get started quickly.

14. Specificity ?

tries to modify a button style of bootstrap but fails, googles for a solution, uses !important , gets all excited thinking that’s the right fix for all the problems!” And that's how you doomed your project! ? If you understand the concept of Specificity correctly, problems regarding overlapping rules in multiple stylesheets will be reduced significantly.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. Each selector has a different weight, and using multiple selectors can change the specificity. If the overall specificities are equal then the order is considered. See the example below:

div.wrapper p.paragraph {

  color: pink;

}#container p{

  color: violet;

}p {

 color: green;

}.paragraph {

 color: yellow;

}

 

This is a dummy text

What do you think would be the colour of the paragraph? ?

15. CSS Architecture ?

Writing CSS code is easy, but writing maintainable CSS code is hard. A proper structure and method have to be followed to write good CSS code. Just following the best practices is not sufficient to write maintainable CSS.

Some of the Architecture patterns for CSS are BEM, OOCSS, SMACSS etc. You can go through the documentation and choose whichever pattern fits your tastes and project.

There you have it! ?

Mastering CSS takes patience and lots of practice. As you start practising you'll experience the awesomeness of CSS. 15 big steps might seem daunting at first but they’re actually not. I loved each and every step, and my experience got better every time. ?

Thanks for reading my article. I hope that you have found this useful. If so, be sure to leave lots of claps! ? (You can leave up to 50 ?)

Vil du ansætte mig til dit næste projekt? Send mig en e-mail på [email protected]?