BC FRONTEND
Saved by @cur10uslearner

🛣 Beginner's Roadmap for Front-End

HTML & CSS → 👩‍💻 → JavaScript → 👩‍💻
↓
👩‍💻 ← React* ← 👩‍💻 ← Tailwind*
↓
TypeScript → 👩‍💻 → Next.js* → 👩‍💻 → 🏁

⇩

 What would we cover?

➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions
➊ HTML & CSS

⬘ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.

⬗ Don't over burden yourself to learn everything at once. It's a continuous subject.

⬙ Do not separate HTML from CSS. That's unnecessary.

https://t.co/XiPrKuQrnB
➋ JavaScript

JavaScript is essential. You should start with basics and move to complex subjects.

❍ JavaScript Syntaxes
(preferably ES6 onwards)
❍ HTML DOM API
❍ Event Handling
❍ Fetch API

https://t.co/MAkUW8h22i
➌ CSS Frameworks

CSS Framework is necessary if you are planning to be a professional developer.

There are so many options available.

❍ Tailwind CSS
❍ Bootstrap
❍ Chakra
❍ Bulma
❍ Foundation
❍ Skeleton
❍ Pure CSS

Start with anything. You can switch any time.
➍ UI Frameworks

To build a complex application, you will start using a UI framework sooner or, later.

They are,

❍ React
❍ Vue.js
❍ Angular
❍ Svelte

Go through their documentations. Choose according to your requirement, future interest.
➎ TypeScript

❑ JavaScript initially looks to be enough. But once projects become complex and bigger, you will notice how tough it's getting to handle.

❒ The biggest drawback (biggest advantage as well) of JavaScript is its dynamic typing. TypeScript is for your rescue.
➏ Server-side Frameworks

Client-side UIs (or, Single Page Applications) are

❍ Slow at startup
❍ Not fully SEO friendly
❍ Difficult to grow

Adapt to Server-Side frameworks.

❍ Next.js
❍ Gatsby
❍ NuxtJS
➐ Practice, Practice and, Practice

❑ Don't just read books and, articles or, watch videos. To learn effectively, you have to practice.

❒ Practicing after each step is very very important.

I am here sharing few practice sets.
➐.➀ Practice Questions

https://t.co/bteEMoeFMV
➐.➁ Practice CSS

https://t.co/WMbP2AtiBz
➐.➂.➀ Practice JavaScript

https://t.co/VgO5EM1ykb
➐.➂.➁ Practice JavaScript

https://t.co/B7ic7F6gR9
➐.➃ Build Projects

https://t.co/kNf0P0JlBk
➑ Other Skills

These are some mandatory skills

➀ Git
Knowledge of Git is must. You can use clients like GitHub, GitLab etc.

➁ Data Structures
You should learn basic data structures like Array, Linked List, Stack, Queue, Tree, Graph etc.
Below are some "nice-to-have" skills

➂ CSS Preprocessors

CSS is powerful but, sometimes we may need features which are not available in CSS. There, CSS Preprocessors help a lot.

We can choose from

❍ Sass
❍ LESS
❍ Stylus
❍ PostCSS
➃ Web APIs

Apart from DOM API and Fetch API, you may have to use many other APIs for building a great web application.

https://t.co/ISM6631s7N
➄ State Management Libraries

Managing data (state) in a UI application becomes a tough task when they become abundant.

You may consider to use
❍ Redux
❍ Mobx
❍ React Query
❍ xstate
➅ GraphQL

Traditional data fetching from server is a repetitive and slower operation.

GraphQL is a nice invention. It's grooming. Consider using any of the below GraphQL clients.

❍ Apollo Client
❍ Relay
❍ GraphQL Request
❍ AWS Amplify
❍ urql
➒ Frequently Asked Questions

➀ Can I learn JavaScript before HTML & CSS?
Yes. You can learn basic syntax.
For DOM API and Event Handling etc., you would need knowledge of HTML & CSS.
➁ Can I learn TypeScript before React & Tailwind?
Yes. This is for illustration only. You can always prepare these 3 in any order.

➂ Why Tailwind, but no Bootstrap?
It's just for illustration. You can choose any CSS Framework of your choice.
➃ Why no Angular?
It's just for illustration. You can choose any JS Framework of your choice.

