BC EDUCATION
Saved by @CodyyyGardner

Front-end developer roadmap for 2021 🧵👇🏼

 I started my web development journey exactly one year ago i,e. January 2020 and it's been a year since I'm in learning phase

In this thread I'll be covering

- All you need to learn about front-end development
- Tools and technologies
- Skills you need to learn
- Resources
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?👇🏼

🔹Many built-in features
🔹It's fast
🔹Large community
🔹IntelliSense code completion and debugging
Don't want to download an editor due to memory issue or something else?

Don't worry we have lots of online editors also👇🏼

🔹https://t.co/aq2wrH6cD3
🔹https://t.co/drzfitzmsG
Now you're all set to write code and create beautiful websites

A typical website can be divide into three phases

- HTML 🧱
- CSS 🎨
- JavaScript ⚙️
1. HTML

- It is used to build the skeleton for your website
- It's a markup language that totally operates on tags
- You can master it with 10 days

🔹 https://t.co/TlrsSM0dh9
2. CSS

- It is used to give the styling for your website
- Cascading Style Sheets, that totally operates on different properties
- You can learn it within 20-25 days but it will take time to master it
There are 520 distinct properties in CSS. But according to my personal experience, you will hardly use all of them.

Generally CSS revolves around👇🏼

- Box model
- Position
- Background
- Animation
- Media query
- Flex box
- CSS grid
Learning resources for CSS

Documentation
🔹 https://t.co/bBk1rSijxo

Check out this amazing article in order to learn CSS by playing games
🔹https://t.co/2klS6NLZ79
CSS Frameworks

- In simple words CSS frameworks are the CSS code written by some other developers. All you need to do is just import in your HTML file and now you can add styling in your website with even writing CSS code by yourself

- Isn't it cool😍
Learning a particular CSS framework is pretty easy. You can learn them by reading official documentation
- Pick any CSS Frameworks by your choice👇🏼

🔹Tailwind CSS
🔹Bootstrap
🔹Bulma
🔹Materialize CSS
🔹Foundation

... and many more
JavaScript

- JS is used to add functionality and behavior in your website

- JavaScript is a popular programming and widely used language for Web Development

- You can't master JS in few days or months, It will take time

But you will be able to create websites in few days.
Start with the basic topics👇🏼

- Data types
- Loops
- Conditional statements
- Objects
- Arrays
- Functions
Learning resources

Documentation
🔹https://t.co/XkMlZQOF0h

Other learning resources
🔹Start with freecodecamp @freeCodeCamp

🔹Recently @frontenddude launched a website for free JS resources 👉🏼 "java5cript .com"
Document Object Model (DOM)

- With the HTML DOM, you can access, modify and changes the HTML elements

- When a web page is loaded, the browser creates a Document Object Model of the page
With the help of DOM, JavaScript can change the

- elements in the page
- attributes
- CSS styling

I mean now you have a super power to make changes in you webpage using JS
Resources for DOM

🔹https://t.co/M9bS7wYawD
🔹https://t.co/xEsT3lbT1P
I think now it's the right time to learn Git and GitHub (version control)

- Git is a Version Control system used for tracking changes
- GitHub is a code hosting platform of Git

An amazing crash course by @freeCodeCamp on YouTube

https://t.co/ysa17PpoGO
JavaScript front-end frameworks and libraries

There are many like React, Angular, vue, Ember, Backbone etc. All are equally good.

I love React so I'm providing the learning resources for React👇🏼
You can check my complete thread of React resources

https://t.co/O5dCaqYV11
Advance Learning

- PWA
- JAMstack
- PWA are the web applications that are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices

- JAMstack stands for JavaScript, APIs, and Markup. Designed to make the web faster, more secure, and easier to scalable.
🔹https://t.co/n7mPgDLlN8

🔹https://t.co/4bMt5hRQKX
That's pretty much it for this thread. I hope you like it❤️

More from Pratham 👨‍💻🚀

Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇


There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be focusing on relative and absolute positioning as both are widely used

Let's start with understanding what document flow is?

📌 Elements are displayed on the screen as they written in the HTML document

Consider the following piece of code:

H1, P, H3 and div are displayed on the screen in exact order as they written in the HTML file.


As now you know about document flow, let's start with Relative positioning

📌 Relative Position

- Relative positioning do not take an element out of document flow
- Relative positioning is relative to element's original position which can be changed using offset

🔹 Relative position is relative to itself.

For example: Consider the code and output in the attached image below

As you can see red box is shifted 100px from left because I applied left offset after giving it relative positioning
TECH
Pratham \U0001f468\u200d\U0001f4bb\U0001f680
Pratham 👨‍💻🚀...
@Prathkum
Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps

