Ikuti langkah-langkah ini untuk menjadi Superstar CSS

CSS (Cascading Style Sheets) adalah salah satu teknologi teras yang digunakan untuk membina laman web. Oleh kerana ia adalah bahasa helaian gaya HANYA yang dapat difahami oleh penyemak imbas, penting untuk mempelajari CSS secara mendalam untuk menguasai pengembangan web.

Sangat mudah untuk memulakan CSS. Hanya dengan latihan selama beberapa jam, anda boleh menggayakan teks, elemen dan susun atur dengan mudah. Walau bagaimanapun, ia menjadi semakin sukar dan tidak lama lagi anda akan menghadapi situasi di mana kod anda mula menjadi tidak kemas. Komponen-komponen yang dulu berfungsi sebelum mula pecah, dan anda google dan mencari jalan keluar yang memperbaiki elemen anda tetapi memecah 5 elemen lain, kerana penyelesaian yang anda temukan di google mengubah display atau position?

Mengapa belajar CSS dengan cara yang betul adalah penting

Sekiranya anda tidak memahami asasnya dengan lebih mendalam, CSS akan menjadi seperti kaedah percubaan dan ralat. Anda akan mencuba nilai yang berbeza untuk sifat yang berbeza dan akhirnya menyimpan nilai yang sesuai dengan yang anda mahukan tanpa benar-benar memahami cara kerjanya.

Anda akan mula melakukan googling perkara asas seperti "bagaimana memusatkan dua div " atau "bagaimana menyelaraskan div dan teks secara menegak" dan menyalin tampal kod dari StackOverflow atau codePen setiap masa. Kembali pada masa itu, ketika flexbox tidak begitu popular, "bagaimana anda menyelaraskan div baik secara menegak dan mendatar dalam halaman?" adalah soalan temu ramah CSS klasik. Banyak pemula boleh mendapatkan bahagian mendatar dengan betul tetapi hanya sebilangan kecil yang mendapat bahagian menegak juga.

Peta Jalan ??

1. Asasnya?

Sekiranya anda baru memulakan pengembangan web, pelajari beberapa asas HTML sebelum memulakan CSS. Di CSS, baca dulu teori mengenai apa itu CSS, bagaimana ia berfungsi di penyemak imbas, dan sintaks dan penggunaan asasnya.

Belajar tentang pelbagai jenis lembaran gaya ada, perbezaan mereka, pemilih, dan asas menggayakan seperti font-size, width, heightdan lain-lain

Anda boleh memulakan dengan mengikuti tutorial di MDN.

2. Model Kotak CSS?

Memahami asas-asas model kotak CSS dan sifat-sifat yang berkaitan dengannya seperti margin, border, padding dan lain-lain

3. Imej dan Latar Belakang?

Imej menjadikan laman web menjadi hidup. Terdapat banyak cara untuk menambahkan gambar seperti tag gambar, menambahkan warna / kecerunan latar belakang dan gambar latar ke pelbagai tag lain. Anda juga dapat menerapkan apa yang telah anda pelajari sebelumnya seperti menetapkan sempadan pada gambar atau menggunakan beberapa gambar dan mengembangkan galeri sederhana.

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

4. Paparan dan Kedudukan?

Kedua-duanya adalah beberapa sifat import paling banyak di CSS di mana anda perlu memberi perhatian untuk memahaminya dengan betul. Mengetahui kedua-dua sifat ini dapat menjadikan perjalanan CSS anda lebih lancar.

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

Fahami bagaimana setiap display sifat ini digunakan. Anda akan mula melihat beberapa elemen HTML seperti paparan ike: block dan s l seperti i v> & lt;p> or 1> behave l ome eements > t; berkelakuan seperti paparan: sebaris.

position: static | absolute | relative | fixed | sticky

Ini adalah salah satu sifat di mana bahkan pengaturcara yang berpengalaman melakukan kesalahan. Ketahui bagaimana setiap elemen berfungsi, bagaimana kedudukan satu elemen mempengaruhi adik-beradik atau ibu bapanya, dalam situasi apa anda menggunakannya, dll.

Langkah ini sangat penting sehingga anda dapat mengulanginya berulang kali sehingga anda faham!

float: left | right

Walaupun susun atur apung adalah sekolah yang agak lama sekarang, terdapat banyak laman web lama yang masih menggunakan susun atur apungan.

5. Warna, Font, senarai dan Jadual ☑️

Memahami format warna yang berbeza seperti HEXkod, rgb, rgba, hsl, hsla, transparentdan lain-lain

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;

Ketahui cara menggunakan fon yang berbeza. Beberapa fon tidak tersedia di semua penyemak imbas, jadi anda perlu belajar menambahkan fon secara manual dengan woffatau ttffail atau mengimport fon google.

CSS boleh mengubah senarai asas tanpa susunan< menjadi bar navigasi yang indah! Tahun yang lalu jadual digunakan untuk membuat susun atur skrin, syukurlah kami tidak melakukannya lagi! ?

6. Pseudo-class dan Combinators ➕

Kelas pseudo CSS adalah kata kunci yang ditambahkan pada pemilih yang menentukan keadaan khas elemen yang dipilih. Kelas pseudo semudah :hover atau :visitedatau sesuatu yang kompleks seperti:nth-last-of-type(odd)

Penggabung membantu kami menerapkan gaya pada elemen anak atau adik-beradik dengan mudah tanpa perlu membuat kelas baru untuk masing-masing.

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

7. Alat debugging dan Dev?

CSS tidak membuang sebarang kesalahan. Secara senyap-senyap melanggar UI jika gaya anda tidak betul? jadi belajar bagaimana menggunakan alat Dev sangat penting.

Alat Chrome Dev adalah alat yang luar biasa untuk pembangun web. Ini dilengkapi dengan banyak ciri hebat untuk menyahpepijat laman web anda dalam masa nyata dan juga mempunyai alat pemeriksaan prestasi seperti rumah api yang terdapat di dalamnya.

8. Amalan Amalan Amalan?

Kandungan yang anda pelajari di atas cukup untuk mengembangkan laman web asas, jadi pada ketika ini anda harus mula berlatih dengan mengembangkan laman web kecil. Anda akan menghadapi pelbagai cabaran semasa membina aplikasi sebenar. Untuk latihan anda, anda boleh membina laman web sederhana untuk resort, atau membina galeri gambar, atau blog, atau anda juga boleh membina beberapa ciri asas media sosial kegemaran anda seperti Facebook atau Instagram.

9. Reka Bentuk Web Responsif ??

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