Пратите ове кораке да бисте постали ЦСС Суперстар

ЦСС (Цасцадинг Стиле Схеетс) је једна од основних технологија која се користи за изградњу веб страница. С обзиром да је то ЈЕДИНИ језик табела стилова који прегледачи могу да разумеју, важно је научити ЦСС детаљно да би савладали веб развој.

Врло је лако започети са ЦСС-ом. Са само неколико сати тренинга лако можете обликовати текстове, елементе и распореде. Међутим, то постаје све теже и ускоро ћете доћи у ситуацију да ваш код почне да постаје прилично неуредан. Компоненте које су радиле пре него што су почеле да се ломе, а ви погуглате и пронађете поправак који поправља ваш елемент, али разбија још 5 елемената, јер је решење које сте пронашли на гооглеу променило display или position?

Зашто је учење ЦСС-а на прави начин важно

Ако немате дубље разумевање основа, ЦСС постаје више метод покушаја и грешака. Испробаћете различите вредности за различита својства и на крају задржите ону која делује тако да буде близу онога што сте желели, а да заправо не разумете како то функционише.

Почећете да гуглате основне ствари попут „како центрирати два див-а“ или „како вертикално поравнати див и текст“ и сваки пут копирати код из СтацкОверфлов-а или цодеПен-а. У оно доба, када флекбок није био толико популаран, „како поравнати див и вертикално и хоризонтално на страници?“ је било класично питање за ЦСС интервју. Многи почетници су могли да поставе водоравни део исправно, али само неколицина и вертикални део.

Мапа пута ??

1. Основе?

Ако тек започињете веб развој, научите неке основе ХТМЛ-а пре покретања ЦСС-а. У ЦСС-у прво прочитајте теорију о томе шта је ЦСС, како функционише у прегледачу и његову основну синтаксу и употребу.

Сазнајте више о различитим врстама стилова доступних њиховим разликама, селектора, а основни стилинг као што су font-size, width, heightитд

Можете започети тако што ћете проћи кроз водиче на МДН-у.

2. ЦСС Бок модел?

Разумети основе ЦСС бок модел и својства у вези са њим, као што су margin, border, padding итд

3. Слике и позадина?

Слике оживљавају веб страницу. Постоји много начина за додавање слике, као што су ознаке слика, додавање боја позадине / градијената и слика позадине разним другим ознакама. Такође можете да примените оно што сте раније научили, на пример постављање ивица на слике, или да користите више слика и развијете једноставну галерију.

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

4. Приказ и положај?

Ова два су нека од најважнијих својстава увоза у ЦСС-у, где треба да обратите пажњу да бисте их правилно разумели. Добро познавање ове две особине може вам учинити ЦСС путовање много уједначенијим.

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

Схватите како display се користи свако од ових својстава. Почећете да примећујете неке ХТМЛ елементе попут ике дисплаи: блоцк и с л лике i v> & lt;p> or 1> behave l ome eements > т; понашати се као дисплаи: инлине.

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датотека или увоз гоогле фонтова.

ЦСС може основну неуређену листу< ул> претворити у прелепу траку за навигацију! Пре много година табеле су коришћене за израду распореда екрана, хвала Богу што то више не радимо! ?

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

ЦСС псеудо-класа је кључна реч додата у селектор који специфицира посебно стање изабраних елемената. Псеудо-класа може бити једноставан као :hover и :visitedили нешто сложено као што су:nth-last-of-type(odd)

Комбинатори нам помажу да лако применимо стилове на дечје елементе или браћу и сестре без потребе да стварамо нове часове за сваког од њих.

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

7. Алатке за отклањање грешака и развојне програмере?

ЦСС не доводи до грешака. Тихо разбија кориснички интерфејс ако не исправите стилове? па је учење начина коришћења алата Дев веома важно.

Цхроме Дев алати су невероватни алат за веб програмере. Садржи мноштво сјајних функција за отклањање грешака на вашој веб локацији у реалном времену, а такође има уграђене алате за проверу учинка попут светионика .

8. Вежбајте Вежбајте вежбајте?

Садржај који сте горе научили довољан је за развој основне веб странице, па би у овом тренутку требало да започнете вежбање развојем малих веб локација. Наћи ћете на разне изазове када направите праву апликацију. За своју праксу можете да развијете једноставну веб локацију за одмаралиште или да направите галерију слика или блог или можете да направите неколико основних карактеристика својих омиљених друштвених медија као што су Фацебоок или Инстаграм.

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

Желите ли да ме унајмите за ваш следећи пројекат? Пошаљите ми е-маил на цонтацт@преетисх.ин?