All activity
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Interactive TypeScript tutorial.
Made for developers with intermediate JavaScript experience.
Learn TypeScript
Learn TypeScript step by step in an interactive environment
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Jad Joubran
left a comment
Hey Product Hunt!
As an educator, I kept hearing the following questions:
- "What project should I build to add to my portfolio?"
- "What should I build to practice my JavaScript knowledge?"
That's exactly why I built "Learn JavaScript Projects". A collection of free project ideas, designs, and instructions that you can use to enrich your portfolio.
For each project, you can read the...
![Learn JavaScript Projects](https://ph-files.imgix.net/af6618c5-1787-488a-b8d1-5c28b89e1017.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn JavaScript Projects
Free JavaScript Projects & Figma Designs for Your Portfolio.
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Build projects from scratch to practice your JavaScript skills. You can use the projects you build in your portfolio to get a job as a JavaScript developer. We provide you with the instructions and Figma designs for free.
![Learn JavaScript Projects](https://ph-files.imgix.net/af6618c5-1787-488a-b8d1-5c28b89e1017.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn JavaScript Projects
Free JavaScript Projects & Figma Designs for Your Portfolio.
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
This interactive knowledge map shows most of the topics you need to know about when learning React (with hooks).
![React Knowledge Map](https://ph-files.imgix.net/7123e199-43fc-4469-b195-fff003512791.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
React Knowledge Map
Interactive React knowledge map
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
I've built this interactive knowledge map (available in radial and linear mode) to help you visualise the topics you need to learn when getting started with programming.
![Programming Knowledge Map](https://ph-files.imgix.net/a3c1a4a0-e39f-42fc-97cb-b1395205ee66.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Programming Knowledge Map
Interactive knowledge map for beginners (in JavaScript)
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
The easiest way to learn React 18 with flashcards.
![React 18 interactive tutorial](https://ph-files.imgix.net/267e872c-dc0c-4b90-8c72-bb1094707e92.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
React 18 interactive tutorial
Learn React 18 interactively
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Semantics and accessibility have been frequently neglected on the web. This interactive platform guides you step by step into learning modern HTML CSS that is semantic and accessible.
![Learn HTML CSS](https://ph-files.imgix.net/ab55132b-84db-4636-b2d2-dca6f619ecfa.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn HTML CSS
Interactive platform for semantic and accessible HTML CSS
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
I've built this Interactive JavaScript Knowledge Map that allows developers to get a glance at _most_ topics in modern JavaScript.
![JavaScript Knowledge Map](https://ph-files.imgix.net/7656d7e2-7b06-4786-b4a3-6eb241314240.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
JavaScript Knowledge Map
Interactive knowledge map for JavaScript
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Jad Joubran
left a comment
@mattzeunert That's amazing! I've also had similar issues when consulting for clients and I had to copy the source code and check manually what it's made up of. Thank you so much!
![HTML Size Analyzer](https://ph-files.imgix.net/04cb189e-79d2-41db-824f-67b7a1b805c1.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
HTML Size Analyzer
Identify the cause of bloated HTML code
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
At the beginning of 2021, I started re-writing the curriculum of learnjavascript.online and I'm happy to announce that it's now live!
👉 75 chapters of modern JavaScript
👉 Learn step by step with flashcards
👉 Interact with real APIs
👉 Lots of DOM + Fetch projects
![Learn JavaScript](https://ph-files.imgix.net/df39ad8d-84a0-4365-917f-5c0572c39c74.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn JavaScript
Learn JavaScript with guided tests and flashcards
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn in an interactive environment with interactive lessons, challenges & flashcards.
This is the right website for you if you've *never* written a line of code before.
![Learn Programming](https://ph-files.imgix.net/fe344e48-be14-4bca-9ee2-b0a9661769c1.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn Programming
The easiest way to learn Programming for absolute beginners
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Jad Joubran
left a comment
Hey PH, this is what I've been working for the past few months, excited to hear what you think!
![React Tutorial](https://ph-files.imgix.net/fa2ec642-7030-471a-a57d-14b9066331a9.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
React Tutorial
Interactive in-browser React Course with flashcards
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn in an interactive environment. Understand how React works not just how to build with React.
![React Tutorial](https://ph-files.imgix.net/fa2ec642-7030-471a-a57d-14b9066331a9.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
React Tutorial
Interactive in-browser React Course with flashcards
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Learn in an interactive environment. Study short lessons and then practice in an intuitive environment based on Tests.
Learn JavaScript
The easiest way to learn & practice modern JavaScript
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Webdash Hue plugin is a webdash plugin that lets you manage your Philips hue lights from the comfort of your web dashboard!
![Webdash Hue plugin](https://ph-files.imgix.net/0cd69e83-17a3-46e0-8889-9162a6dd52e1.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Webdash Hue plugin
Control your philips hue straight from the dashboard
![Jad Joubran](https://ph-avatars.imgix.net/706384/36adf3b0-141d-4710-8ff5-67cdf4320353.jpeg?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Webdash helps you visualize, monitor & manage your web project right in the browser using community-driven plugins
Webdash is open source, which means you can create your own custom plugins in Webdash.
![Webdash](https://ph-files.imgix.net/2122c3da-3131-4c9e-802c-c15e1d6ddfe7.png?auto=compress&codec=mozjpeg&cs=strip&auto=format&w=48&h=48&fit=crop&frame=1)
Webdash
A customizable web dashboard for your web projects