JavaScript Indonesia Channel

Belajar CSS dengan cara yang menyenangkan yaitu dengan bermain game interaktif

https://dev.to/suprabhasupi/learn-css-by-playing-games-1a36

---

Menggunakan del element di HTML untuk tampilan strikethrough atau coret tengah

https://dev.to/ale3oula/how-to-semantically-strikethrough-with-html5-3h7p

---

Latihan dasar pengenalan CSS Flexbox dan CSS Grid

https://dev.to/theodorusclarence/back-to-basic-should-we-use-flexbox-or-grid-1h9i

#css #learning #course #game #flexbox #cssGrid #strikethrought

DEV Community

Learn CSS By Playing Games 👾

Learning CSS can be a frustrating experience sometime. One of the best things about learning to code...

750 viewsRian YW, 00:41

JavaScript Indonesia Channel

Latihan panjang dan lengkap dari Joy Shaheb dan Freecodecamp tentang penggunaan CSS Grid dan cheatsheet nya

https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/

---

Tips penggunaan Flexbox CSS untuk tampilan layout dan kode CSS yang lebih rapi

https://dev.to/melnik909/my-3-tips-about-flexbox-that-will-make-your-css-better-50g6

---

Membuat tampilan tag cloud dengan HTML dan CSS

https://dev.to/alvaromontoro/create-a-tag-cloud-with-html-and-css-1e90

---

Teknik mengatur element dengan z-index agar tidak saling menumpuk dan overflow antara satu dengan yang lain

https://sherryhsu.medium.com/how-to-avoid-z-index-war-9d22b44ca61a

---

#css #freecodecamp #joyshaheb #grid #cssGrid #zindex #tagcloud #flexbox

freeCodeCamp.org

Complete CSS Grid Tutorial with Cheat Sheet 🎖️

Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: C...

1.98K viewsRian YW, 23:35

JavaScript Indonesia Channel

Latihan penting banget sekali dari Joy Shaheb dan Freecodecamp tentang cara membuat element ke tengah atau centering element, menggunakan Flexbox dan CSS Grid

https://www.freecodecamp.org/news/how-to-center-objects-using-css/

---

Contekan atau cheatsheet tentang penggunaan CSS Flexbox dengan contoh ilustrasi nya

https://javascript.plainenglish.io/the-ultimate-css-flexbox-cheat-sheet-with-examples-7a62dce086dc

---

Tips dari CSS Tricks tentang menambah efek bayangan atau Shadow ke dalam aset gambar SVG yang ditampilkan ke HTML

https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/

---

#css #flexbox #cssGrid #joyShaheb #freecodecamp #center #svg #shadow

freeCodeCamp.org

How to Center Anything in CSS Using Flexbox and Grid ✨

Today I'm gonna show you how you can center and align your content with CSS. Along the way, we'll look at various alignment techniques. So, let's get started! 🥇 Table of Contents -> How to Use Flexbox to center anything horizontally center anything...

1.59K viewsRian YW, 23:23

JavaScript Indonesia Channel

Mengatur posisi konten element di dalam element overlay dengan menggunakan CSS Grid

https://css-tricks.com/positioning-overlay-content-with-css-grid/

---

#css #overlay #cssGrid

CSS-Tricks

Positioning Overlay Content With CSS Grid | CSS-Tricks

Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.

677 viewsRian YW, 01:16

JavaScript Indonesia Channel

Latihan panjang tentang pengenalan CSS Grid

https://css-tricks.com/snippets/css/complete-guide-grid/

#cssGrid #css

CSS-Tricks

CSS Grid Layout Guide | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

711 views00:59

JavaScript Indonesia Channel

Pengenalan CSS Subgrid sebagai pelengkap dari CSS Grid bersama Kevin Powell

https://www.youtube.com/watch?v=tX06aPu1aIg

#cssgrid #subgrid #kevinpowell

YouTube

I'm not sure how much longer I can wait!

I'm making October Subgrid Awareness Month here on my channel, and to kick things off, we're looking at the basics of setting up a subgrid.

