Suivez ces étapes pour devenir une superstar CSS

CSS (Cascading Style Sheets) est l'une des technologies de base utilisées pour créer des pages Web. Puisqu'il s'agit du SEUL langage de feuille de style que les navigateurs peuvent comprendre, il est important d'apprendre le CSS en profondeur pour maîtriser le développement Web.

Il est très facile de démarrer avec CSS. Avec seulement quelques heures de formation, vous pouvez facilement styliser des textes, des éléments et des mises en page. Cependant, cela devient progressivement difficile et vous arriverez bientôt à une situation où votre code commence à devenir assez compliqué. Les composants qui fonctionnaient avant de commencer à casser, et vous cherchez sur Google et trouvez le correctif qui corrige votre élément mais casse 5 autres éléments, car la solution que vous avez trouvée sur Google a changé le display ou position?

Pourquoi apprendre le CSS de la bonne manière est important

Si vous n'avez pas une compréhension plus approfondie des bases, CSS devient plus une méthode d'essai et d'erreur. Vous allez essayer différentes valeurs pour différentes propriétés et finalement garder celle qui fonctionne proche de ce que vous vouliez sans vraiment comprendre comment cela fonctionne.

Vous allez commencer à googler des choses de base comme «comment centrer deux divs» ou «comment aligner un div et un texte verticalement» et copier-coller le code de StackOverflow ou codePen à chaque fois. À l'époque, lorsque flexbox n'était pas si populaire, "comment aligner un div à la fois verticalement et horizontalement dans une page?" était une question d'entrevue CSS classique. De nombreux débutants pouvaient obtenir la bonne partie horizontale, mais seuls quelques-uns avaient également la bonne partie verticale.

La feuille de route ??

1. Les bases?

Si vous commencez tout juste le développement Web, apprenez quelques bases du HTML avant de commencer CSS. En CSS, lisez d'abord la théorie sur ce qu'est le CSS, son fonctionnement dans le navigateur, sa syntaxe et son utilisation de base.

En savoir plus sur les différents types de feuilles de style disponibles, leurs différences, sélecteurs et base coiffage tels que font-size, width, heightetc.

Vous pouvez commencer en suivant les didacticiels de MDN.

2. Modèle de boîte CSS?

Comprendre les bases du modèle de boîte CSS et les propriétés qui lui sont associées telles que margin, border, padding etc.

3. Images et arrière-plan?

Les images donnent vie à la page Web. Il existe de nombreuses façons d'ajouter une image, comme des balises d'image, en ajoutant des couleurs / dégradés d'arrière-plan et des images d'arrière-plan à diverses autres balises. Vous pouvez également appliquer ce que vous avez appris précédemment, comme définir des bordures sur des images ou utiliser plusieurs images et développer une galerie simple.

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

4. Affichage et position?

Ces deux sont quelques-unes des propriétés les plus importées dans CSS, auxquelles vous devez faire attention pour les comprendre correctement. Une bonne connaissance de ces deux propriétés peut rendre votre parcours CSS beaucoup plus fluide.

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

Comprenez comment chacune de ces display propriétés est utilisée. Vous commencerez à remarquer certains éléments HTML tels que ike display: block et s l likeiv> <p> or 1> behave lome eements>t; se comportent comme display: inline.

position: static | absolute | relative | fixed | sticky

C'est l'une des propriétés où même les programmeurs expérimentés font des erreurs. Apprenez comment chacun d'eux fonctionne, comment la position d'un élément affecte ses frères et sœurs ou ses parents, dans quelles situations vous les utilisez, etc.

Cette étape est si importante que vous pouvez la répéter encore et encore jusqu'à ce que vous compreniez!

float: left | right

Bien que les mises en page flottantes soient un peu old school maintenant, il existe de nombreux sites Web anciens qui utilisent encore des mises en page flottantes.

5. Couleurs, polices, listes et tableaux ☑️

Comprendre les différents formats de couleur tels que le HEXcode, 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;

Apprenez à utiliser différentes polices. Certaines polices ne sont pas disponibles sur tous les navigateurs, vous aurez donc besoin d'apprendre à ajouter des polices manuellement woffou ttffichiers ou d' importer des polices Google.

CSS peut transformer une liste non ordonnée de base <ul> en une belle barre de navigation! Il y a des années, les tableaux étaient utilisés pour créer des mises en page d'écran, Dieu merci, nous ne le faisons plus! ?

6. Pseudo-classes et combinateurs ➕

Une pseudo-classe CSS est un mot-clé ajouté à un sélecteur qui spécifie un état spécial du ou des éléments sélectionnés. Une pseudo-classe peut être aussi simple que :hover ou :visitedou quelque chose de complexe comme:nth-last-of-type(odd)

Les combinateurs nous aident à appliquer facilement des styles à des éléments enfants ou à des frères et sœurs sans avoir à créer de nouvelles classes pour chacun d'eux.

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

7. Outils de débogage et de développement?

CSS ne renvoie aucune erreur. Il brise silencieusement l'interface utilisateur si vous n'obtenez pas les styles corrects? Il est donc très important d'apprendre à utiliser les outils de développement.

Les outils Chrome Dev sont un outil incroyable pour les développeurs Web. Il est doté de nombreuses fonctionnalités intéressantes pour déboguer votre site Web en temps réel et intègre également des outils de vérification des performances tels que phare .

8. Pratique Pratique Pratique?

Le contenu que vous avez appris ci-dessus est suffisant pour développer un site Web de base, vous devriez donc commencer à vous entraîner en développant de petits sites Web. Vous rencontrerez divers défis lorsque vous créerez une vraie application. Pour votre pratique, vous pouvez développer un site Web simple pour une station balnéaire, ou créer une galerie d'images ou un blog, ou vous pouvez également créer quelques fonctionnalités de base de vos médias sociaux préférés tels que Facebook ou Instagram.

9. Conception Web réactive ??

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 ?)

Want to hire me for your next project? Drop me an email at [email protected] ?