Latihan dari Dcode tentang membuat Navigation Bar yang otomatis sembunyi ketika halaman di scroll event
https://youtu.be/Q_XZk5Vnujw
#dcode #navbar #hidden
https://youtu.be/Q_XZk5Vnujw
#dcode #navbar #hidden
YouTube
How to Hide a Navigation Bar When Scrolling Down - HTML, CSS & JavaScript Web Design Tutorial
View the SOURCE CODE:
https://codepen.io/dcode-software/pen/rNmPyXq
In today's video I'll be showing you how to create a "disappearing" navigation bar that will hide when the user scrolls down, and re-appear when they scroll back up. This is useful for content…
https://codepen.io/dcode-software/pen/rNmPyXq
In today's video I'll be showing you how to create a "disappearing" navigation bar that will hide when the user scrolls down, and re-appear when they scroll back up. This is useful for content…
Pengenalan apa itu Tailwind CSS dan kelebihannya dari channel Fireship
https://youtu.be/mr15Xzb1Ook
---
Membangun Navbar responsive dengan Tailwind CSS
https://blog.logrocket.com/how-to-build-responsive-navbar-tailwind-css/
#fireship #tailwind #navbar #css
https://youtu.be/mr15Xzb1Ook
---
Membangun Navbar responsive dengan Tailwind CSS
https://blog.logrocket.com/how-to-build-responsive-navbar-tailwind-css/
#fireship #tailwind #navbar #css
YouTube
Tailwind in 100 Seconds
Tailwind is a utility-first CSS framework for building websites. It takes a functional approach to web design by providing thousands of tiny classes to use directly in your HTML. Learn why web developers love tailwind in this quick breakdown.
🔗 Resources…
🔗 Resources…
Latihan penting membuat Navbar di bagian samping dan bawah atau Sidebar dan Bottom bar dengan CSS Flexbox
https://www.freecodecamp.org/news/fixed-side-and-bottom-navbar-with-css-flexbox/
---
Membuat aplikasi resep makanan dengan menggunakan CSS, JavaScript, dan HTML
https://www.freecodecamp.org/news/html-css-tutorial-build-a-recipe-website/
---
Penting nya menggunakan element Semantic HTML jika dibandingkan menggunakan element div saja.
https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/
#css #flexbox #navbar #div #semantic #recipe
https://www.freecodecamp.org/news/fixed-side-and-bottom-navbar-with-css-flexbox/
---
Membuat aplikasi resep makanan dengan menggunakan CSS, JavaScript, dan HTML
https://www.freecodecamp.org/news/html-css-tutorial-build-a-recipe-website/
---
Penting nya menggunakan element Semantic HTML jika dibandingkan menggunakan element div saja.
https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/
#css #flexbox #navbar #div #semantic #recipe
freeCodeCamp.org
CSS Flexbox Tutorial – How to Build a Fixed Side and Bottom Navbar
Flexbox can help you simplify the process of creating both basic and advanced layouts. And it's pretty straightforward to create side and bottom navigation menus with CSS flexbox or Grid. These layouts are so popular that they appear almost everywhere on…
Latihan dari Kevin Powell membuat responsive Navbar dengan HTML dan CSS
https://youtu.be/HbBMp6yUXO0
#navbar #css #html #kevinPowell
https://youtu.be/HbBMp6yUXO0
#navbar #css #html #kevinPowell
YouTube
Responsive navbar tutorial using HTML CSS & JS
You can find the Frontend Mentor project here: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
🔗 Links
✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc…
And the free Scrimba course here: https://scrimba.com/learn/spacetravel
🔗 Links
✅ Why I use HSL: https://youtu.be/Ab9pHqhsfcc…
Membuat Navigation menu dengan navigation indicator yang unik bersama channel Online Tutorials
https://youtu.be/a3rofqqrTBE
#navbar #navigation #menu
https://youtu.be/a3rofqqrTBE
#navbar #navigation #menu
YouTube
Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects 02
Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exp…
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-beginners-to-exp…
Membuat halaman web dengan multi navigation bar bersama Kevin Powell
https://youtu.be/I1lq2ge7g4g
#kevinPowell #navbar
https://youtu.be/I1lq2ge7g4g
#kevinPowell #navbar
YouTube
The problem with multiple nav elements (and the simple solution)
When we have multiple nav elements on a given page, it's important that we use aria-label to label them... most of the time!
🔗 Links
✅ a11y project: https://www.a11yproject.com/
✅ Leone Watson's video: https://www.youtube.com/watch?v=IhWMou12_Vk
✅ Skip…
🔗 Links
✅ a11y project: https://www.a11yproject.com/
✅ Leone Watson's video: https://www.youtube.com/watch?v=IhWMou12_Vk
✅ Skip…
Latihan membuat aplikasi fullstack JavaScript dengan Next JS dan Harper Db
https://www.freecodecamp.org/news/nextjs-and-harperdb-tutorial-build-a-full-stack-app/
---
Latihan membuat fungsi CRUD dengan Next JS
https://blog.openreplay.com/building-crud-apps-with-nextjs
---
Membuat preview gambar di React JS dengan File Reader API JavaScript
https://blog.logrocket.com/using-filereader-api-preview-images-react/
---
Membuat Navigation Bar responsive dengan React JS
https://blog.logrocket.com/create-responsive-navbar-react-css/
---
Membuat menu bar dengan React JS yang memenuhi syarat accessibility dengan ARIA
https://blog.logrocket.com/building-accessible-menubar-component-react/
---
Latihan sederhana mengenal React Hooks
https://dev.to/8eth/react-hooks-29fp
---
#nextjs #react #preview #image #hooks #aria #navbar #responsive
https://www.freecodecamp.org/news/nextjs-and-harperdb-tutorial-build-a-full-stack-app/
---
Latihan membuat fungsi CRUD dengan Next JS
https://blog.openreplay.com/building-crud-apps-with-nextjs
---
Membuat preview gambar di React JS dengan File Reader API JavaScript
https://blog.logrocket.com/using-filereader-api-preview-images-react/
---
Membuat Navigation Bar responsive dengan React JS
https://blog.logrocket.com/create-responsive-navbar-react-css/
---
Membuat menu bar dengan React JS yang memenuhi syarat accessibility dengan ARIA
https://blog.logrocket.com/building-accessible-menubar-component-react/
---
Latihan sederhana mengenal React Hooks
https://dev.to/8eth/react-hooks-29fp
---
#nextjs #react #preview #image #hooks #aria #navbar #responsive
freeCodeCamp.org
NextJS and HarperDB Tutorial –Build a Full Stack Productivity Timer App
Building full stack applications can be tough. You have to think about frontend, APIs, databases, authentication - and how all of these things work together. So, in this article, I'll show you how to do all of those things using NextJS and HarperDB. We'll…
Latihan dari Cand Dev tentang membuat aplikasi kalkulator dengan React JS
https://www.youtube.com/watch?v=o89bhL-S6g8
—-
Latihan dari Web Dev Simplified tentang membuat Navigation Bar dengan React JS dan disertai dengan Routing
https://www.youtube.com/watch?v=SLfhMt5OUPI
—-
#react #webdevsimplified #candDev #navbar #routing #calculator
https://www.youtube.com/watch?v=o89bhL-S6g8
—-
Latihan dari Web Dev Simplified tentang membuat Navigation Bar dengan React JS dan disertai dengan Routing
https://www.youtube.com/watch?v=SLfhMt5OUPI
—-
#react #webdevsimplified #candDev #navbar #routing #calculator
YouTube
Build a Calculator App in React JS
We will create simple calculator with react, we also gonna use context api to working with the state.
👨💻Code:
https://github.com/candraKriswinarto/react-calculator-app
🔗Link:
Reactjs: https://reactjs.org/docs/create-a-new-react-app.html
react-textfit:…
👨💻Code:
https://github.com/candraKriswinarto/react-calculator-app
🔗Link:
Reactjs: https://reactjs.org/docs/create-a-new-react-app.html
react-textfit:…
Latihan penting dari Kevin Powell tentang tips menggunakan Fixed Navigation Bar dan mencegah content di bawah nya tertutup navigation bar ketika di scroll
https://youtu.be/iGUSTyG-CYw
#fixed #navbar #content #scroll #kevinPowell
https://youtu.be/iGUSTyG-CYw
#fixed #navbar #content #scroll #kevinPowell
YouTube
Stop fixed navigations covering content on scroll
When we have a fixed navigation with anchor links that go to different locations within the page, that navigation can cover content when it scrolls to that location on the page. Luckily, it's easy to fix with some scroll-padding!
🔗 Links
✅ The CodePen:…
🔗 Links
✅ The CodePen:…
Latihan bersama Dcode membuat responsive Navbar dengan HTML dan CSS
https://youtu.be/K-PEhxtC58Q
#html #css #navbar #dcode #responsive
https://youtu.be/K-PEhxtC58Q
#html #css #navbar #dcode #responsive
YouTube
How to Create a Responsive Navbar with HTML, CSS & JavaScript
GET THE SOURCE CODE 👇👇
https://codepen.io/dcode-software/pen/BarojKK
GOOGLE MATERIAL ICONS:
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.query=menu
GOOGLE MATERIAL ICONS SETUP GUIDE:
https://developers.google.com/fonts/…
https://codepen.io/dcode-software/pen/BarojKK
GOOGLE MATERIAL ICONS:
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.query=menu
GOOGLE MATERIAL ICONS SETUP GUIDE:
https://developers.google.com/fonts/…