Bisakah saya belajar css dalam satu hari

Question

CSS (Cascading Style Sheets) adalah salah satu teknologi inti yang digunakan untuk membangun halaman web. Karena ini adalah SATU-SATUNYA bahasa style sheet yang dapat dipahami oleh browser, penting untuk mempelajari CSS secara mendalam untuk menguasai pengembangan web

Table of Contents Show

Mengapa mempelajari CSS dengan cara yang benar itu penting
Peta Jalan ??
Berapa lama untuk mempelajari CSS?
Bisakah saya belajar CSS dalam seminggu?
Bagaimana saya bisa belajar CSS dengan cepat?
Bisakah saya belajar HTML CSS dalam 2 hari?

Sangat mudah untuk memulai dengan CSS. Hanya dengan beberapa jam pelatihan, Anda dapat mengatur gaya teks, elemen, dan tata letak dengan mudah. Namun, ini menjadi semakin sulit dan Anda akan segera sampai pada situasi di mana kode Anda mulai menjadi sangat berantakan. Komponen yang dulu berfungsi sebelum mulai rusak, dan Anda mencari di Google dan menemukan perbaikan yang memperbaiki elemen Anda tetapi merusak 5 elemen lainnya, karena solusi yang Anda temukan di google mengubah displayatau position ?

Mengapa mempelajari CSS dengan cara yang benar itu penting

Jika Anda tidak memiliki pemahaman yang lebih dalam tentang dasar-dasarnya, CSS menjadi lebih seperti metode coba-coba. Anda akan mencoba nilai yang berbeda untuk properti yang berbeda dan akhirnya mempertahankan nilai yang mendekati apa yang Anda inginkan tanpa benar-benar memahami cara kerjanya

Anda akan mulai googling hal-hal dasar seperti "cara memusatkan dua div" atau "cara menyelaraskan div dan teks secara vertikal" dan salin tempel kode dari StackOverflow atau codePen setiap saat. Dulu, ketika flexbox tidak begitu populer, "bagaimana Anda menyelaraskan div baik secara vertikal maupun horizontal di halaman?" . Banyak pemula bisa mendapatkan bagian horizontal dengan benar tetapi hanya sedikit yang bisa mendapatkan bagian vertikal dengan benar

Peta Jalan ??

1. Dasar ?

Jika Anda baru memulai pengembangan web, pelajari beberapa dasar HTML sebelum memulai CSS. Di CSS, pertama-tama baca teori tentang apa itu CSS, cara kerjanya di browser, dan sintaks dasarnya serta penggunaannya

Pelajari tentang berbagai jenis lembar gaya yang tersedia, perbedaannya, penyeleksi, dan gaya dasar seperti

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

0,

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

1,

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

2 dll

Anda dapat memulai dengan mengikuti tutorial di MDN

2. Model Kotak CSS ?

kredit. https. // pengembang. mozilla. org

Memahami dasar-dasar model kotak CSS dan properti yang terkait dengannya seperti

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

3,

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

4,

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

5dll

3. Gambar dan Latar Belakang ?

Gambar membuat halaman web menjadi hidup. Ada banyak cara untuk menambahkan gambar seperti tag gambar, menambahkan warna/gradien latar belakang, dan gambar latar belakang ke berbagai tag lainnya. Anda juga dapat menerapkan apa yang telah Anda pelajari sebelumnya seperti mengatur batas pada gambar atau menggunakan banyak gambar dan mengembangkan galeri sederhana

<img src="../images/wallpaper.jpg" ><div class="image" > </div>

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

4. Tampilan dan Posisi ?

Keduanya adalah beberapa properti yang paling banyak diimpor di CSS di mana Anda perlu memperhatikan untuk memahaminya dengan benar. Mengetahui kedua properti ini dengan baik dapat membuat perjalanan CSS Anda jauh lebih lancar

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

_

Pahami bagaimana masing-masing displayproperti ini digunakan. Anda akan mulai melihat beberapa elemen HTML seperti

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

7i

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

8t; . blok dan s

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

1l

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

2 suka Foto oleh David Rangel di Unsplash

