Insha Profile picture
15 Jul, 9 tweets, 3 min read
Do you know what's the best way to learn any programming language?

- The Answer is by building lots of projects 💪

Here's a complete list of projects ranging from -> ( Beginner to advanced level ) for you.

A Thread👇
Html and CSS projects. 💪

1- A Tribute Page
2- Survey Form
3- Technical Documentation Page
4- Personal Portfolio
5- Product Landing Page

✅ When I was learning HTML and CSS I've tried all of them. You can check the code here👇

✅ Responsive Website using HTML and CSS


✅Build a Responsive Grid CSS Website Layout From Scratch


✅Basic Parallax Website With HTML & CSS

JavaScript Projects for (Beginners -Intermediate)💪

✅Sharpen your JavaScript skills by building 15 projects using plain JavaScript without frameworks.


✅Javascript30 by WesBos is highly recommended.

✅Build 10 Projects in 10 Hours -> By Florin Pop 💪

1-Countdown Timer
2-Quiz App
3-Recipe App
4- Notes App
5-ToDo App
6-Movie App
7-GitHub Profiles App
8-Drawing App
9-Password Generator
10-Weather App

✅ Some more project ideas for you to build.

Build 50+ mini web projects using HTML, CSS & JS-> By Brad Traversy

Some Advanced level - JavaScript projects. 💪

1- Portfolio Website
2- Chat Application
3- News Aggregator
4- Website Analytics
5- Native Application
6- Game
That's all for this thread. I've curated some of the best projects that you should definitely try as a web developer. If you found it useful, consider following me - @insharamin for more Web dev-related content. 😊💪

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Insha

Insha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Insharamin

12 Jul
Mastering SEO optimization can be hard, especially if you’re just starting out.

Here's a compiled list of 7 Free SEO Tools for you.

A Thread👇
SEO tools investigate the potential of Web pages for high placement on search engine ranking pages.
They provide information on backlinks and keywords as well as insights into SEO competition on the Internet.
1️⃣ Google Search Console

Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results

Read 10 tweets
8 Jul
Resources to excel in your Tech interview.

A Thread 👇
1️⃣ Tech Interview Handbook

This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. 📎…
2️⃣ JavaScript Algorithms

This repository contains JavaScript-based examples of many popular algorithms and data structures. Algorithms and data structures implemented in JavaScript with explanations and links to further readings. 📎…
Read 11 tweets
6 Jul
9 Awesome CSS layout generators for beginners.
(Grid and Flexbox)

A Thread 👇
Grid-Based Layout Generator

1️⃣ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code. 📎
2️⃣ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want. 📎
Read 11 tweets
3 Jul
7 meta tags to improve the optimization of your site.

A Thread 👇
Why Meta tags are important?

-Meta tags are invisible tags that provide data about your page to search engines and website visitors.
-They can be optimized to highlight the most important elements of your content and make your website stand out in search results.
1️⃣ Title tag

Title tags are used by search engines to determine the subject of a page and are one of the first things that users notice in the SERPs.

Try to keep your title tag clear, descriptive, and usually not more than 55 characters.
Read 10 tweets
30 Jun
8 Essential Chrome extension for Web Developers.

A Thread 👇
1️⃣ Fake Filler

A form filler that fills all inputs on a page with fake/dummy data. This productivity-boosting extension is a must for developers and testers who work with forms.
2️⃣ Window Resizer

This extension re-sizes the browser's window to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
Read 10 tweets
29 Jun
YouTube Channels to master Data Structures and Algorithms.

A Thread 👇
1- DS & ALGO -: Jenny's Lectures 📎 Image
2-Algorithms and Data Structures -: Freecodecamp 📎 Image
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!