➄ Why are only JS frameworks mentioned?
I have prepared this roadmap keeping JS frameworks in mind. You can chose any framework.
➅ There are no CSS Preprocessors?
CSS Preprocessors are helpful, no doubt. But, in most circumstances, you may not need them. Use them as per the need.

➆ Does 🏁 mean, it's finished?
No. The Web Development is evolving every day. So, don't stop.
Hey 👋

I am a Tech Educator from India 🇮🇳

Here, I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Interview Questions, Project Ideas and Roadmaps on Web Development, DSA and, Database.

To never miss anything,
➜ Follow ✅ me
➜ Keep 🔔 ON
*Final

Git ➘ DSA➘
HTML & CSS → 👩‍💻 → JavaScript → 👩‍💻
↓
👩‍💻 ← React* ← 👩‍💻 ← Tailwind*
↓
TypeScript → 👩‍💻 → Next.js* → 👩‍💻 → 🏁

More from Swapna Kumar Panda 

Swapna Kumar Panda
Swapna Kumar Panda
@swapnakpanda
🌆 60+ CSS Shorthand Properties: Cheat Sheet


💎 Direct Link for High-Resolution Image

If you liked this one, give a ⭐️ to this GitHub repo to support my work.

✧ Direct

What did we cover?

Here are those.

➀ all
➁ background
➂ background-position
➃ font
➄ text-align
➅ text-decoration
➆ text-emphasis
➇ list-style
➈ offset
➉ overflow

➀➀ inset
➀➁ inset-block
➀➂ inset-inline
➀➃ margin
➀➄ margin-block
➀➅ margin-inline
➀➆ padding
➀➇ padding-block
➀➈ padding-inline
20. overscroll-behavior
➁➀ scroll-margin
➁➁ scroll-padding

➁➂ border
➁➃ border-top
➁➄ border-right
➁➅ border-bottom
➁➆ border-left
➁➇ border-block
➁➈ border-block-start
30. border-block-end
➂➀ border-inline
➂➁ border-inline-start
➂➂ border-inline-end
CATAGORY JEE
Swapna Kumar Panda
Swapna Kumar Panda
@swapnakpanda
75+ SQL Interview Questions

⇩

Level: Beginner to Medium
Topics:

➊ Introduction to RDBMS
➋ Normalisation
➌ Introduction to SQL
➍ Tables and Fields
➎ Constraints
➏ DDL
➐ DML & DQL
➑ Joins

➊ Introduction to RDBMS

➀ What is a Database?
➁ What are different types of Databases?
➂ What is DBMS?
➃ What is difference between Database and DBMS?
➄ What is RDBMS?
➅ Which are popular RDBMS vendors?
➆ What is ACID property in Database?

➋ Normalisation

➀ What is Normalisation?
➁ Why is Normalisation necessary?
➂ What are the disadvantages of not performing Normalisation?
➃ What are different Normal Forms (NF)?
➄ What is Denormalisation?

➌ Introduction to SQL

➀ What is SQL?
➁ What is the use of SQL?
➂ Is SQL a programming language?
➃ What are the different parts of SQL?
Or,
➄ Group SQL commands in different parts.
➅ What is DDL?
➆ What is DML?
➇ What is DQL?
➈ What is DCL?
➉ What is TCL?
WEBDEV
Advertisement
Swapna Kumar Panda
Swapna Kumar Panda
@swapnakpanda
JavaScript First, Then React?
Or,
JavaScript ✛ React?

⇩

👩‍💻 Beginning Words

There are 3 approaches one can take to start React journey

➊ Complete JavaScript. Then, start React.

➋ Learn the essentials of JavaScript. Then, start React. Finally, learn advanced JavaScript.

➌ Start React. Learn JavaScript alongside.

💭 Why is this Thread?

⬘ JavaScript is a language while React is one JavaScript-based library.

⬗ Looking at the popularity of React, few people directly start learning React without much/prior knowledge of JavaScript. Is this a good idea?

⬙ Whichever approach you may take, it's important to know what JavaScript concepts will make your React journey effective and, smoother.

⬖ We will discuss those essential concepts in this thread.

📋 JavaScript Essentials for React

