JavaScript30 README

JavaScript30

Starter Files + Completed solutions for the JavaScript 30 Day Challenge.

Grab the course at https://JavaScript30.com

Community #JavaScript30 Content

Feel free to submit a PR by adding a link to your own recaps, guides, or reviews!

Arjun Khode’s blog about summaries for each day, including fixed glitches, bugs and extra features.
Nitish Dayal's Text Guides are great for those who like reading over watching.
Thorsten Frommen shares how he solved the exercises before viewing the answers.
Soyaine 写的中文指南包含了过程记录和难点解释
Aaron的语雀学习小组包含中文文档，案例和相关资料
乔木录制的讲解视频看中文讲解视频一起学习 Javascript30 吧! Javascript30 中 CSS/JS/HTML 视频讲解
Ayo Isaiah's Recaps and Lessons Learned.
Adriana Rios shares her alternative solutions.
Michael Einsohn publishes each challenge after watching the video once.
Mike Ekkel
Yusef Habib lessons and tricks learned, and a gh-page to see working all the mini-projects.
Amelie Yeh 30 lesson notes with things I've learned, and those important recaps. and directly view my demos here 🇹🇼😄
Winar的JavaScript30天挑战，记录练习过程，重难点和其他的解决方案。🎨
Rayhatron - walkthroughs, recaps, and lessons learned.
Andrei Dobra Full repo with lessons learned and a gh-page with all the exercises.
从零到壹全栈部落,春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。
Usmaan Ali's summary of the technical skills learned from each project. He's also posting them as separate blog posts here.
Axel's lessons learned and a showcase with the projects.
Chris 中文實戰，目標描述、過程紀錄。
Muhammad D. Ramadhan's blog. He shamlesly mixed his personal life with 30 day JavaScript challenge to increase his learning retention. He also summarised the challenge on one single page. Do not read his blog!
Lee Keitel's Blog includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
Dustin Hsiao 包含了各篇介紹、效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及gh-page。
GuaHsu - 紀錄各篇練習過程與心得，並嘗試擴充部分練習，也做了一個包含全部練習的介紹站🇹🇼
Daniela's completed challenges on GitHub Pages and Codepen :raised_hands: :muscle: :+1:
Dmitrii Pashutskii's code of all challenges on GitHub with Pages and review blog posts.
Abid Hasan's completion of all challenges. This was awesome!! Learned so much! :+1:
Yusong Notes Records Yusong JS 30 days note and demo. :star2:
Ding's Implementation code and online demo.
Herminio Torres lessons and tricks learned, and a gh-page to see working all the mini-projects.
Dmytro Borysovskyi says many thanks for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available here and demos can be reached by the link to gh-pages.👍👍👍
Kizito's follow along repo with completed challenges and notes.
VannTile's repository and GitHub Pages showcase. Thank you for a great ⌨️ experience.
Alex Kim completed all the challenges. You can check them out at GitHub pages.
Mikhail Thomas created JS30++ to add another level of challenge on top of this already great course.
Ramon Morcillo finished this awesome challenge!. You can see the showcase of his implementations on this link.
Santiago Escobar's repository and GitHub Pages showcase.
Harry Xie 紀錄 30 天的練習筆記在此連結.
Van Ribeiro's about demos and recaps. On GitHub Repo there's a summary about what was learned and researched.
Mugilan is currently doing this challenge. Check out his Repo and the Live Demo.
Eshan Vohra is currently doing this challenge. Check out my repo here.
RegusAl is currently doing this challenge. Check out my repo here.
Ayush Gupta's implementation of JavaScript30 challenge with some add-ons & updated design.
filipkowal Fix to flex panels (5th day) so the panels deactivate when clicked on another one.
Mo. Saif'snote on lessons learned and a gh-pages showcase for the projects.
Stiaannel's implementation of the Javascript30 challenge, with small design changes and a couple of extra features.
Kelly CHI's complete JavaScript30 challenges! Click the links to check demos and notes of each challenge. 🇹🇼 🌟
Issam Seghir added custom solutions and styles 🍧, improved performance, including fixed bugs/issus 💢. , added articles for each exercise 📝.
Khush Gupta's implementation of the JavaScript30 challenge with custom UI and extended logic.

Alternative Implementations

Here are some links of people who have done the tutorials, but in a different language or framework:

Thomas Mattacchione JavaScript 30 written in ClojureScript.
Dave Follett's blog series, A New Vue on #JavaScript30, where he explores re-implementing #JavaScript30 projects using Vue.
Akinjide Bankole used Node.js with Jade to solve the exercises.
Adrien Poly a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to Stimulus JS framework in a Rails App.
Bogdan Lazar all the JavaScript 30 written in TypeScript.
Will Wager another TypeScript implementation!
marcoSven solution suggestion for 10 - Hold Shift and Check Checkboxes.
ALMaclaine Javascript 30 written in Dart 2.0.
Connie Leung Javascript 30 written in Angular and RxJS.

A note on Pull Requests

These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.

The starter files + solutions will be updated if/when the videos are updated.

Thanks!

29.3K ·GitHub

JavaScript30

What is this?

This is Wes Bos's free '30 Day Vanilla JS Challenge': a collection of 30 small projects that teach JavaScript, HTML and CSS fundamentals without any frameworks or libraries, one project per day.

Is this a course, a library, or something else?

It is a code repository of starter files and completed solutions that accompany a free video course; there is no framework or package to import.

How do I use this repo?

Clone or download the repo, grab the matching video for each day from the course site, open the starter file for that day, and follow along by writing the vanilla JS yourself before checking the completed solution.

Do I need any frameworks or build tools first?

No, the whole point of the challenge is to use plain HTML, CSS and JavaScript with no frameworks, libraries or build tooling.

Are there other people's solutions I can compare mine to?

Yes, the README links dozens of community recaps, blogs, videos and completed repos in multiple languages (including many in Chinese) where learners share their notes and alternative implementations.

Can I do this challenge in a framework other than vanilla JS?

Not officially, but the Community section links reimplementations in Vue, TypeScript, ClojureScript, Dart, Angular/RxJS and Node/Jade for those who want a twist on the original exercises.

Why 'vanilla' JS specifically?

The challenge is designed to build core JavaScript fundamentals (DOM, events, APIs) without relying on any framework or library, so learners understand the underlying language itself.

What are similar projects?

30-Days-Of-React, vanillawebprojects, 30-Days-Of-JavaScript, html-css, curriculum, complete-javascript-course, 50projects50days, Sigma-Web-Dev-Course

Which topics is it in?

challenge, vanilla-javascript, html5, dom, curriculum, course, programming, javascript-library, beginner-friendly, css, learning-resources, html

Creator: wesbos
Size: 45.9 MB
Stars: 29.3K
Updated: CommitJun 01
Age: 9y
Commits · 90 Days

JavaScript30 README

JavaScript30

Community #JavaScript30 Content

Alternative Implementations

A note on Pull Requests

JavaScript30 (wesbos/JavaScript30)