BC WEBDEV

Saved by @inertia_m

$Junaid \u26a1$

Junaid ⚡
@junaidshaikh_js 5 years ago 1166 views

Save to PDF Share See On Twitter

13 Websites that will help you improve your frontend skills by building real-world projects. 💪

A thread ⤵️

1️⃣ Frontend Mentor { @frontendmentor }

🔗 https://t.co/qzMGbvq4cY

2️⃣ 100 Days of CSS

🔗 https://t.co/U325h9sV7N

3️⃣ Piccalilli

🔗 https://t.co/GKRX8aCQlJ

4️⃣ Codewell

🔗 https://t.co/05lJe4zRNj

5️⃣ Frontloops

🔗 https://t.co/wf6vrhqKTK

6️⃣ DevChallenges

🔗 https://t.co/rEbs2OXZwT

7️⃣ CodePen Challenges

🔗 https://t.co/5LvvbYDqc9

8️⃣ Daily UI

🔗 https://t.co/Low1gNl99z

9️⃣ CSSBattle

🔗 https://t.co/lf6wp3aCvk

🔟 ACE Front End

🔗 https://t.co/Jcy5lvm1eW

1️⃣1️⃣ Codier

🔗 https://t.co/ZgVxYjuHvU

1️⃣2️⃣ FrontEnd Practice

🔗 https://t.co/2nKcmhgxkg

1️⃣3️⃣ javaScript30

🔗 https://t.co/AtSZqjzHRo

You have come to the end of this thread. Thank you for taking the time to read this. 💛

If you enjoyed this thread →
1. Consider retweeting the thread's first tweet.
2. Follow me on Twitter ( @junaidshaikh_js ) for more related content.

https://t.co/Nq3bEEuTt4

13 Websites that will help you improve your frontend skills by building real-world projects. \U0001f4aa

A thread \u2935\ufe0f
— Junaid \u26a1 (@junaidshaikh_js) August 14, 2021

More from Webdev

$Csaba Kissi \u26a1$

Csaba Kissi ⚡
@csaba_kissi

23 FREE SVG Icon Libraries For Front-End Developers

Mega Thread 🧵👇

1️⃣ Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT-licensed icon pack.

2️⃣ 700+ CSS Icons, Customizable, Retina Ready & API

Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API

3️⃣ SVG Repo - Free SVG Vectors and Icons

Free Vectors and Icons in SVG format. Download free mono or multi-color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons.

https://t.co/2Ht2sI23TE

4️⃣ Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.

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

Advertisement

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

$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 }

You May Also Like

Simon Wardley #EEA
@swardley

X : Our executive team is concerned that we need to up our game in order to out innovate Amazon.
Me : Do you map?
X : Yes
Me : Like this?
X : No. What's that?
Me : A map of a tea shop.

X : Why is that a map?
Me : Long story, all to do with how space has meaning. To keep it short, maps help people to focus on user needs, the components involved, to communicate missing components and scenario play ideas like staff becoming robots.

Me : They’re also good for measuring and managing capital flow, making investment decisions, removing bias and getting rid of duplication.
X : I don’t see how that helps with innovation?

Me : Well, innovation is a tricky word because we use it to describe many things. If you’re talking about differentiation with the adjacent unexplored then you’re experimenting in the “uncharted” space e.g. immortality with magic provided by the special custom built kettle.

X : That sounds like nonsense.
Me : A lot of what people think will be the next great innovation is nonsense. Actually, most of it is. That’s the nature of the uncharted space, it’s experimental, high risk and generally results in failure.
X : We need more reliable innovation.

Daddy Files
@DaddyFiles

This is my son, Sam. He’s 5. And today he learned how shitty and harmful #ToxicMasculinity is. My rage meter is spiking right now so excuse me if this is a little raw but there are some things I want to say about BS #gender norms (a thread)

Sam is my middle child & he’s a terror. A “boy’s boy” as so many (not me) would say. He’s rough and tumble, he’s loud, he’s always dirty, loves trucks, plays sports and knee drops me from the couch. But he also loves a lot of “girl” things.

