https://github.com/fitrifityanto/technical-documentation-page-fcc
simple Technical Documentation page for freecodecamp course
https://github.com/fitrifityanto/technical-documentation-page-fcc
documentation-page freecodecamp freecodecamp-challenge
Last synced: 3 months ago
JSON representation
simple Technical Documentation page for freecodecamp course
- Host: GitHub
- URL: https://github.com/fitrifityanto/technical-documentation-page-fcc
- Owner: fitrifityanto
- Created: 2022-04-19T14:24:46.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-20T15:27:20.000Z (about 3 years ago)
- Last Synced: 2025-02-06T22:14:49.055Z (4 months ago)
- Topics: documentation-page, freecodecamp, freecodecamp-challenge
- Language: HTML
- Homepage:
- Size: 149 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Technical Documentation Page
Tugas project ke- 4 Responsive web design dari FreeCodeCamp akhirnya selesai. hehe.
Meskipun hasilnya sangat sederhana, alhamdulillah yang penting semua [aturan dari freeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page) sudah terpenuhi.
Awalnya saya ingin membuat documentation page ini menggunakan layout `grid`, tapi ternyata belum menemukan solusi kalau salah satu kolom nya itu `position:fixed`. tampilannya jadi ngga karuan. hehehe.. sementara ini ngga pakai grid dulu deh.
Next, kalau udah tahu cara yang lebih baik lagi, misal bisa mengimplementasikan `grid`, insyaAllah akan saya upload di repository ini.
Sementara ini dulu kata pengantar dari project Technical Documentation Page ini. untuk melihat hasilnya, klik [disini](https://fitrifityanto.github.io/technical-documentation-page-fcc/documentation.html)
### update
Setelah browsing, alhamdulillah nemuin nih caranya, menggunakan layout grid (yang salah satu kolomnya ngga ikut scroll). ini solusi saya dapatkan dari [Melanie Richards](https://melanie-richards.com/blog/css-grid-sticky/).
Salah satu kolomnya di atur `position:sticky`. dan berhasil, yeeay.
Untuk melihat hasil Documentation page menggunakan Grid layout, klik [disini](https://fitrifityanto.github.io/technical-documentation-page-fcc/grid-documentation/documentation.html)
Materi yang saya gunakan untuk Documentation Page ini saya ambil dari [https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
semangatcoding ^_^