ChatGPT just got one of its biggest updates yet with (@DanteTheAI)

Upload hundreds of YouTube videos in minutes🤯

Here's how: It was released to the public a few weeks ago and has already passed over 50,000 users.

And is the fastest way to learn ANYTHING.

Here’s how👇

Learning Web Development - Start with these:

⚡ 300+ Web Development Resources ⚡

A Mega Thread 🧵⇩ 📌 Youtube Channels For Learning Web Dev

> Traversy Media
> Web Dev Simplified
> FreeCodeCamp
> Kevin Povell
> Coder Coder
> DevEd
> Fireship
> The Net Ninja
> DevTips
> Programming with Mosh
> Amigos Code
> Google Developers
> Treehouse

Start bringing your web development skills to life!

10 HTML & CSS project ideas to Level-up your coding: Before you start building these projects I highly suggest you have some knowledge of HTML & CSS.

Here's a comprehensive guide of absolute minimum CSS you need to know 👇

https://twitter.com/Aakash_codes/status/1530497181438078976?s=20

Learning JavaScript? These resources might help 👇

◪ Websites

❯ MDN.​io
❯ JavaScript.​info
❯ FreeCodeCamp
❯ Learn-js. org
❯ htmldog. com/guides/javascript
❯ CodeCademy
❯ Educative
❯ Tutorials Point
❯ Odin Project
❯ samanthaming.​com
❯ Plurasight ◩ Youtube Channels

❯ Freecodecamp
❯ Traversy Media
❯ Ania Kubów
❯ Web Dev Simplified
❯ JavaScript Mastery
❯ James Q Quick
❯ The Net Ninja
❯ Developedbyed
❯ Programming with Mosh
❯ Akshay Saini
❯ Clever Programmer

How to stay consistent while learning to code

A Thread 🧵👇 ➊ Set Clear Goals

Trust me!

⬘ Define what you want to achieve in your journey and break it down into smaller, manageable goals

⬗ This will help you stay focused and motivated.

⬙ It could be learning a specific programming language, or completing a coding project.

⚡Collection of CSS CheatSheets⚡

⤷ CSS Flexbox
⤷ CSS Grid
⤷ CSS Selectors

... And more

A Mega Thread 👇 ‣ CSS Flexbox CheatSheet

What is Responsive Web Design?

➥ Why is it Important?
➥ Basic Principles
➥ Flexible Images
➥ Media Queries

A Thread 🧵 Liquid Layout: Historic web Layouts Overview

➥ If a web page contains text & if we try to resize the browser window, or display the page on a device with a smaller screen the browser will automatically reflow the text to fit the window.

➥ This is called Liquid or Fluid Layout

💡CSS TIP 💡

Do you know you can add a scroll snap to an element in a vertical or horizontal scroll?

with just 3 lines of CSS 🚀

👇✨ Here's an example 👇

⚡ How to get out of Tutorial Hell? ⚡

In a Practical & Super Simple way! 🧵⇩ Do you always learn with tutorials but can't make the step to do your own Project?

I have the same problems, before following these.

Here are a few tricks. 👇🏼

⚡HTML Attributes you might don't know about⚡

A thread 🧵 📌 Contenteditable

→ Contenteditable attribute is used to specify whether or not the content of an element is editable.

→ You can use this attribute on any HTML element.

{1/7}

⚡ Top 10 Online Code Editors, that everyone Should know ⚡

A Thread 🧵⇩ Why use an online code editor instead of a local machine's code editor?

» No Setup: You'll be coding straight in your browser, you won't have to, install & configure an IDE.

» Easy Collaboration: Most online code editors give you the option to share code directly with a link.

Discover a hidden world of color with CSS.

Let's learn how to create a Mesh Gradient...

A Small🧵⇩ 📌 What is a Mesh Gradient?

» Mesh Gradient generates a gradient image with an underlying 2d mesh and lets you edit the vertices & edges of the mesh to get the perfect gradient look.

» We can achieve that by layering numerous gradients resulting in muddied colors

Got your toes wet with HTML but not sure where to start with CSS?

Here's the absolute 𝗠𝗶𝗻𝗶𝗺𝘂𝗺 𝗖𝗦𝗦 you need to be a frontend developer 👇

A Thread 🧵⇩ ✤ CSS is a creative language, which can only learn through practice & there is no definite time to master it.

✤ Here are some specific CSS topics that I think everyone should know. 👇🏼

TailwindCSS is now the go-to solution for lightning-fast modern web development.

Here's a list of the best TailwindCSS resources for developers of any level

A Thread 🧵⇩ ⬘ What is Tailwind CSS?

↝ Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

↝ It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build designs without any annoying styles.

Opportunities to code, compete, and get creative:

It all comes together when you attend a hackathon.

So how do you find the right one?

Here are the top 7 websites to find amazing hackathon opportunities 👇 1. Major League Hacking [MLH]

🔗 https://mlh.​io/seasons/2023/events

{1/7}

✨ 100+ JavaScript Project Ideas from »» Beginner »» Intermediate »» Advanced »» ✨ 📌 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀

➀ Tip Calculator
➁ Word Counter
➂ Day of Week
➃ Number Guessing Game
➄ Height Conversion
➅ Coin Toss
➆ Rock Paper Scissor Game
➇ Background Color Changer
➈ Random Quotes Generator
➀⓪ Counter Project

⚡A Deep-Dive into 𝗖𝗦𝗦 𝗦𝗲𝗹𝗲𝗰𝘁𝗼𝗿𝘀 + 𝗨𝗻𝗶𝘁𝘀⚡

A Thread 🧵⇩ ✧ CSS concepts covered in this thread 🧵⇩

- All CSS Selectors
- CSS Units Explained + Cheatsheet
- CSS Variables
- CSS Variables Scope

Let's go!! ⇩

⚡Understand the Basics of CSS⚡

➥ CSS - Behind the CSS
➥ Cascade - The `C` in CSS
➥ Specificity
➥ Inheritance
➥ Examples + Infographics

A Thread 🧵⇩ 📌 Let's see how CSS Works behind the scenes! ⇩

⚡All about 𝗖𝗦𝗦 𝗢𝘃𝗲𝗿𝗳𝗹𝗼𝘄⚡

A Thread 🧵⇩ 📌 What is CSS Overflow?

⇨ CSS overflow is a property that controls what happens when content 𝗼𝘃𝗲𝗿𝗳𝗹𝗼𝘄𝘀 the boundaries of an element's box.

⇨ There are four values for the overflow property:

⤷ visible
⤷ scroll
⤷ auto
⤷ hidden

⚡100+ CSS Resources - You should know⚡

A Mega Thread 🧵⇩ 💭 Why this thread?

⬘ I got many DM's daily asking for learning resources, especially for CSS.

⬖ Here is a curation of all the resources in one thread!

⬙ If you have any suggestions or, feedbacks, share those with me. I am eager to hear from you.

Let's Go ⇩

⚡All about CSS Spacing⚡

➥ Types of Spacing
➥ Benefits of adding Spacing
➥ Concept of box-model + margin collapsing
➥ More Resources

A Thread 🧵 📌 What is CSS Spacing?

⇨ Spacing refers to the amount of space added between elements to add an optical adjustment.

⇨ CSS Spacing is used to describe spacing in CSS on the stylesheet using its different properties - such as margin, padding, gap, word-spacing, etc.