L I N K S
Disclaimer
A big part of being a programmer is learning from other people's code. There is a vast amount of resources available online, including open source projects, tutorials, and more. Sharing code with the community is an important part of spurring innovation and improvization.
However, be careful of copyrights and licenses. Additionally, not all code online is functional or well-written. Always make sure to test the code before using it! This page contains few resources which I trust and use often.

If some code is open source , you can use it, build on it, and modify it to suit your needs. However, always make sure to give credit to the original author.

If you are curious about the code behind this website, you can check it out here ! This code is open source and if you notice, I have given credit to some developers whose code I have built on ;)
Media
Styling
Learning & Open Source
  • W3Schools
  • MDN Web Docs
  • FreeCodeCamp (Personally, a huge fan! I learnt all my basics from here)
  • Stackoverflow (The best place to find answers to your questions. Somehow, there will always be someone who has faced the exact same problem as you)
  • A website I visit often just to learn the new thing in CSS; this will often pop up in your searches as well: CSS Tricks
  • An amazing website for sharing your code and finding other people's code; I have learnt a lot from people on this site: Codepen
  • And of course, the best place to find open source projects: Github
Editors & Extensions
  • My absolute favorite editor is Visual Studio Code. Tons of functionality and extensions to exploit, and it's free!
  • Code formatting extension on VS Code: Prettier
  • For viewing your webpage as you make it, on VSCode, I use Live Server (There is also a built-in Open Preview option that you can use, for a split screen view)
  • An integration I love using is WakaTime! It tracks your coding sessions and gives you reports on how much time you spent, what languages you used, and more.
    This website took me 10 hours to build from scratch! (Including writing the code, styling, and adding content)
Solutions to Challenges
If you haven't looked at the challenges in the Tricks section yet, I would recommend you do that first.

See Challenges


Responsive Design
Click to View 
                            
                                /* Wrap everything in a container */
                                #main-container{
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    align-items: center;
                                }
                                .child-container{
                                    /* Each element */
                                }
Dark Mode
Click to View
First, you should have a button that toggles the dark mode on and off in your HTML file. For your CSS file: 
                            
                                div{
                                    background-color: #fff;
                                    color: #000;
                                }
                                div .dark{
                                    background-color: #000;
                                    color: #fff;
                                }
For your JS file: 
                            
                                const btn = document.getElementById("theme-button");
                                btn.addEventListener("click", () => {
                                    body.classList.toggle("dark");
                                });
Loading Page
Click to View
There are multiple ways to do this, but I will show you the way I usually do it. First, make two overlapping divs on the whole page: loading and the main page. Then include the following CSS: 
                            
                                #loading{
                                    /* Loading page */
                                }
                                #main{
                                    /* Main page */
                                    display: none;
                                }
Then, in your JS file, add the following: 
                            
                                const load = document.getElementById('loading');
                                const main = document.getElementById('main');
                                setTimeout(() =>{
                                    load.style.display = "none";
                                    main.style.display = "block";
                                }, 1500);
                                // 1500 is the time in milliseconds
The Glow Effect
Click to view
This one is pretty straightforward to think about. You just need to manipulate the text shadow property of the element. Just include the following in your CSS file: 
                            
                                #glow{
                                    animation: glow 1s ease-in-out infinite alternate;
                                }
                                
                                @keyframes glow{
                                    from{
                                        text-shadow: 0 0 10px #f6ffc3;
                                    }
                                    to{
                                        text-shadow: 0 0 20px #f6ffc3, 0 0 30px #f6ffc3, 0 0 40px #f6ffc3, 0 0 50px #f6ffc3, 0 0 60px #f6ffc3;
                                    }
                                }