🔗 Links
✅ Get started with CSS Grid: https://www.youtube.com/watch?v=plRcoRqLriw&list=PL4-IK0AVhVjM41-Ezm5tmES…

731 views23:50

JavaScript Indonesia Channel

Latihan bersama Kevin Powell tentang pengenalan CSS Subgrid dari CSS Grid

https://youtu.be/UwV4LtO0nHo

#kevinPowell #cssGrid #subgrid #css

YouTube

Creating a robust grid system using subgrid

Subgrid is so powerful, and to continue raising awareness of how great it is, here is yet another video exploring it, this time building out a robust grid system!

🔗 Links
⚠ The start and end code will only work in Firefox (at the time of publishing this)…

510 views23:18

JavaScript Indonesia Channel

Latihan panjang tentang pengenalan CSS Grid untuk layout halaman HTML

https://dev.to/daaahailey/grid-practice-14ac

#cssGrid #css #layout

DEV Community 👩‍💻👨‍💻

Grid practice

I've been using flex more and haven't really used float or grid. I think I should try to use them...

920 views01:08

JavaScript Indonesia Channel

Latihan panjang dari Freecodecamp tentang pengenalan SVG dengan membuat aplikasi jam analog menggunakan JavaScript, HTML, dan CSS

https://www.freecodecamp.org/news/svg-javascript-tutorial/

---

Latihan membuat aplikasi Pomodoro Timer dengan Javascript, HTML dan CSS

https://javascript.plainenglish.io/build-a-pomodoro-timer-using-html-css-and-javascript-7a7a8410052c

---

Latihan membuat animasi halaman web dengan menggunakan Theatre JS

https://blog.logrocket.com/theatre-js-creating-intricate-powerful-animations/

---

Komparasi antara Flexbox dengan CSS Grid

https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951

#freecodecamp #svg #clock #pomodoro #flexbox #cssGrid

freeCodeCamp.org

SVG + JavaScript Tutorial – How to Code an Animated Watch

Since SVG images can be inlined in HTML, we can manipulate them with JavaScript. This means that we can animate parts of an image from code, make it interactive, or turn things around and generate graphics from data. In this example, we are going to ...

715 views23:30

JavaScript Indonesia Channel

Latihan bersama Kevin Powell tentang membuat layout dengan CSS Grid yang bersifat responsive sesuai ukuran layar

https://youtu.be/sKFW3wek21Q

---

#css #kevinPowell #cssGrid

YouTube

Learn how to create a responsive CSS grid layout

A look at how we can make a dynamic, responsive grid using CSS, along with a dive into properties l like aspect-ratio, object-fit, and more.

🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/dynamic-grid-layout
✅ Andy Bells CSS reset: https…

766 views23:05

JavaScript Indonesia Channel

Latihan penting dari Kevin Powell tentang perbedaan Flexbox dan CSS Grid serta contoh kasus penggunaannya

https://www.youtube.com/watch?v=3elGSZSWTbM

#kevinpowell #cssGrid #flexbox

YouTube

Flexbox or grid - How to decide?

Flexbox and grid are two fantastic layout tools. It can be hard to know which one to pick, but when you focus on the strengths of each one, it becomes a lot easier.

🔗 Links
✅ The easiest way to get started with Grid: https://youtu.be/rg7Fvvl3taU
✅ The…

734 views23:16

JavaScript Indonesia Channel

Latihan panjang dari Traversy Media tentang CSS Grid dan contoh kasus penggunaannya

https://youtu.be/0xMQfnTU6oo

#css #cssGrid #traversyMedia

708 views23:37

JavaScript Indonesia Channel

Latihan penggunaan CSS Grid Dev Tools pada Google Chrome

https://youtu.be/M8SlBgul8ao

#chrome #devtools #cssGrid

YouTube

CSS Grid debugging tools #DevToolsTips

Tips on debugging CSS Grid with Chrome DevTools.

Chapters:
0:00 - Intro
0:20 - Highlight grid with badge
0:40 - Extend grid lines
1:10 - Use grid line numbers
1:54 - Visualize grid line names
2:33 - Visualize grid area names
3:11 - Show track sizes
3:39…