Sam has a collection of purses because he likes to carry things around. And he also loves to have his nails painted bright colors because he thinks they “look beautiful.” And he’s right – they are beautiful…

So he proudly wore his red nail polish to kindergarten this morning because Sam has absolutely no concept of nail polish only being for girls or reason to think anyone would possibly have a problem with beautiful nails.

But his classmates did have a problem. A big one. Sam was ridiculed for being a boy with nail polish. They called him names and told him to take it off. This lasted the entire day.

Advertisement

Vibhu Vashisth
@VIBHU_Tweet

ANCIENT BHARAT WAS CALLED VISHWAGURU, AND IT REALLY DESERVED IT.

India had a well developed education system centuries before the westerners arrived and called us uncivilized. Education was always given a great importance in Indian civilisation since times immemorial.

Ancient India had the Gurukulas and Ashramas as the epicentres of the knowledge and enlightenment. Bigger Gurukulas served as the centres of higher education called universities. Besides these universities, temples also emerged as the major learning centres.

Studying the Holy Scriptures, character building, personality development, responsibilities towards self,family and society,discipline and preservation of the ancient culture and heritage were the key embodiments of education.

This kind of education system made ancient India, a centre of knowledge all over the world. Many foreign students came to India for education and India was called the 'Vishwaguru'.
Takshshila and Nalanda were the two prominent universities of ancient India.

But were these only Universities of ancient India?The answer is 'No'.Let's learn about these gems of our education system that flourished across ancient India & be proud.

NALANDA UNIVERSITY
This was the oldest university of ancient India.Situated in Nalanda distt. of Bihar...

Brian Cates
@drawandstrike

Great article from @AsheSchow. I lived thru the 'Satanic Panic' of the 1980's/early 1990's asking myself "Has eveyrbody lost their GODDAMN MINDS?!"

For three years I have wanted to write an article on moral panics. I have collected anecdotes and similarities between today\u2019s moral panic and those of the past - particularly the Satanic Panic of the 80s.

This is my finished product: https://t.co/otcM1uuUDk
— Ashe Schow (@AsheSchow) September 29, 2018

The 3 big things that made the 1980's/early 1990's surreal for me.

1) Satanic Panic - satanism in the day cares ahhhh!

2) "Repressed memory" syndrome

3) Facilitated Communication [FC]

All 3 led to massive abuse.

"Therapists" -and I use the term to describe these quacks loosely - would hypnotize people & convince they they were 'reliving' past memories of Mom & Dad killing babies in Satanic rituals in the basement while they were growing up.

Other 'therapists' would badger kids until they invented stories about watching alligators eat babies dropped into a lake from a hot air balloon. Kids would deny anything happened for hours until the therapist 'broke through' and 'found' the 'truth'.

FC was a movement that started with the claim severely handicapped individuals were able to 'type' legible sentences & communicate if a 'helper' guided their hands over a keyboard.

Shaan Puri
@ShaanVP

If you're a college student who wants to pay off all your loans... here's an idea for you:

It takes ~$5k to start and will make ~$30k a year of profit

It won't get you rich, it'll pay for college.

(..and will teach them more about business than they’ll learn in school)

The idea isn’t sexy. But it works:

**Plastic Moving Bin Rentals**

Everyone knows moving sucks. The worst part is being stuck with 400 cardboard boxes at the end of your move.

Instead - @benmlevy told me about Gorilla Bins. They dropoff plastic moving bins, & pickem up later.

Let’s break it down. Our goal is to pay for college (~$30k profit per year).

To do that, I think we’ll need $50k in revenue.

The avg move (a 2 bedroom apartment) is $180

To hit our goal, we need do ~5.5 moves per week

COSTS?

How many bins do we need to buy up front?

5.5 moves a week x 50 bins = you need 275 bins. Let’s round up to 300 to be safe.

Ok let’s hop over to @uline to see how much these bins cost

Bingo. Bins cost about $15 a piece.

$15 x 300 bins = $4,500 initial startup costs.

Time to beg your parents or a rich aunt to lend you money to get the biz rolling (...or just take $5k of student loan money and invest it here…)