{"id":19522651,"url":"https://github.com/lintangwisesa/css_tutorial","last_synced_at":"2025-07-28T12:05:39.691Z","repository":{"id":121862156,"uuid":"230533395","full_name":"LintangWisesa/CSS_Tutorial","owner":"LintangWisesa","description":"CSS Tutorial Mulai dari nol #TutorAfterNgantor","archived":false,"fork":false,"pushed_at":"2020-02-18T07:40:56.000Z","size":4046,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T10:37:41.429Z","etag":null,"topics":["book","css","css-tutorial","html","tutorial","website"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LintangWisesa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-27T23:40:16.000Z","updated_at":"2022-04-12T19:44:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"d75e85f7-feee-40ca-b5b7-3ab979ce73e3","html_url":"https://github.com/LintangWisesa/CSS_Tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FCSS_Tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FCSS_Tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FCSS_Tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LintangWisesa%2FCSS_Tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LintangWisesa","download_url":"https://codeload.github.com/LintangWisesa/CSS_Tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967324,"owners_count":21515575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["book","css","css-tutorial","html","tutorial","website"],"created_at":"2024-11-11T00:40:10.186Z","updated_at":"2025-04-26T09:32:17.965Z","avatar_url":"https://github.com/LintangWisesa.png","language":"CSS","readme":"![simplinnovation](https://4.bp.blogspot.com/-f7YxPyqHAzY/WJ6VnkvE0SI/AAAAAAAADTQ/0tDQPTrVrtMAFT-q-1-3ktUQT5Il9FGdQCLcB/s350/simpLINnovation1a.png)\n\n# __CSS Tutorial__\n\n[![Video](https://img.youtube.com/vi/Z9u5Z3unNSM/0.jpg)](https://www.youtube.com/watch?v=Z9u5Z3unNSM)\n\n__CSS__ (_Cascading Style Sheets_) merupakan aturan untuk mengatur style \u0026 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 \u0026 layout elemen HTML mulai dari nol.\n\n#\n\n⏰ Timestamp links | 📚 Bahasan Materi\n---|---\n[#1 Intro](https://youtu.be/Z9u5Z3unNSM?t=37) | \u003cul\u003e\u003cli\u003eApa itu CSS?\u003c/li\u003e\u003cli\u003eInline CSS\u003c/li\u003e\u003cli\u003eInternal CSS\u003c/li\u003e\u003cli\u003eExternal CSS\u003c/li\u003e\u003c/ul\u003e\n[#2 Selector](https://youtu.be/Z9u5Z3unNSM?t=647) | \u003cul\u003e\u003cli\u003eTag, class, ID \u0026 attribute selector\u003c/li\u003e\u003cli\u003eGroup selector\u003c/li\u003e\u003cli\u003eDescendant, child \u0026 adjacent selector\u003c/li\u003e\u003c/ul\u003e\n[#3 Pseudo Elements \u0026 Classes](https://youtu.be/Z9u5Z3unNSM?t=2214) | \u003cul\u003e\u003cli\u003efirst-child, last-child\u003c/li\u003e\u003cli\u003enth-child, nth-of-type\u003c/li\u003e\u003cli\u003efirst-letter, first-line\u003c/li\u003e\u003cli\u003ehover, focus, active\u003c/li\u003e\u003c/ul\u003e\n[#4 Basic CSS Properties](https://youtu.be/Z9u5Z3unNSM?t=3114) | \u003cul\u003e\u003cli\u003eColor \u0026 Background\u003c/li\u003e\u003cli\u003eText styling\u003c/li\u003e\u003cli\u003eWidth, height \u0026 unit length\u003c/li\u003e\u003cli\u003ePadding, border \u0026 margin\u003c/li\u003e\u003c/ul\u003e\n[#5 Transformation \u0026 Transition](https://youtu.be/Z9u5Z3unNSM?t=5036) | \u003cul\u003e\u003cli\u003eTranslate, Rotate, Scale, Skew\u003c/li\u003e\u003cli\u003e3D Transformation\u003c/li\u003e\u003cli\u003eTransition\u003c/li\u003e\u003c/ul\u003e\n[#6 Positioning](https://youtu.be/Z9u5Z3unNSM?t=6588) | \u003cul\u003e\u003cli\u003eRelative Position\u003c/li\u003e\u003cli\u003eAbsolute Position\u003c/li\u003e\u003cli\u003eFixed Position\u003c/li\u003e\u003c/ul\u003e\n[#7 Grid](https://youtu.be/Z9u5Z3unNSM?t=7522) | \u003cul\u003e\u003cli\u003eDisplay Grid\u003c/li\u003e\u003cli\u003eGrid Column, Row, Gap \u0026 Lines\u003c/li\u003e\u003cli\u003eNested Grid\u003c/li\u003e\u003c/ul\u003e\n[#8 Summary](https://youtu.be/Z9u5Z3unNSM?t=8714) | \u003cul\u003e\u003cli\u003eSummary\u003c/li\u003e\u003cli\u003eReferences\u003c/li\u003e\u003c/ul\u003e\n\n\u003chr\u003e\n\n# __Responsive Web Design__\n\n[![Video](https://img.youtube.com/vi/8doKuzJAcqw/0.jpg)](https://www.youtube.com/watch?v=8doKuzJAcqw)\n\n_**Responsive Web Design**_ merupakan teknik penggunaan HTML, CSS \u0026 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 \u0026 user experience yang baik di beragam device user. Tutorial kali ini membahas _step-by-step_ bagaimana menggunakan HTML \u0026 CSS untuk membuat tampilan website yang responsif.\n\n#\n\n⏰ Timestamp links\n- [#1 Intro](https://youtu.be/8doKuzJAcqw?t=19)\n- [#2 Responsive Size](https://youtu.be/8doKuzJAcqw?t=221)\n- [#3 Responsive Content](https://youtu.be/8doKuzJAcqw?t=583)\n- [#4 Responsive Layout](https://youtu.be/8doKuzJAcqw?t=914)\n- [#5 Summary](https://youtu.be/8doKuzJAcqw?t=1488)\n\n#\n\n#### Lintang Wisesa :love_letter: _lintangwisesa@ymail.com_\n\n[Facebook](https://www.facebook.com/lintangbagus) | \n[Twitter](https://twitter.com/Lintang_Wisesa) |\n[LinkedIn](https://www.linkedin.com/in/lintangwisesa/) |\n[Youtube](https://www.youtube.com/user/lintangbagus) | \n:octocat: [GitHub](https://github.com/LintangWisesa) |\n[Hackster](https://www.hackster.io/lintangwisesa)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Fcss_tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flintangwisesa%2Fcss_tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flintangwisesa%2Fcss_tutorial/lists"}