➊ Basics
➋ String Methods
➌ Array Methods
➍ Array Destructuring
➎ Array Spread
➏ Object Destructuring
➐ Object Spread
➑ Template Literals
➒ ES Modules
➓ APIs & Others
ALL
Swapna Kumar Panda
Swapna Kumar Panda
@swapnakpanda
👩‍💻 75+ SQL Practice Questions

❍ Oracle
❍ MySQL
❍ SQL Server
❍ PostgreSQL
❍ SQLite

⇩

Topics covered:

➊ Table
➋ Constraints
➀ Primary Key
➁ Unique
➂ Not Null
➃ Default
➄ Check
➅ Foreign Key
➌ Insert, Update, Delete
➍ Select

➊ Table

➀ Create a Table with a few fields by specifying their data types.

➁ Add a field to an existing table.

➂ Modify a field's data type of a table.

➃ Rename a field's name.

➄ Remove a field from a table.

➅ Rename a table's name.

➆ Drop a table.

➋ Constraints

➀ Primary Key
➁ Unique
➂ Not Null
➃ Default
➄ Check
➅ Foreign Key

➋.➀ Primary Key

➤ Create a Table with
➀ a single field as the primary key
➁ 2 or, more fields as the primary key
...

➤ Add a primary key to an existing table
➂ for a single field
➃ for 2 or, more fields
...
SQLBASICS
Swapna Kumar Panda
Swapna Kumar Panda
@swapnakpanda
30+ resources to learn

❍ SQL
❍ PL/SQL
❍ NoSQL

⇩

➊.➀ freeCodeCamp

@mike_dane via @freeCodeCamp

➤ SQL Tutorial for

➊.➁ Web Dev Simplified (WDS)

@DevSimplified

➤ Learn SQL in 60

➊.➂ Programming with Mosh

@moshhamedani

➤ MySQL Tutorial for

➊.➃ Kevin Stratvert

@kevstrat

➤ SQL Tutorial for
SQL

You May Also Like

Katie Mack
Katie Mack
@AstroKatie
Light travels at about 1 foot per nanosecond.

Hold your hand up 12 inches from your face: you’re seeing your hand as it was a nanosecond ago. Everything you look at is, to one degree or another, in the past. The farther away in space, the more ancient in time.

You can’t see the Sun as it is now, but you can see it as it was about 8 minutes ago. You can’t see Alpha Centauri now, but you can see it 4.4 years ago. You can see the Andromeda Galaxy as it was 2.5 million years in the past. And so on.

With powerful telescopes, we can see galaxies whose light has been traveling to us for more than 13 billion years. We see them shining in a universe that’s still young, where gravity has just begun to pull matter together into stars and galaxies.

We can see something even more distant, and more ancient, than the first galaxies. If we peer out far enough, in between the galaxies, we can see parts of the Universe that are so far away, it has taken the light from that distance almost the entire age of the cosmos to reach us.
SCIENCE
Respectable Lawyer
Respectable Lawyer
@RespectableLaw
There's been a lot of talk about the missionary killed by the natives of North Sentinel Island. They're probably so aggressive because of this weirdo, Maurice Vidal Portman. So here's a big thread about this creep and some facts from my decade-long obsession with the island.


The Sentinelese are often described as “uncontacted,” but this not strictly true. They had a very significant contact in 1880 with Commander Portman.

Portman, the black sheep third son of some minor noble, was assigned by the English Royal Navy to administer and pacify the Andaman Islands, a job he pursued from 1880-1900 with the full measure of his own perversity.


Portman was erotically obsessed with the Andamanese, and he indulged his passion for photography by kidnapping members of various tribes and posing them in mock-Greek homoerotic compositions.


During his 20 years in a sexualized heart of darkness, Portman measured and cataloged every inch of his prisoner’s bodies, with an obsessive focus on genitals.
SOCIETY
Advertisement
Aditya Todmal
Aditya Todmal
@AdityaTodmal
MASTER THREAD on Short Strangles.

Curated the best tweets from the best traders who are exceptional at managing strangles.

• Positional Strangles
• Intraday Strangles
• Position Sizing
• How to do Adjustments
• Plenty of Examples
• When to avoid
• Exit Criteria

How to sell Strangles in weekly expiry as explained by boss himself. @Mitesh_Engr

• When to sell
• How to do Adjustments
• Exit


Beautiful explanation on positional option selling by @Mitesh_Engr
Sir on how to sell low premium strangles yourself without paying anyone. This is a free mini course in


