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
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
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
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
๐ŸŒ† 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 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

You May Also Like

Aditya Todmal
Aditya Todmal
@AdityaTodmal
12 TRADING SETUPS which experts are using.

These setups I found from the following 4 accounts:

1. @Pathik_Trader
2. @sourabhsiso19
3. @ITRADE191
4. @DillikiBiili

Share for the benefit of everyone.

Here are the setups from @Pathik_Trader Sir first.

1. Open Drive (Intraday Setup explained)


Bactesting results of Open Drive


2. Two Price Action setups to get good long side trade for intraday.

1. PDC Acts as Support
2. PDH Acts as


Example of PDC/PDH Setup given
STOCKLEARNINGS , LEARNSTOCKTRADING
Anu Satheesh
Anu Satheesh
@AnuSatheesh5
Ameda Temple
Ernakulam, Kerala ๐Ÿšฉ
#keralatemples

Ameda Ksetram is located in the banks of Vembanad Lake. Temple is very unique and Powerful Sarpa Kavu.
Parashurama did Prathishta here. Vilakku which was lighted by Parasurama is still seen inside the temple.


The oil from this lamp is given to bhakthas for recovering from illness.

Sthala puranam says that, Once, when Parashurama was travelling through Kerala, he reached this place. As it was evening, he stepped into the Lake for Sandhya Vandanam
At that Sapthamathrukkal ๐Ÿ‘‡


(Brahmini, maheshwari, kowmari, vaishnavi, varahi, indirani and chamundi) were travelling there on a tortoise through the water. The tortoise was unable to move, because the Water had made its way for Parashurama. The place where the tortoise became Still came to be known as ๐Ÿ‘‡


Aama Ni Nidayam' ( Aama means tortoise) and later become โ€˜Amedaโ€™. Parashurama came to know about the journey of Sapthamathrukkal. Thus, he did Prathishta for the Sapthamathrukkal here.
7 forms of Aadi Parashakthi are Sapthamathrukkal. Veerabhadra and Ganesha have Sannidhi here.


The main Garbhagriham in the temple is the Sapthamathrukkal. There are Sannidhi to Nagas, Nagayakshi and Vishnu too. Sarparadhana or snake worship is done here. Naga Panchami is famous here. Those who have Naga Dosham come here and get relieved of their Doshas.
๐Ÿ•‰๐Ÿ™๐Ÿ•‰
ALL
Advertisement
WORLD OF SANATAN DHARMA
WORLD OF SANATAN DHARM...
@world_sanatan
WHY BABUR NEVER TRIED TO ATTACK SRI KRISHNADEVARAYA ?

A๐Ÿงตu must read

It is very well known that Babur considered Krishna Dev Raya as the strongest ruler of the entire subcontinent, and Vijayanagar empire the strongest during that time in India.

1/10


The Vijayanagar empire reached its peak during 1509-1529 around the reign of Krishna Dev Raya.

Vijayanagarโ€™s famed elephant brigade ๐Ÿ‘‡

2/10


At his command there were over 50000 elite troops with a regiment of Portuguese gunners and 3200 cavalry with 600 elephants.

3/10

Along with that more than four hundred thousand ( four lakh) peasant levies and irregular military made this empire one of the largest in all of South Asia.

A typical Vijayanagar levie soldier ๐Ÿ‘‡

4/10


During Baburs invasion, Krishna Dev Raya ruled supreme in all of deccan.

In fact, in an all our brawl, Krisha Dev Raya will beat Babur fair and square.

Babur could muster at max 50000 troops with 50 canons.

While Krishna Dev Raya had these numbers in Hampi alone

5/10
ALL
WORLD OF SANATAN DHARMA
WORLD OF SANATAN DHARM...
@world_sanatan
EVOLUTION OF CROWNS

The ancient Indian kings called a head crown as a Mukut and it would mostly constitute of a golden ornamental headgear like an oval cap with gems.

Sometimes it would also include a halo circle to show the divinity of the king

1/7


As it was considered that kings were appointment by the gods themselves. Example the kings of mewar considered themselves to be the โ€˜Diwan of eklingji')

But in most cases very few Mukut with halo effect have been found.

2/7

Samudragupta in the gupta era coin. You can see the helmet like headwear on him.

Till gupta era the solid golden head wear was used in most days of the monarch.

But since the onset of 8th century it reduced in usage and was now used only as a ceremonial headwear.

3/7


Whereas earlier the Maharaja had to wear the mukut whenever his court was in session.

Still mukut was being used prominently for ceremonial activities till recent times.

Maharaj Dahir of Sindh๐Ÿ‘‡

4/7


But as times past the style of headwear also changed.

The kings mostly wore turbans ordained with pearls and gems while rarely anyone wore a true Mukut after 16th century.

Portrait of Sri Krishna Dev Raya๐Ÿ‘‡

5/7
ALL
Anu Satheesh \U0001f1ee\U0001f1f3
Anu Satheesh ๐Ÿ‡ฎ๐Ÿ‡ณ...
@AnuSatheesh5
Eri Katha Ramar Temple
Maduranthakam

Eri Katha Ramar temple is located at Maduranthakam near Chengalpattu of Tamil Nadu. Beautiful Kodanda Ramar of about 8ft holding Ma Sita's hand & with Lakshmana. This temple story is connected with Sri Ramanujar.
@LostTemple7


It was here Periya Nambigal performed Pancha Samskaaram to Ramanujar under Magizham tree.
Sri Ramanujar was on his way from Kanchipuram to meet Sri Periya Nambigal at Sri Rangam to become his disciple. Sri Periya Nambigal also started towards Kanchipuram to meet Ramanujar.


They both met here at Madurantakam.
Small Mandapam where Ramanujar undertook Pancha Samskaaram is seen in the temple. Separate sannidhi is for Periya Nambigal & Ramanujar & this is the only temple where Ramanujar is seen as a Grahastha (married person) and not in Sanyasa kolam.


Story says about an incident which occurred during British rule. The Madurantakam lake bund was about to breach, due to heavy rain & village will be flooded if it happened. Dt collector was Cl. Lionel Blaze who took efforts to protect the bund & asked for the piles of stones


in the temple to protect it. But it was meant for Janakavalli ( sita) Thayar sannidhi which faced shortage of fund. Lionel Blaze prayed Sri Ramar to save the bund and if so he will provide fund to construct.
That night he saw in the lightning, Sri Rama & Lakshmana walked along
ALL