THREAD🧵


Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow

We'll be creating a neumorphic form in steps👇🏼

2.

STEP 1:

Place a light source(virtually) on screen. In this example I'm considering that my light source is placed top left corner of the screen

3.


STEP 2:

Create a container div and set background color slightly darker than white. I picked #ecf0f3

* Make sure that the color of body and container should be same

CONTINUE...

4.

As we placed our light source on top-left corner, make sure left and top border of container should be brighter than right and bottom border.

This will make the element looks like it has the light source illuminating from the top left corner of the screen.

5.
DESIGN
Advertisement
Pratham
Pratham
@Prathkum
The HTML Roadmap 🛣️

1. Understanding the full form of HTML
2. Anatomy of tags
3. HTML5 boilerplate
4. Heading and paragraph tags
5. ul, ol, li, tags
6. img, span tag
7. Table tags for layout
8. Form tags
9. Understanding of semantic elements
10. Basic attributes
ALL
Pratham
Pratham
@Prathkum
5 great code snippet websites for every web developer and designer

🧵👇🏻


1️⃣ 30 Seconds of Code

- Short code snippets for all your development needs

🔗 https://t.co/91L4bAxkgF


2️⃣ Free Frontend

- Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles

🔗 https://t.co/2sIAm73EdZ


3️⃣ Little Snippets

- A free collection of HTML and CSS code snippets

🔗 https://t.co/qxAyA2wA6U


4️⃣ CSS Deck

- Collection of Awesome CSS and JS Creations to help out frontend developers and designers.

🔗 https://t.co/LcZYnipvCy
ALL
Pratham
Pratham
@Prathkum
Use these 6 AI websites to finish hours of work in minutes (take a look):

1. Sheet+

Become a spreadsheet master with Sheet+ AI-powered tools.

• Convert text to formula
• Convert formula to explanation
• Debug formulas
• Generate VBA code
• Get instant answers to any spreadsheet question

🔗 https://t.co/fWsAeKa6ko


2. DeepCode

DeepCode's AI-based code review notifies you about critical bugs in real time and shows you how to fix them.

🔗 https://t.co/dPTPq9syoy


3. Akkio

Grow your business with data-driven decisions.

Go from data to AI in 10 minutes — no code or data science skills required.

🔗 https://t.co/I29FIHDIs0


4. Autocode

Instant endpoints for webhooks, bots, and APIs.

Build and host Node.js endpoints in seconds.

Connect to your favorite APIs like Airtable, Discord, Notion, Slack, Webflow, and more.

🔗 https://t.co/uQZB0NCHJT
LEARNING

More from Education

Cathy Davidson
Cathy Davidson
@CathyNDavidson
1-Every prof and teacher I know is having a really hard time at end of term. Everyone is overwhelmed. So are our students. So are university staff and administrators (hard to believe, right?) Everyone is working night and day, feeling inefficient, overwhelmed...