1st Live example of managing a strangle by Mitesh Sir. @Mitesh_Engr

• Sold Strangles 20% cap used
• Added 20% cap more when in profit
• Booked profitable leg and rolled up
• Kept rolling up profitable leg
• Booked loss in calls
• Sold only


2nd example by @Mitesh_Engr Sir on converting a directional trade into strangles. Option Sellers can use this for consistent profit.

• Identified a reversal and sold puts

• Puts decayed a lot

• When achieved 2% profit through puts then sold
OPTIONSLEARNINGS , ALL , OPTIONS STRATEGY
Vibhu Vashisth
Vibhu Vashisth
@VIBHU_Tweet
शमशान में जब महर्षि दधीचि के मांसपिंड का दाह संस्कार हो रहा था तो उनकी पत्नी अपने पति का वियोग सहन नहीं कर पायी और पास में ही स्थित विशाल पीपल वृक्ष के कोटर में अपने तीन वर्ष के बालक को रख के स्वयं चिता पे बैठ कर सती हो गयी ।इस प्रकार ऋषी दधीचि और उनकी पत्नी की मुक्ति हो गयी।


परन्तु पीपल के कोटर में रखा बालक भूख प्यास से तड़पने लगा। जब कुछ नहीं मिला तो वो कोटर में पड़े पीपल के गोदों (फल) को खाकर बड़ा होने लगा। कालान्तर में पीपल के फलों और पत्तों को खाकर बालक का जीवन किसी प्रकार सुरक्षित रहा।

एक दिन देवर्षि नारद वहां से गुजर रहे थे ।नारद ने पीपल के कोटर में बालक को देख कर उसका परिचय मांगा -
नारद बोले - बालक तुम कौन हो?
बालक - यही तो मैं भी जानना चहता हूँ ।
नारद - तुम्हारे जनक कौन हैं?
बालक - यही तो मैं भी जानना चाहता हूँ ।

तब नारद ने आँखें बन्द कर ध्यान लगाया ।


तत्पश्चात आश्चर्यचकित हो कर बालक को बताया कि 'हे बालक! तुम महान दानी महर्षि दधीचि के पुत्र हो । तुम्हारे पिता की अस्थियों का वज्रास्त्र बनाकर ही देवताओं ने असुरों पर विजय पायी थी।तुम्हारे पिता की मृत्यु मात्र 31 वर्ष की वय में ही हो गयी थी'।

बालक - मेरे पिता की अकाल मृत्यु का क्या कारण था?
नारद - तुम्हारे पिता पर शनिदेव की महादशा थी।
बालक - मेरे उपर आयी विपत्ति का कारण क्या था?
नारद - शनिदेव की महादशा।
इतना बताकर देवर्षि नारद ने पीपल के पत्तों और गोदों को खाकर बड़े हुए उस बालक का नाम पिप्पलाद रखा और उसे दीक्षित किया।
ALL
\U0001f1fa\U0001f1f8I Support Our Military & Law Enforcement\U0001f1fa\U0001f1f8
🇺🇸I Support Our Milita...
@TheWiseOwl_AZ
1. We were informed that Tier 4B (us, the Internet Group) would receive 800# notification on Wed. 16 Dec. (A Shotgun Release of liquidity started on Mon. 14 Dec.).

Redemption Center personnel were scheduled to work for the next nine days from 8:30 am to 8:30 pm until...

2. ... Dec. 24, when they would close at 5:30 pm.

The general public would begin exchanging at the new International Rates on the first banking business day after the Christmas Holiday.

A. The RV, NESARA, GESARA, Restored Republic and Martial Law

3. According to Charlie Ward we began the Ten Days of Darkness on Tues. 15 Dec. The Ten Days would finish Dec. 24 Christmas Eve with the US going into NESARA and then the rest of the world would go straight into GESARA on 1 Jan. 2021.

4. Every single country and territory has agreed to GESARA. The UK government corporation was liquidated in Oct. last year and it was finalized last week. France has started breaking up their Parliament. Everything needed for implementation of NESARA/GESARA was finished.

5. Trump’s Christmas present: In a recent Executive Order President Trump declared that all government agencies (except for essential ones) permanently close on Dec. 24 2020. Trump had that authority since we were already under Martial Law (the US had been functioning under...
WAR