Description Learning Mode
01 How does internet and web work? What's the relationship between HTML, CSS,& JavaScript? Text / Video
02 HTML, CSS basics, & install your code editor (Visual Studio Code) Text / Video
03 More HTML, CSS, how to add Font Awesome icons, and how to make your life easier with VS Code extensions! Text / Video
04 Build a strong core in CSS, intro to CSS layout, responsive web design, & a fun CSS challenge! Text
05 Your very first Grid layout! If you feel frustrated, congratulations! that means you are learning! Text / Video
06 Time to put everything together! Feel free to google stuff you don't know! But the key is to DO IT YOURSELF. Open an empty file and start typing and creating! Project
07 A day of reflection! Write down ✏️what you've learned so far and what you enjoy the most? Reflection 💭

Day 1: How the Internet Works

Text Video

Bonus: Watch Ralph Breaks the Internet

GIF video

Day 2: Intro to HTML, CSS & Environment Setup

Review Time:

Can you explain how the internet works? What is an URL? Can you describe the relationship between HTML, CSS, & JavaScript?

Text Video

Once you've downloaded VS code and understand how to navigate the code editor, it's time to start coding! Copy paste the code below to your VS Code and save it as demo.html (or name the file whatever you like but ends with .html) on your Desktop. Double click the file or drag the file to the browser. 

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first website</title>
  </head>
    
    <body>
       <h1> About me:  </h1> 
       <p> this is a paragraph about me </p> 
       <p> this is another paragraph  </p> 
    </body>
  </html>

Congratulations!🎉🎉 This is your very first web page! But it looks kinda boring, right?

We need some colors! From the readings above, do you still remember how to add some styling? There are 3 ways of adding styling. Let's practice all of them!

Hint: CSS can be added to HTML documents in 3 ways

Day 3: HTML, CSS, Font Awesome Icons, VS Code Shortcuts

Let's continue learning HTML & CSS ( my favorite part is HTML Emoji 😃 )!

Review Time:

Below is a code snippet, can you tell me what color will I see? 

        
 <div id="mycontainer">
   <h1 class="myheader"> Guess my color - one </h1>
   <h1> guess my color - two </h1>  
 </div>
      
<!-- below is the styling, what color would it be? --> 
     h1 { 
       color:blue;
     }  
     .myheader {
       color: pink;
     } 
     #mycontainer {
       color: purple;
     }
     div > h1 {
       color: green;
    }
Text Video:

Check out these free icons on Font Awesome

Solution: 3 Ways of Styling & Font Awesome Demo ( Click the ▶️ to see the output and code! )

Day 4: More CSS! Intro to CSS Layout

CSS Challenge of the Day:

After finishing today's readings and interactive exericses, can you create this hover effect? (try hover me)

Text GIF video

Day 5: CSS Grid Design Challenge

Text Video:

Note: If you've spent too much time picking color and adjusting pixels, please stop 🛑! As long as you understand the general concepts and how to create a simple grid or flex layout, it's good enough! Don't worry about being pixel perfect!

If you don't understand everything, that's okay! CSS really takes time to master!

Let's try something cool! Here is a HARD CSS Grid challenge for you 👇 👇 (Inspired by this amazing website)!

grid project 01

Day 6: Coding Time

Now's it's your turn to build something! Stop watching endless tutorials and reading articles. Open your VS Code and start practicing what you've learned! Your first web page won't be perfect, but it's totally normal! ( My first project looked like crap haha!)

I'll show you one more cool technique with code example, but this is your time to unleash your creativity!

Text Demo Code (Click the ▶️ Run to see the output and code!) GIF video

Day 7

Tired of typing? Grab a pencil and a piece of paper and write down the things you've learned. What makes sense to you? What do you enjoy the most? Most importantly, be proud of yourself and celebrate what you've achieved!

GIF video
Next Day