Insha Profile picture
3 Jan, 10 tweets, 4 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 Web dev projects ranging from -> ( Beginner to advanced level ) for you.

A Thread πŸ‘‡πŸ»
πŸ—£ Learning Web Dev can be challenging. But as programmers, we always strive for better ways to be more effective and productive.

πŸ—£ Tutorials are great, but building projects is the best way to learn. Bridge the gap between theory and real-world code by working on projects.
πŸ“Œ Basic 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.
Check the code hereπŸ‘‡πŸ»

πŸ”—codepen.io/collection/oEE…
πŸ“Œ 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.

πŸ”— javascript30.com
πŸ“Œ 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

πŸ”— github.com/florinpop17/10…
πŸ“Œ Some more project ideas for you to build.

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

πŸ”— github.com/bradtraversy/5…
πŸ“Œ Some Advanced level JavaScript projects.

1- Portfolio Website
2- Chat Application
3- News Aggregator
4- Website Analytics
5- Native Application
6- Game
That's pretty much 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!

PDF

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

15 Oct 21
Top 13 JavaScript String methods every JS beginner should know!!

A Thread πŸ‘‡
A quick recap of JavaScript Strings:

Strings are used for storing and manipulating text in JavaScript.
Strings can be enclosed within either single quotes, double quotes, or backticks.

Here's a simple demonstration of creating Strings.
Some of the commonly used JavaScript String methods:

string.length
charAt(index)
concat()
replace()
split()
slice(start, end)
substring(start,end)
substr(start, length)
toLowerCase()
toUpperCase()
includes()
trim()
padStart() and padEnd()
Read 18 tweets
5 Oct 21
Are you a Front-end Developer?

If yes, these amazing websites are a goldmine for you!

A Thread πŸ‘‡
1️⃣ Responsively

A must-have DevTool for all Front-End developers that will make your job easier.
Develop responsive web apps 5x faster with this open-source tool!

πŸ“Žresponsively.app
2️⃣ Small Dev tools

FREE tools for developers like encoder/decoder, HTML/CSS/Javascript formatters, minifiers, fake or test data generators & much more.

πŸ“Žsmalldev.tools
Read 12 tweets
30 Sep 21
With the evergrowing demand for Technical writing.

You can earn 1000$/ week. πŸ’°πŸ“

Let's know-how? πŸ‘‡
⚑What is Technical Writing?

Technical writing is a writing discipline where you get to explain a particular topic to the audience in the easiest way possible!

If you've got a deep knowledge of something and want to amplify your voice- Technical writing is the way to go!
⚑There are a number of platforms that pay you well for writing πŸ’°

Some of them are:

1- sitepoint.com
2- digitalocean.com
3- css-tricks.com
4- auth0.com
5- hasura.io
6- contentlab.io

And many more!
Read 9 tweets
28 Sep 21
Hey there JavaScript Developers πŸ‘‹

Let's deep dive into the concept of Optional Chaining in JavaScipt.

With optional chaining, we can check to see if something exists and handle an error gracefully.

A Thread πŸ‘‡
What the heck is Optional chaining? πŸ₯΄

The optional chaining " ?." is a recent addition to the language which is a secure way to access nested object properties, even if an intermediate property doesn’t exist.
Optional chaining in JavaScript is very useful - we can access values without checking if the parent object exists. Instead of returning an error, it will return null or undefined.
Read 19 tweets
18 Sep 21
8 Crazy Underrated Websites for Designers that you should know.

A Thread πŸ‘‡
1️⃣ Wordmark

Wordmark helps you choose fonts by quickly displaying your text with your fonts.

πŸ“Ž wordmark.it
2️⃣ Figside

Ship Websites with Figma.
Figside is perfect for personal websites, portfolio, landing pages and more.

πŸ“Ž figside.com
Read 10 tweets
14 Sep 21
6 Underrated Websites that you should know.

A Thread πŸ‘‡
1️⃣ Gifrun

With this tool, you can convert any video into a GIF format.

πŸ“Ž gifrun.com
2️⃣ Uberduck

Uberduck.AI is a tool that allows you to make any text sound like it's been read by a celebrity or fictional character, and the results are incredible.

πŸ“Ž uberduck.ai/#mode=tts-basic
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

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(