https://github.com/lintangwisesa/css_tutorial

CSS Tutorial Mulai dari nol #TutorAfterNgantor
https://github.com/lintangwisesa/css_tutorial

book css css-tutorial html tutorial website

Last synced: 6 months ago
JSON representation

CSS Tutorial Mulai dari nol #TutorAfterNgantor

• Host: GitHub
• URL: https://github.com/lintangwisesa/css_tutorial
• Owner: LintangWisesa
• Created: 2019-12-27T23:40:16.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-18T07:40:56.000Z (almost 6 years ago)
• Last Synced: 2025-04-04T10:37:41.429Z (10 months ago)
• Topics: book, css, css-tutorial, html, tutorial, website
• Language: CSS
• Size: 3.86 MB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)

# __CSS Tutorial__

[![Video](https://img.youtube.com/vi/Z9u5Z3unNSM/0.jpg)](https://www.youtube.com/watch?v=Z9u5Z3unNSM)

__CSS__ (_Cascading Style Sheets_) merupakan aturan untuk mengatur style & layout beberapa komponen dalam sebuah web, sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. CSS dapat mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, spasi antar paragraf, spasi antar teks, margin dan parameter lainnya. Tutorial kali ini membahas _step-by-step_ bagaimana menggunakan CSS untuk mengatur style & layout elemen HTML mulai dari nol.

#

⏰ Timestamp links | 📚 Bahasan Materi

---|---

[#1 Intro](https://youtu.be/Z9u5Z3unNSM?t=37) | 


Apa itu CSS?

Inline CSS

Internal CSS

External CSS



[#2 Selector](https://youtu.be/Z9u5Z3unNSM?t=647) | 


Tag, class, ID & attribute selector

Group selector

Descendant, child & adjacent selector



[#3 Pseudo Elements & Classes](https://youtu.be/Z9u5Z3unNSM?t=2214) | 


first-child, last-child

nth-child, nth-of-type

first-letter, first-line

hover, focus, active



[#4 Basic CSS Properties](https://youtu.be/Z9u5Z3unNSM?t=3114) | 


Color & Background

Text styling

Width, height & unit length

Padding, border & margin



[#5 Transformation & Transition](https://youtu.be/Z9u5Z3unNSM?t=5036) | 


Translate, Rotate, Scale, Skew

3D Transformation

Transition



[#6 Positioning](https://youtu.be/Z9u5Z3unNSM?t=6588) | 


Relative Position

Absolute Position

Fixed Position



[#7 Grid](https://youtu.be/Z9u5Z3unNSM?t=7522) | 


Display Grid

Grid Column, Row, Gap & Lines

Nested Grid



[#8 Summary](https://youtu.be/Z9u5Z3unNSM?t=8714) | 


Summary

References





# __Responsive Web Design__

[![Video](https://img.youtube.com/vi/8doKuzJAcqw/0.jpg)](https://www.youtube.com/watch?v=8doKuzJAcqw)

_**Responsive Web Design**_ merupakan teknik penggunaan HTML, CSS & teknologi pendukung web development lainnya, untuk membuat tampilan website yang responsif terhadap ukuran layar device user. Website yang responsif akan memiliki user interface yang efektif & user experience yang baik di beragam device user. Tutorial kali ini membahas _step-by-step_ bagaimana menggunakan HTML & CSS untuk membuat tampilan website yang responsif.

#

⏰ Timestamp links

- [#1 Intro](https://youtu.be/8doKuzJAcqw?t=19)

- [#2 Responsive Size](https://youtu.be/8doKuzJAcqw?t=221)

- [#3 Responsive Content](https://youtu.be/8doKuzJAcqw?t=583)

- [#4 Responsive Layout](https://youtu.be/8doKuzJAcqw?t=914)

- [#5 Summary](https://youtu.be/8doKuzJAcqw?t=1488)

#

#### Lintang Wisesa :love_letter: _lintangwisesa@ymail.com_

[Facebook](https://www.facebook.com/lintangbagus) | 

[Twitter](https://twitter.com/Lintang_Wisesa) |

[LinkedIn](https://www.linkedin.com/in/lintangwisesa/) |

[Youtube](https://www.youtube.com/user/lintangbagus) | 

:octocat: [GitHub](https://github.com/LintangWisesa) |

[Hackster](https://www.hackster.io/lintangwisesa)