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
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 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
๐Ÿ‘ฉโ€๐Ÿ’ป 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
๐ŸŒ† 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
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

Anshul Pandey
Anshul Pandey
@Anshulspiritual
IMPORTANCE AND CHARACTERISTICS OF GARUDA PURAN.

On the request of Garud, Bhagwan Vishnu, the rider of Garud, described this Puran based in Taksharya Kalp. It has ninteen thousand shlokas.
This book begins with a question and goes on to describe the Shrishti.


Then it describes the Surya puja vidhi, Diksha, Shradha, Nav vyuh puja, Vishnu sahastra naam kirtan and dhyan, Yog, Mrityunjay puja,Mala mantra, Shivarcha, Gopal puja, Trailikya mohan Shridhar puja, Vishnuarcha, Devpuja, Sandhya, Pancham tattva, Durga and Chakra Archana,

Maheshwar puja, Pavitra ropan puja, Murti dhyan, Vaastu maan, Prasaad, Sarvdev pratishtha, Ashtaang Yog, Daan dharm, Prayaschit, Narak description, Chakravyuh, Jyotish, Samudra shastra, Swar gyan, Tirth, Importance of Gaya, Different Manvantars, Pittra's, Varna dharma,

Dravya shudhhi, Samarpan, Vinayak puja, Grah yagya, Ashram, Shouch, Pret shudhi, Niti Shashtra, Vrat katha, Som and Surya vansh, Hari vansh, Bharat akhyan, Ayurveda, Medicine in Ayurveda, Rog nashak kavach, Garud Kavach, Traipur mantra, Prashna, difficulties in vyakaran,

Chhand shastra, Discipline, Snan Vidhi Tarpan, Bali Vaishvadev, Pavarna Karma, Sapindan, Dharmasar, Repentence of sins, Prati sankraman, Karmafal, Yug dharm, Vishnu bhakti, Method of Namaskaar to Hari, Narsingh strotras, Gyanamrit, Vishnuarchan strotras, Principles of Sankhya,
RELIGION
Vibhor Varshney
Vibhor Varshney
@nakulvibhor
On the occasion of youtube 20k and Twitter 70k members

A small tribute/gift to members

Screeners

technical screeners - intraday and positional both

before proceeding - i have helped you , can i ask you so that it can help someone else too

thank you

positional one

run - find #stock - draw chart - find levels

1- Stocks closing daily 2% up from 5 days
https://t.co/gTZrYY3Nht

2- Weekly breakout
https://t.co/1f4ahEolYB

3- Breakouts in short term
https://t.co/BI4h0CdgO2

4- Bullish from last 5

intraday screeners

5- 15 minute Stock Breakouts
https://t.co/9eAo82iuNv

6- Intraday Buying seen in the past 15 minutes
https://t.co/XqAJKhLB5G

7- Stocks trading near day's high on 5 min chart with volume BO intraday
https://t.co/flHmm6QXmo

Thank you
SCREENERS , ALL , NAKULSMIX
Advertisement
Matthew Panzarino
Matthew Panzarino
@panzer
New iPad Pro has Face ID, thinner bezels, squared off edges. A new touch sensitive Pencil that magnetically attaches to the edges. Thin enough to have a camera bump. Uses the XR's LCD cornering techniques.


The new 12.9" iPad Pro is physically smaller than the old one with the same screen size. It's roughly the same size as an 8.5 x 11 piece of paper. 5.9mm thick.

10 billion transistors in the A12X. 8-core CPU. 7-Core GPU. 35% faster single-core performance. 1000x faster GPU. iPad Pro is Xbox One S class GPU performance in "94% smaller" package, Ternus jokes.

Apple's silicon team is just dropping bombs every event.

live shot of Apple's silicon team


iPad Pro gets USB-C for up to 5K external displays and enables charging out to iPhones. Wild.
TECH
James \u270c\ufe0f
James โœŒ๏ธ
@jamesg_oca
Starting a startup is hard. This thread will contain some key advice I think are particularly noteworthy:

1. โ€œIf youโ€™re not embarrassed by the first version of your product, youโ€™ve launched too late.โ€ - @paulg The first version of my product was not great, but hey, it worked.

2. Don't build in a vacuum. You should build your product out in the open for the world to see. You will gain valuable feedback from users if you build publicly, and provide insights which ensure you are building a product users truly want. cc @rrhoover @sama

3. As a young founder, a massive weakness is age and the lack of credibility. Developing partnerships, trying to acquire customers. etc have all taken so much longer. In fact, when I mentioned my age, a few investors just walked away. cc @Jason

4. Work on what makes you feel excited. Working on something that you don't believe in will cause you to make rash product decisions, resulting in loss of user loyalty. @fredwilson

5. Take care of yourself. While doing the occasional code sprint can be incredibly useful, working 24/7 and disregarding your health just to build a great product is not a wise choice.
STARTUPS
Cole Escola
Cole Escola
@ColeEscola
If you know me, you know I don't like broadcasting details about my personal life on this website, but I have been getting asked why I'm not doing Christmas this year so I just wanna put this whole mess to bed. First of all, I don't agree with gay marriage... (1 of 4,625)

... full of dog food and she said, "I'm pretending this is ice cream! Treat me like a baby!" and proceeded to hump her own arm and I thought, "something tells me this isn't the real Norah Jones"... (117 of 4,625)

...cost me $7,000. I had to put it on two separate credit cards! It wasn't 'til I got to my car that I realized "that's way too expensive for one onion." But I didn't have time. Amanda Seyfried was begging to change my diaper... (1,001 of 4,625)

...another Christmas miracle. Mistletoe, stockings, sleigh bells, snow! All these things I have put up my ass. The taste of coffee... (2,974 of 4,625)

...I felt a *very* cold finger on my cheek and I turned around and I said, "Grandma?" and she goes, "Surprise, I'm alive and I work at Sears!" I said, "okay"... (3,047 of 4,625)
SOCIETY