2-One way to address this, for those still having classes post-Thanksgiving, is like a friend (everyone's anonymous in this thread: they can out themselves!) who told students, if they wished, they could end their term w all the work they'd done pre-Thanskgiving and be done.

3-Another friend announced post Thanksgiving that the final exam would be "open everything" and they could work together if they wishes as long as they also submitted a signed "study/crib sheet" along w the final. They warned working together might hurt them because it slows.

4-Another friend--genius scholar and prof at an Ivy--had a "PJ day" where they came to class in flannel pjs and students did to and they played them a thank you song for their resilience and care on the guitar (their Covid hobby is learning to play guitar).

5-Another friend called off a week of class and held "open collective off hours" in those slots where anyone could ask and talk about anything--the most responsive week they've had all term and everyone learned far more than usual and it nourished them all.
EDUCATION
SER
SER
@societyforepi
Now, what exactly is an applied epidemiologist, and why are they needed? In the late 90s- early 2000's there were a series of articles in AJPH, AJE, JECH, and IJE dedicated to answering these questions. I'll focus on Stephen Thacker's review.

He states, “The applied epidemiologist is by definition an activist, moving rapidly from findings to policy, putting epi knowledge to good use. The 21st century epi must do all these things while maintaining a foundation of high-quality epi research and practice.”

Susser warns the field of what he considers “the black box paradigm… the current international focus on risk factor epidemiology.” He advocates for expanding our academic training to include socializing epis to “keep the improvement of the public’s health as a primary value”

Morabia argued that epidemiology has historically found its balance in the tension between the search for causal relations and the improvement of public health; overemphasis on either perspective puts epidemiology at risk of losing its value.

How does this play out in real life? I’ve been an applied epi for 13 years, working mainly in local, state, and federal health agencies. My work has focused on conducting cool analysis that lead to policy or systemic change.
EDUCATION
Advertisement
Chris Foley
Chris Foley
@HT_StMonicas
Grade Awarding 2021 - a thread.
1. For pupils and parents; it sounds daft but there isn’t much you can control right now. Teacher will play the main role in awarding grades, and there may well be some time or formal exam for subjects. But we don’t know exactly what yet.

2. What we do know is that all work pupils have done, their resilience over such a difficult time, their drive to keep going will make a difference to them. It’s never been more important for pupils to keep going, and keep engaging with the provision a school provides.

3. To our pupils? Have faith that the work you are doing will pay off. Please don’t lose heart right now. We love you lots and we all want you to excel. We are always here for you.

4. For school leaders - we need to build a year story. Right now they need a narrative that stresses the need to keep engaging in lessons. A letter every two weeks won’t get that job done. It’s never been more that pupils and parents feel connected to a school and we have clear

5. Communications cycles. Media - twitter/YouTube etc are vital tools for keeping our pupils and parents connected to school. This news cycle is vital for building a cultural expectation of what will happen when pupils set foot again in our school buildings.
EDUCATION
Jonathan Mountstevens
Jonathan Mountstevens
@MrMountstevens
Actually reading through the Ofqual/DfE consultation rather than what has been said about it by others. It's not making me feel any better.

But, but, but...! This is such an unreasonable question!


Just hold the **** exams, for God's sake!


This passage makes zero sense to me. It's like a Boris announcement on the importance of following guidance. NEA is important, but only if the kids have all done it. It's the only evidence you can use in Art, but it's ok if it's not very good. Oh, and you can just make it up.


Oh, and if all else fails, just make it up using whatever stuff you can find to justify what you want to give.
EDUCATION
Danial
Danial
@DTehrany
What is the Quincy Institute?
What was the purpose of its establishment?
Who is the Mastermind behind it ?
I’ll explain in the following that Quincy institute was founded by the most powerful and famous Islamic regime lobbyist @tparsi based in the United States of America .


1. @QuincyInst for Responsible Statecraft
An American think tank founded in 2019
Location: Washington DC, USA
The initial budget of this institution; Includes half a million dollars from the Soros Foundation (George Soros)
And the Cook Foundation (Charles J. Cook).


2- George Soros,Hungarian-American businessman and a Billionaire, investor, political activist, and an author.Soros is the Chairman of the Board of the Open Society Foundation and Soros Capital Management and is the founder and Chairman of the Board of Directors of Soros Capital.


3- Charles J.Koch, a businessman, entrepreneur and philanthropist. He is the Chairman and CEO of Cook Industries.
He is the eldest child of Fr. Cook, the founder of Cook Industries, member of the Cook family and one of the main inventors of the new gasoline refining technology.


4- As described by the founders of Quincy; The purpose of the Quincy Institute (Research Institute and Office of Studies and Research) is to promote ideas to redirect the American foreign policy from endless wars around the world .
EDUCATION

You May Also Like

Caleb Porzio
Caleb Porzio
@calebporzio
🎉🎉 PHP 7.3 is here!

Here are the things I'm excited about.

🚂 Trailing commas in function/method calls!

This will certainly be a required styling choice for me. Same delightful benefits of trailing comma in multi-line PHP arrays, and JavaScript objects.


🧵 Less disgusting heredoc syntax!

Inlining heredoc strings in any way right now is grrrosssss. Now we get sensible capabilities. Everything that was wrong with it is now fixed!

(Ignore the bad syntax highlighting)


☠️ Finally, not-so-silent json_decode error detection!

This really sucked before, now it just sucks a bit less (who wants to pass a 4th param and pass 2 default params first? (helper function anybody?)


📜 Not horrible functions for getting the first and last item (or key) from an array!

Before you either strung a bunch of functions together or messed with internal array pointers. This is a much-needed improvement.
TECH
Erik Torenberg
Erik Torenberg
@eriktorenberg
1/“What would need to be true for you to….X”

Why is this the most powerful question you can ask when attempting to reach an agreement with another human being or organization?

A thread, co-written by @deanmbrody:


2/ First, “X” could be lots of things. Examples: What would need to be true for you to

- “Feel it's in our best interest for me to be CMO"
- “Feel that we’re in a good place as a company”
- “Feel that we’re on the same page”
- “Feel that we both got what we wanted from this deal

3/ Normally, we aren’t that direct. Example from startup/VC land:

Founders leave VC meetings thinking that every VC will invest, but they rarely do.

Worse over, the founders don’t know what they need to do in order to be fundable.

4/ So why should you ask the magic Q?

To get clarity.

You want to know where you stand, and what it takes to get what you want in a way that also gets them what they want.

It also holds them (mentally) accountable once the thing they need becomes true.

5/ Staying in the context of soliciting investors, the question is “what would need to be true for you to want to invest (or partner with us on this journey, etc)?”

Multiple responses to this question are likely to deliver a positive result.
LIFE
Advertisement
\u0936\u094d\u0930\u0940\u092e\u093e\u0932\u0940 \u0939\u093f\u0924\u0947\u0936 \u0905\u0935\u0938\u094d\u0925\u0940
श्रीमाली हितेश अवस्थी...
@HiteshAwasthi89
#Thread
12 Most Powerful Hanuman Mantras

Hanuman ji is the Hindu God of strength, valor, agility, and wisdom. He is considered as the incarnation (avatar) of bhagwan Shiva. Hanuman ji is the symbol of devotion and dedication. He is the greatest devotee of Prabhu Shri Ram. 1/n


Hanuman ji is known by several names such as Bajrangabali, Mahabali, Maruti Nandan, Pawanputra, Mahaveer, and Anjaneya. Hanuman ji is the son of Bhagwan Vayu, the wind god.

God Hanuman played a prominent part in rescuing Mata Sitafrom the bondage of demon King of Lanka, Ravana.


One can worship Hanuman ji by chanting Hanuman Mantras. There are many different types of Hanuman Mantras, each fulfilling a specific purpose. Hanuman Mantras help to beget the blessings of Mahabali Hanuman for success. 3/n


Let’s explore these powerful Hanuman Mantras one by one. Here’s the list for you:

1. Hanuman Moola Mantra
!! Om Hanumate Namah !!
ऊँ हनुमते नम:

You can chant the “Hanuman Moola Mantra if you usually face problems and obstacles in your life.4/n
#hanumanjanmotsav


However, the Human Moola Mantra is also a very powerful success mantra.

It’s a Kaarya Siddhi Mantra.

It is highly advised that all those who usually face obstacles and problems in their life should chant the Hanuman Moola Mantra. 5/n
#hanumanjanmotsav
ALL
Kelly Ellis
Kelly Ellis
@justkelly_ok
So, I want to talk about how sexual harassment and fair pay are linked at Google (and beyond), because I think that's an angle that isn't being highlighted enough in the coverage of these walk-outs. I'm going to frame it largely around my personal experience there. Thread.

When I was sexually harassed by the director of the area I was working in, I was afraid to report it because I was worried that "getting him in trouble" would result in the subtle retaliation of missed leadership opportunities.

I wanted to continue working on the team I was on, because I'd gained a lot of very deep knowledge and expertise in that area, as well as reputation and camaraderie with the other folks working in that area. I didn't want to make the situation more "difficult."

To get promoted at Google, several need to happen: 1. you need opportunities for ownership and leadership above your current level (basically, opportunities to show you're working at the next level you're trying to get promoted to). The work you're "assigned" has a big impact.

2. You need glowing reviews from peers, *at or particularly above the level you're hoping to get promoted to.* Basically, you need people a lot more senior than you to say you're doing awesome work.
TECH , SOCIETY
Suhail
Suhail
@Suhail
1/ The first 18 months of starting a company is often life or death. I must've made 5 different companies that each failed within 9 mo. 😭 Each time the company failed I figured out what I could do better. Eventually startup #6 got to $40K/mo by month 18. Here’s what I learned...

2/ Stay focused! Ignore things that are a waste of time: meetups & conferences, meetings with no clear agenda, fundraising if you're not fundraising, reading lots of tech media articles, etc. Every week should feel like significant progress in the first year.

3/ Your first 5 hires will be the difference between life or death. Choose carefully. Be picky. Many of the things we do at the company still are a result of those early hires' legacy. Have fun as a tight knit team. It will change & evolve as you get bigger so enjoy this moment.

4/ Growth may be flat for the first 9 months. It's gonna be okay. Almost every company has experienced this: Airbnb had to sell cereal in-between, Slack failed as a gaming company first, Tesla sold only 147 cars after 6 years! You probably won't be an overnight success either.

5/ In the beginning, do customer support yourself. You will learn a lot about why your product sucks. I did 5,000+ support tickets when it was the two of us. Delight customers & fix things fast while you learn. It will help you build an amazing intuition about your customers.
STARTUPS