Виконайте ці кроки, щоб стати суперзіркою CSS

CSS (каскадні таблиці стилів) - одна з основних технологій, яка використовується для створення веб-сторінок. Оскільки браузери можуть зрозуміти ЄДИНУ мову таблиць стилів, важливо глибоко вивчити CSS, щоб освоїти веб-розробку.

Почати роботу з CSS дуже просто. Всього за кілька годин навчання ви можете легко стилізувати тексти, елементи та макети. Однак це стає поступово важким, і незабаром ви потрапите в ситуацію, коли ваш код почне ставати досить безладним. Компоненти, які раніше працювали до того, як почати ламатися, і ви погуглите і знайдете виправлення, яке виправляє ваш елемент, але ламає 5 інших елементів, оскільки рішення, яке ви знайшли в Google, змінило display чи position?

Чому важливо правильно вивчити CSS

Якщо у вас немає глибшого розуміння основ, CSS стає більше схожим на метод проб і помилок. Ви спробуєте різні значення для різних властивостей і, нарешті, залишите те, яке працює, наближене до того, що хотіли, насправді не розуміючи, як це працює.

Ви почнете гуглити основні речі, такі як "як відцентрувати два divs" або "як вирівняти div і текст по вертикалі", і кожен раз копіюйте вставний код із StackOverflow або codePen. У ті часи, коли flexbox не був настільки популярним, "як вирівняти div як вертикально, так і горизонтально на сторінці?" було класичним запитанням інтерв'ю CSS. Багато початківців могли правильно підібрати горизонтальну частину, але лише деякі з них отримали правильну вертикальну частину.

Дорожня карта ??

1. Основи?

Якщо ви тільки починаєте веб-розробку, вивчіть основи HTML перед запуском CSS. У CSS спочатку прочитайте теорію про те, що таке CSS, як він працює в браузері, а також його основний синтаксис та використання.

Детальніше про різні види стилів , доступних, їх відмінності, селектор і основні стилі , такі як font-size, width, і heightт.д.

Ви можете розпочати, переглянувши навчальні посібники на MDN.

2. Модель CSS Box?

Розуміння основ CSS коробки моделі і властивості , пов'язані з ним , такі як margin, border, і padding т.д.

3. Зображення та фон?

Зображення оживляють веб-сторінку. Існує багато способів додати зображення, наприклад, теги зображень, додати кольори фону / градієнти та фонові зображення до різних інших тегів. Ви також можете застосувати вивчене раніше, наприклад встановлення меж до зображень, або використовувати декілька зображень та створити просту галерею.

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

4. Відображення та положення?

Ці два є одними з найбільш властивостей імпорту в CSS, де вам потрібно звернути увагу, щоб правильно їх зрозуміти. Добре знання цих двох властивостей може зробити вашу подорож CSS набагато плавнішою.

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

Зрозумійте, як використовується кожна з цих display властивостей. Ви почнете помічати деякі елементи HTML, такі як ike display: block і s l likeiv> <p> or 1> behave lome eements>t; поводитись як display: inline.

position: static | absolute | relative | fixed | sticky

Це одна з властивостей, коли навіть досвідчені програмісти роблять помилки. Дізнайтеся, як працює кожен з них, як положення одного елемента впливає на його братів і сестер чи батьків, у яких ситуаціях ви їх використовуєте тощо.

Цей крок настільки важливий, що ви можете повторювати його знову і знову, поки не зрозумієте!

float: left | right

Незважаючи на те, що плаваючі макети зараз трохи старовинні, існує багато старих веб-сайтів, які все ще використовують макети плаваючих.

5. Кольори, шрифти, списки та таблиці ☑️

Розуміти різні колірні формати , такі як HEXкод, rgb, rgba, hsl, hsla, і transparentт.д.

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;

Дізнайтеся, як користуватися різними шрифтами. Деякі шрифти доступні не у всіх браузерах, тому вам доведеться навчитися додавати шрифти вручну за допомогою woffабо ttfфайлів, або імпортувати шрифти Google.

CSS може перетворити основний невпорядкований список< ul> на красиву панель навігації! Багато років тому таблиці використовувались для створення макетів екранів, слава богу, ми цього більше не робимо! ?

6. Псевдокласи та комбінатори ➕

Псевдо-клас CSS - це ключове слово, додане до селектора, яке визначає спеціальний стан вибраних елементів. Псевдо-клас може бути простим :hover або як- :visitedнебудь складним, наприклад:nth-last-of-type(odd)

Комбінатори допомагають нам легко застосовувати стилі до дочірніх елементів або братів і сестер без необхідності створювати нові класи для кожного з них.

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

7. Інструменти налагодження та розробки?

CSS не видає помилок. Він мовчки розбиває інтерфейс, якщо стилі неправильні? тому навчитися користуватися інструментами розробника дуже важливо.

Інструменти Chrome Dev - це чудовий інструмент для веб-розробників. Він має безліч чудових функцій для налагодження веб-сайту в режимі реального часу, а також має вбудовані в нього інструменти перевірки продуктивності, такі як маяк .

8. Практика Практика Практика?

Вмісту, який ви дізналися вище, достатньо для розробки базового веб-сайту, тому на цьому етапі вам слід почати практикувати, розробляючи невеликі веб-сайти. Створюючи справжній додаток, ви зіткнетеся з різними проблемами. Для вашої практики ви можете розробити простий веб-сайт для курорту, створити галерею зображень або блог, а також створити кілька основних функцій ваших улюблених соціальних медіа, таких як Facebook або Instagram.

9. Адаптивний веб-дизайн ??

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