KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

30-Day-HTML-CSS-Coding-Calendar

★ 34 Open GitHub ↗

A 30 day coding calendar that covers HTML & CSS for new web developers

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![30 Day Beginner HTML & CSS Coding Calendar Banner](https://raw.githubusercontent.com/breehall/30-Day-HTML-CSS-Coding-Calendar/main/img/30%20Day%20Calendar%20Banner.png)

# 30 Day Beginner HTML & CSS Coding Calendar

In this repo you'll find a 30 day challenge of learning HTML and CSS through free resources, exercises, and games. My goal when creating this calendar is to assist new developers by removing the anxiety and uncertainty about where to start with web development and what resources should can be used. The calendar is pre-planned and packed with great resources and information that will help anyone to begin coding with no previous experience.

**Table of Contents**

✨ [How to Use This Calendar](#using-calendar)

✨ [Downloading the Calendar](#download-calendar)

✨ [Resources Used to Create The Calendar](#resources)

✨ [Let's Connect](#connect)

---

<h2 id="using-calendar">✏️ How to Use This Calendar</h2>

I’m so excited that you’ve decided to jump into the world of web development! This 30 day calendar will take you on a journey of learning, understanding, and practicing the fundamentals of HTML and CSS through free videos, practice exercises, and games that can be found online.

I recommend this coding calendar to anyone who is interested in pursuing a career in development, and anyone who is on the fence and just wants to test the waters. The technical and coding resources on this calendar have been created by talented minds and are absolutely free to use! I do not own them, but they’re always my go to resources for new developers. Links to all resources can be found below.

Each day is a little different, but generally, each day will contain watching a video (or portion of a video), and completing an exercise or playing a game to reaffirm what you’ve learned. Coding is a skill that’s best learned hands on.

The way you use this calendar is really up to you, but here are a few of my considerations and recommendations:
- **Time:** 
  This calendar spans 30 days. 30 days is 30 days. It doesn’t matter if they’re consecutive or on predetermined days that fit into your schedule. It only matters that you’re learning and practicing, so complete these 30 days in the format that’s best for you!

- **Journal:** 
  I highly recommend that you keep a journal while you complete this challenge. I recommend documenting a summary of what you learned during your study session, things you’re having trouble with or don’t understand, and any questions you currently have. As you make your way towards day 30, you may realize you now have the answers to questions you asked in the first few days. It can be a dedicated journal or a simple note in your default Notes app, but be sure to journal.
  
- **Where to Go From Here:** 
  At the end of 30 days, you’ll likely be able to decide if web development is for you. If not, that’s ok! I’m proud of you for taking the challenge and learning a new skill.

If so, your next steps will likely be to get started with JavaScript. JavaScript is going to add functionality to the beautiful websites that you can now create. Many of the resources used in this calendar also have JavaScript courses/practice exercises you can take.

I hope that you enjoy the 30 day adventure you’re about to embark on! Feel free to share your progress with me on [Twitter (@bytesofbree)](https://www.twitter.com/bytesofbree). Happy coding!

✨ Click the image below to check out the video on YouTube where I discuss the calendar in depth and how I would use it if I had to learn HTML & CSS from the beginning again.

[![30 Days - Thumbnail](https://user-images.githubusercontent.com/40739624/148301669-e65bd853-4c05-43e4-ae3c-5d534ac3e9e8.png)](https://youtu.be/HDssvUHgpYk)

<h2 id="download-calendar">📅 Downloading the Calendar</h2>

**PDF Format**

The calendar can be downloaded as a PDF [here](30%20Day%20Beginner%20HTML%20&%20CSS%20Calendar.pdf). All exercises and videos are linked to their respective websites, so feel free to download it or print it!

**View on the Web**

If you'd like to view this calendar here on Github, click [here](Calendar.md)!

---

<h2 id="resources">🌐 Resources Used to Create The Calendar</h2>

**Videos**

✨ [Learn HTML & CSS From Scratch by FreeCodeCamp](https://www.youtube.com/watch?v=mU6anWqZJcc)

✨ [Git & Github Crash Course by FreeCodeCamp](https://www.youtube.com/watch?v=RGOj5yH7evk)

✨ [Chrome Dev Tools by FreeCodeCamp](https://www.youtube.com/watch?v=gTVpBbFWry8)

**Courses**

✨ [Basic HTML & HTML5 by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5)

✨ [Basic CSS by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#basic-css)

✨ [CSS Grid by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-grid)

✨ [CSS Flexbox by FreeCodeCamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox)

**Games & Exercises**

✨ [CSS Diner](https://flukeout.github.io/)

✨ [CSS Battle](https://cssbattle.dev/)

✨ [Flexbox Froggy](https://flexboxfroggy.com/)

✨ [CSS Grid Garden](https://cssgridgarden.com/)

✨ [Frontend Mentor](https://www.frontendmentor.io/)

✨ [W3Schools](https://www.w3schools.com/git/exercise.asp)

---

<h2 id="connect">👋🏾 Let's Connect</h2>

I would love to hear about your experience with this 30 Day HTML & CSS coding calendar! You can find me on the socials below to share your experience.

30-Day-HTML-CSS-Coding-Calendar

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README