Tweet

Insha

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👇

📎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

@insharamin

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. 😊💪

https://twitter.com/Insharamin/status/1415570149948669954?s=20

Back to the top. 📌

https://twitter.com/Insharamin/status/1415570149948669954?s=20

• • •

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

This Thread may be Removed Anytime!

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

More from @Insharamin

Insha

@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

📎search.google.com/search-console…

Read 10 tweets

Insha

@Insharamin

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. 📎github.com/yangshun/tech-…

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. 📎github.com/trekhleb/javas…

Read 11 tweets

Insha

@Insharamin

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. 📎layoutit.com

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. 📎griddy.io

Read 11 tweets

Insha

@Insharamin

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

Insha

@Insharamin

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.
📎chrome.google.com/webstore/detai…

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.
📎chrome.google.com/webstore/detai…

Read 10 tweets