BC WEBDEV

Saved by @meera_w13

Pratham
@Prathkum 3 years, 8 months ago 533 views

Save to PDF Share See On Twitter

12 websites that will help you learn web development faster (completely free): 🧵

1. How HTTP Works

Everything you need to know about HTTP based system.

🔗 https://t.co/gVZS4RzS1a

2. 30 Days of Node

Learn Node step by step with interactive examples and code snippet in 30 days.

🔗 https://t.co/9nbtMiNB1C

3. How DNS Works

Learn what happens when you type a website address in your browser

🔗 https://t.co/SqMRNnDbc3

4. Git

Check out this excellent free website to learn git visually.

🔗 https://t.co/rQJMISBDfS

5. JavaScript

Visualize JavaScript code and learn the workflow.

🔗 https://t.co/IDdTvgvR2f

6. Algorithm Visualizer

Algorithms are always a little tricky to learn. But this website can make it easier.

🔗 https://t.co/KKEmamuWdi

7. Cryptozombies

Learn to code Blockchain DApps by building simple games.

🔗 https://t.co/5BDXNsRg9E

8. useWeb3

useWeb3 is a platform for developers to explore and learn about Web3.

🔗 https://t.co/E3rS2QKDUl

9. Sorting Algorithms

Learn sorting algorithms visually and intuitively.

🔗 https://t.co/XxzwBal6Uz

10. Pull Request

Code Review as a Service.

Get on-demand code reviews from expert engineers and developers.

🔗 https://t.co/ItSexM7HRV

11. Learn Anything

Search anything here, and it will show you the correct roadmap with all the necessary resources

🔗 https://t.co/euUPzwhKXd

12. JS Robot

Learn JavaScript by playing games.

🔗 https://t.co/ZuilVzHScD

Thanks for checking this out.

You can check out my other threads at @PrathKum. I generally write about web development. 😁

More from Pratham

Pratham
@Prathkum

5 great gradient background sites for every web developer and designer 🎨

🧵👇🏻

1️⃣ uiGradients

- A handpicked collection of beautiful color gradients for designers and developers.

🔗 https://t.co/EainhiePop

2️⃣ Eggradient

- Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends

🔗 https://t.co/F0uYVsZbA4

3️⃣ Mesh Gradients

- Create beautiful gradient like aurora UI in few clicks

🔗 https://t.co/MV8PT7q3Kz

4️⃣ CSS Gradient

- Create beatiful gradeint either linear or radial on different angles

🔗 https://t.co/dlCExilHAT

Pratham
@Prathkum

7 amazing websites that will help you improve your CSS skills

🧵👇

1️⃣ Learn to code HTML and CSS

- Learn how to build beautiful and intuitive websites by way of clear and organized lessons

🖇️ https://t.co/bl2rx2q8vk

2️⃣ CSS reference

- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content

🖇️ https://t.co/XAlj33g1Zk

3️⃣ CSS tutorial

- These tutorials on web design & CSS makes learning this stuff fun and easy

🖇️ https://t.co/y9vAj6fMGk

4️⃣ CSS Layouts

- This site teaches the CSS fundamentals that are used in any website's layout.

🖇️ https://t.co/n4EGLScpDF

Advertisement

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

10 HTML and CSS tips that you need to know😉

🧵👇🏻

1️⃣ Customize the text selection

- The ::selection pseudo-element matches the portion of an element that is selected by a user.

2️⃣ Range Input

- You can change the styling of input type="range"

3️⃣ Custom Scrollbar

- Customize the scrollbar of your website in few minutes

4️⃣ Scrollable element

- If you have some fixed size element then use overflow: auto. It will convert your element into scrollable element

Pratham
@Prathkum

React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods. Instead we have a powerful hook called useEffect

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first

3/15

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render. Consider this piece of code and check the output in next tweet

{ 4 / 15 }

As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }

Pratham
@Prathkum

Use these 5 websites to learn web development for free in 2023 (take a look):

1. Codedamn

All-in-one platform for learning web development:

• Hands-on practice and projects bundled
• Video content along with interactive labs, quizzes, and articles
• Every course comes with a certificate
• code brushes AI in playgrounds

🔗 https://t.co/mXmUtJZnOU

2. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/MjHNsLvkiL

3. RapidAPI Comics

Learn API development with RapidAPI Comics (sketch notes and fun analogies).

🔗 https://t.co/KONorFomgu

4. JS Visualizer 9000

Learn JavaScript by visualizing your code.

🔗 https://t.co/9NId4GjGAq

More from Webdev

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?

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵

Grid is used for making complex web design layouts more easily as it's not so hard to master

Using Flex you can make only 1D layout but Grid gives you full power of creating 2D layout

Let's start

{ 2 / 21 }

First things first, start with giving the display property "grid" to the container element or parent element

{ 3 / 21 }

Nothing will change after adding display: flex; in the parent container becuase we need to define the width of columns. In order to set that columns width we have gird-template-columns property

{ 4 / 21 }

Let's start with defining the width of our columns.

For example, let's say I need two columns of width 60% and 40% respectively

grid-template-columns: 60% 40%;

{ 5 / 21 }

Advertisement

George Moller
@_georgemoller

🌟 2022 React developer roadmap.

Pratham
@Prathkum

My 8 handmade sketch notes you won't want to miss (learn web development for free):

1. What is semantic HTML

2. CSS Positioning

3. CSS Box-model

4. JavaScript Array Methods

Pratham
@Prathkum

Use these 5 websites to learn web development for free in 2023 (take a look):

1. Codedamn

All-in-one platform for learning web development:

• Hands-on practice and projects bundled
• Video content along with interactive labs, quizzes, and articles
• Every course comes with a certificate
• code brushes AI in playgrounds