Konten-konten yang Anda pelajari di atas sudah cukup untuk mengembangkan website dasar, jadi pada titik ini sebaiknya Anda mulai berlatih dengan mengembangkan website kecil-kecilan. Anda akan menemukan berbagai tantangan saat membangun aplikasi nyata. Untuk latihan Anda, Anda dapat mengembangkan situs web sederhana untuk resor, atau membangun galeri gambar, atau blog, atau Anda juga dapat membangun beberapa fitur dasar dari media sosial favorit Anda seperti Facebook atau Instagram

9. Desain Web Responsif ??

kredit. Wikipedia

Setelah mempelajari pengembangan web untuk desktop, ada banyak perangkat lain yang digunakan untuk mengakses situs web. Mendukung perangkat ini sama pentingnya. Sebelum desain Responsif menjadi populer, pengembang biasa mendesain situs web terpisah untuk ponsel, situs web terpisah untuk perangkat yang mendukung sentuhan, dll. ingat m. facebook. com dan sentuh. facebook. com?

Ada 3 hal penting dalam desain web Responsive

Tata Letak Cairan

Lebar yang disetel dengan

position: static | absolute | relative | fixed | sticky

_6tidak diskalakan berdasarkan jendela browser. Untuk membuat skala elemen berdasarkan ukuran browser, kita perlu membuat fluid layout dengan mengatur ukurannya dalam

position: static | absolute | relative | fixed | sticky

7or

position: static | absolute | relative | fixed | sticky

8units

Kueri Media

Kueri media adalah teknik untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar. Kami menetapkan breakpoint berdasarkan desain kami dan mengubah CSS tergantung pada lebar browser

position: static | absolute | relative | fixed | sticky

_9

float: left | right

0

float: left | right

1

float: left | right

2

float: left | right

3

Gambar responsif

Gambar diperkecil saat lebar jendela browser berkurang atau jika situs web dilihat di perangkat seluler. Terkadang sulit untuk berfokus pada detail penting pada gambar tertentu sehingga kami perlu menggunakan gambar yang berbeda untuk layar yang berbeda

10. Flexbox dan Grid ◼️ ⬛ ?

Sudah sekitar 10 tahun (. ) sejak Flexbox pertama kali diperkenalkan, tetapi baru digabungkan pada tahun 2015. - sumber

Flexbox dan Grid adalah gaya yang digunakan untuk membuat tata letak yang fleksibel, dan membuat hidup kita jauh lebih mudah. Ini adalah salah satu hal terbaik yang pernah terjadi pada CSS. ?

Tata letak yang ditunjukkan di bawah ini akan membutuhkan lebih dari 300 baris kode CSS tanpa Flexbox atau Grid

11. Transformasi, transisi, dan animasi ?

Mempelajari transformasi dan transisi dasar akan berguna jika Anda ingin membuat halaman web interaktif dengan bagian bergerak pada aktivitas mouse atau aktivitas keyboard seperti arahkan kursor atau klik

Sebelum CSS3, animasi sebagian besar dilakukan menggunakan jQuery — Pustaka JavaScript. Sekarang CSS telah menjadi sangat kuat sehingga kita dapat membuat animasi yang rumit tanpa JavaScript

12. Preprosesor ✴️

Preprosesor CSS adalah bahasa scripting yang memperluas kemampuan default CSS. Mereka memungkinkan kita untuk menggunakan logika dalam kode CSS kita, seperti variabel, nesting, pewarisan, mixin, fungsi, dan operasi matematika. Beberapa yang populer adalah SASS, LESS, STYLUS dan POSTCSS

Format SCSS dari SASS lebih banyak digunakan, jadi ada baiknya memulai dengan SASS untuk pengembangan

Plugin

float: left | right

_4 dari POSTCSS membuat aturan CSS Anda kompatibel di berbagai browser dengan menambahkan aturan tambahan seperti

float: left | right

5 dan

float: left | right

6

13. Kerangka ?

Kerangka pembelajaran seperti Bootstrap, Semantic-UI atau Materialize bersifat opsional tetapi sangat berguna untuk pengembangan yang lebih cepat karena mereka menyediakan banyak gaya dan tata letak di luar kotak

