Resources and links
Project 1 (Quote Generator)
Project 3 (Picture-In-Picture)
Project 4 (Joke Teller Bot)
LIVE DEMO font: default (Courier New)
API info:
Project 5 (Light and Dark Mode)
LIVE DEMO Blogs on designing light and dark mode
fonts:
Illustrations: Undraw
Pending: Responsiveness
Project 6 (Animation Template)
Project 7 (Navigation Nation)
Project 8 (Music Player)
PROJECT 9 (Custom Countdown with caching)
PROJECT 10 (Book Keeper App with caching)
PROJECT 11 (Video Player App)
LIVE DEMO font: Sen
TO ADD : Responsive DesignCODE REVIEW REQUIRED
PROJECT 13 (Spock Rock Game)
PROJECT 14 (Basic Calculator)
Key Learnings
HTML
About hidden attribute.
Providing dedicated favicon using link tag.
Creating quick loader spinners.
Using a random template to customize and design website.
Using third-party library in order to provide animations.
A button’s title attribute is used to add the tooltip with title text to the button.
AUDIO:
By deafult player has no visual representation and is invisible. Adding the `controls` attribute makes it visible.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
For multiple sources, the first supported file type will play.
VIDEO:
<video> element supports three different video formats: MP4, WebM, and OGG.The <video> element can also play audio files, but the <audio> tag provides a better user experience.
Best practices for form accessibility:
What does playsinline mean in video element?
CSS
What is a fallback font?
How to center an element using CSS?
By default what’s the margin on body?
Quickest Way to apply style for button hover effect
filter: brightness(%) property.
What does outline: none property does?
Giving button a 3-d effect?
Understanding CSS variables and :root pseudoclass
Using scroll-behavior property to implement smooth scroll.
Making a custom toggle switch
Animations in CSS
flex-wrap property is used to put the contents in different row(if flex-direction: row) if it overflows screen width.Creating a custom scroll bar.
Javascript
Understanding Picture in picture API.
Using the Screen capture API.
How to ignore Prettier extension from auto-formatting a specific part of code?
Complete guide to local storage
How to load third-party scripts efficiently.
Async vs differ
Using Paint-flash tool in developer tools to measure performance.
Difference between innerText and textContent
Everthing you need to know about date.
Always try to maintain the type of a variable same throughout its lifetime. It’ll really help in getting rid of multiple bugs that might arise in future and also help in better code readability.
How to fullscreen?
Browser Detection using User Agent
Check validity inside Form using constraint_validation API.
What is tree-shaking?
ES Module system
To Do list
HTML
CSS
Javascript