🔗 https://t.co/mXmUtJZnOU

2. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/MjHNsLvkiL

3. RapidAPI Comics

Learn API development with RapidAPI Comics (sketch notes and fun analogies).

🔗 https://t.co/KONorFomgu

4. JS Visualizer 9000

Learn JavaScript by visualizing your code.

🔗 https://t.co/9NId4GjGAq

You May Also Like

$Andrey \uf8ff Azimov$

Andrey  Azimov
@AndreyAzimov

The best way to know if people like your product is NOT:

- Have a lot of emails in the waiting list
- Become #1 on PH
- Become #1 of HN or Reddit
- Have people that saing "I'll pay"
- Have a lot of free users

The best way to know if they're actually pay for it.

The only thing that matters is your product providing a value, and you can't know this until people will pay money for it.

We can have a first signal of a product/market fit after the launch by check how many sales we've got in the first 24h. Some scale:

200+ This has a high potential.
100+: This has a potential.
50+: Some people need it.
10+: People almost don't need it.
0+: People don't need it.

This is for a single time payment product. For a subscription probably it should be less because people hate subscription.

And obviously, you should have a lot of traffic like 3-5k+.

Here is a stat for my products (macOS apps) for the first 24h after the launch:

$Emperor\U0001f451$

Emperor👑
@EmperorBTC

Technical Analysis Masterclass- Part 2

'Entering the trade'

Entering a trade without ascertaining a certain things is gambling.

In this masterclass we will learn the pre-requisites to enter a trade.

DON'T ENTER A TRADE WITHOUT DETERMINNG THE FOLLOWING.

Please share.

We understand what reward to risk (popularly called risk to reward) is.
It will be denoted by R:R.

We will also try to bust a few myths about R:R and how to avoid losing trades.

Before entering a trade, you need to determine 3 things.

1. Entry trigger
2. Stop loss
3. Target

1. Entry trigger = Reasons for entering a trade. There could be multiple reasons or a single reason for entry.

Generally a set of reasons AKA confluence is a higher probability trade and a generally a safer entry.

Example of an entry trigger.

2. Stop Loss.

The price in the opposite direction of the trade where the trade is exited, at a loss.

At this level, the reason for the entry becomes invalidated according to TA and the price can then move in the opposite direction, probabilistically.

3. Target is the possible price level that the asset might touch based on previous trends or confluence AND where a possible reversal could occur.

Target is the next path of least resistance from where the price might reverse.

We will always ONLY use TA to determine all 3.

Advertisement

Jonathan Ware
@ReassessHistory

So when it first appeared in Normandy, the Sherman Firefly and it's meaty 17 pounder represented an ideal combo of reliable chassis, great gun and devastating firepower right?

Ummm...

Truth is a bit more complex. /1
#WW2 #SWW #History

Deliveries of Firefly to units only commenced in April 1944,
just a few weeks before Overlord & left minimal time for familiarisation.

Armoured Regiments mostly utilised Fireflies on a basis of 1 per troop of 4 tanks. /2

Finally each armoured regiment troop had access to integral, meaty, anti-tank firepower capable of dealing serious damage to any German AFV likely to be encountered. /3

The dual purpose 75mm gun was quite capable of laying down a reasonable HE shell or AP round for dealing with Panzer III or IV.

Firefly's 17 Pounder had.... problems with HE, but excelled at tank killing. So Tigers and Panthers would need to be wary. /4

Firefly's design history dated back to March 1943 when the General Staff published "Policy on Tanks" which effectively stated the majority of tanks should have a good HE weapon and...

[See image below] /5

Sahil
@sahilypatel

A list of cool websites you might now know about

A thread 🧵

1) Learn Anything - Search tools for knowledge discovery that helps you understand any topic through the most efficient

2) Grad Speeches - Discover the best commencement speeches.

This website is made by me

3) What does the Internet Think - Find out what the internet thinks about anything

4) https://t.co/vuhT6jVItx - Send notes that will self-destruct after being read.

antifa.drone
@antifa_drone

Fake chats claiming to be from the Irish African community are being disseminated by the far right in order to suggest that violence is imminent from #BLM supporters. This is straight out of the QAnon and Proud Boys playbook. Spread the word. Protest safely. #georgenkencho

There is co-ordination across the far right in Ireland now to stir both left and right in the hopes of creating a race war. Think critically! Fascists see the tragic killing of #georgenkencho, the grief of his community and pending investigation as a flashpoint for action.

Across Telegram, Twitter and Facebook disinformation is being peddled on the back of these tragic events. From false photographs to the tactics ofwhite supremacy, the far right is clumsily trying to drive hate against minority groups and figureheads.

Be aware, the images the #farright are sharing in the hopes of starting a race war, are not of the SPAR employee that was punched. They\u2019re older photos of a Everton fan. Be aware of the information you\u2019re sharing and that it may be false. Always #factcheck #GeorgeNkencho pic.twitter.com/4c9w4CMk5h
— antifa.drone (@antifa_drone) December 31, 2020

Declan Ganley’s Burkean group and the incel wing of National Party (Gearóid Murphy, Mick O’Keeffe & Co.) as well as all the usuals are concerted in their efforts to demonstrate their white supremacist cred. The quiet parts are today being said out loud.

There is a concerted effort in far-right Telegram groups to try and incite violence on street by targetting people for racist online abuse following the killing of George Nkencho

This follows on and is part of a misinformation campaign to polarise communities at this time.
— Mark Malone (@soundmigration) January 1, 2021

The best thing you can do is challenge disinformation and report posts where engagement isn’t appropriate. Many of these are blatantly racist posts designed to drive recruitment to NP and other Nationalist groups. By all means protest but stay safe.