Framework ini diuji di berbagai browser, jadi menggunakan ini akan menghindari beberapa masalah kompatibilitas. Sebagian besar kerangka mengikuti pola desain responsif dan banyak templat pihak ke-3 gratis tersedia untuk memulai dengan cepat

14. Kekhususan ?

“mencoba memodifikasi gaya tombol bootstrap tetapi gagal, mencari solusi di Google, menggunakan

float: left | right

7 , mendapatkan semua pemikiran bersemangat bahwa itu adalah perbaikan yang tepat untuk semua masalah. ” Dan begitulah cara Anda menghancurkan proyek Anda. ?

Spesifisitas adalah bobot yang diterapkan pada deklarasi CSS tertentu, ditentukan oleh jumlah setiap jenis pemilih dalam pemilih yang cocok. Setiap selektor memiliki bobot yang berbeda, dan menggunakan banyak selektor dapat mengubah spesifisitasnya. Jika spesifisitas keseluruhan sama maka urutan dipertimbangkan. Lihat contoh di bawah ini

float: left | right

8

float: left | right

_9

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;

0

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;

1

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;

2

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;

3

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;

4

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;

5

float: left | right

3

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;

7

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;

8

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;

_9

Menurut Anda apa warna paragraf?

15. Arsitektur CSS ?

Menulis kode CSS itu mudah, tetapi menulis kode CSS yang dapat dipelihara itu sulit. Struktur dan metode yang tepat harus diikuti untuk menulis kode CSS yang baik. Mengikuti praktik terbaik saja tidak cukup untuk menulis CSS yang dapat dipertahankan

Beberapa pola Arsitektur untuk CSS adalah BEM, OOCSS, SMACSS dll. Anda dapat membaca dokumentasi dan memilih pola mana saja yang sesuai dengan selera dan proyek Anda

Itu dia. ?

Menguasai CSS membutuhkan kesabaran dan banyak latihan. Saat Anda mulai berlatih, Anda akan merasakan kedahsyatan CSS. 15 langkah besar mungkin tampak menakutkan pada awalnya, tetapi sebenarnya tidak. Saya menyukai setiap langkah, dan pengalaman saya menjadi lebih baik setiap saat. ?

Terima kasih telah membaca artikel saya. Saya harap Anda telah menemukan ini berguna. Jika demikian, pastikan untuk meninggalkan banyak tepuk tangan. ?

Ingin mempekerjakan saya untuk proyek Anda berikutnya? . di dalam ?

Jika artikel ini bermanfaat, tweetlah

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Berapa lama untuk mempelajari CSS?

Berapa Lama yang Dibutuhkan untuk Mempelajari CSS? . seven to eight months to build up a working knowledge of CSS (and HTML—as they are almost inseparable).

Bisakah saya belajar CSS dalam seminggu?

Berapa lama waktu yang saya perlukan untuk mempelajari HTML dan CSS? . Kuncinya adalah menerapkan pembelajaran Anda dan membangun proyek. Proyek termudah yang dapat Anda buat adalah situs web pribadi Anda sendiri. It may take you 1-2 weeks to complete the course, and about a month of practice to get comfortable with HTML and CSS. The key is to apply your learning and build projects. The easiest project you can create is your own personal website.

Bagaimana saya bisa belajar CSS dengan cepat?

Dalam CSS, baca dulu teori tentang apa itu CSS, cara kerjanya di browser, dan sintaks dasarnya serta penggunaannya. Pelajari tentang berbagai jenis lembar gaya yang tersedia, perbedaannya, penyeleksi, dan gaya dasar seperti font-size , width , height dll. Anda dapat memulai dengan melalui tutorial di MDN .

Bisakah saya belajar HTML CSS dalam 2 hari?

Jika Anda berkonsentrasi, Anda dapat mempelajari dasar-dasarnya dalam 2 hari . HTML penuh dengan elemen (tag) dan atributnya. Setiap elemen memiliki properti individualnya. Dengan menggunakan CSS kita dapat menambahkan properti tambahan ke elemen html.

kode css