Complete roadmap for learning the key concepts in CSS

Thread below 🧵
CSS flexbox - 🔗
CSS Inheritance and Cascade - 🔗 developer.mozilla.org/enUS/docs/Lear…
CSS Units - 🔗 w3schools.com/cssref/css_uni…
CSS Selectors - 🔗 w3schools.com/cssref/css_sel…
CSS Grids - 🔗
CSS Colors - 🔗 w3schools.com/cssref/css_col…
CSS Functions - 🔗 w3schools.com/cssref/css_fun…
CSS Properties - 🔗 tutorialrepublic.com/css-reference/…
CSS Box Model - 🔗
CSS Block formatting - 🔗 developer.mozilla.org/en-US/docs/Web…
CSS Box Sizing - 🔗 w3schools.com/css/css3_box-s…
CSS Transitions and Animations - 🔗
CSS3 Browser support - 🔗 w3schools.com/cssref/css3_br…
CSS Media queries - 🔗 w3schools.com/css/css3_media…
CSS Block, Inline, and Inline-block - 🔗
This list of resources provides you with the key topics on CSS.

If you found it helpful, follow me 👉@UbahTheBuilder so you don't miss threads like this.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Kingsley Ubah

Kingsley Ubah Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @UbahTheBuilder

10 May
How to handle Impostor Syndrome as a developer 🧵

~thread~
" If Mr X, a well renowned and highly educated professional could make this kind of mistake and still bounce back then you have a chance"

What I do is that I motivate myself from the mistakes/failures of other experts in the past.

If these people failed, then who am I?
Ask for help.

Whether it's a fellow developer on social media or a team member at work.

Opening up to someone about your feelings can be very helpful as he/she is most likely to give you words of encouragement in hopes of allaying your doubts and motivating you.
Read 6 tweets
29 Apr
8 basic JavaScript concepts to know as a Beginner

Thread below 🧵
🔹Events

JS is an event-driven language. There is an action/event from the user to trigger your script to run.

You define an event handler that will run when a particular event eg click, hover etc is triggered.

There are many DOM Event methods and Properties to learn
🔹Variables

Variables are containers of data. It's important to learn about identifiers like let, const and var. Also understand the different data types:

✅String
✅Number
✅Boolean
✅ Arrays
✅ Objects
...
Read 11 tweets
27 Apr
The quickest way to learn JavaScript is by having the right resources.

Here are some good resource to learn JavaScript.

🧵
🔹JavaScript Prototype - 🔗 freecodecamp.org/news/a-beginne…

🔹ES6 - 🔗 w3schools.com/js/js_es6.asp

🔹Variable Scoping - 🔗 w3schools.com/js/js_scope.asp

🔹JavaScript Closures - 🔗 developer.mozilla.org/en-US/docs/Web…
Read 5 tweets
24 Apr
7 essential skills every web developer should have (my opinion)

Thread below🧵
🔹 Problem Solving

I put this first because I think it's the most essential soft skill to posses.

Whether you are planning your site's design, styling elements or debugging, you are solving a problem.

Web devt and programming is all about problem solving and critical thinking.
🔹 Communication

Not everyone knows what the DOM, Git or an API is.

Being able to communicate difficult concepts in a simple and digestible way is a crucial skill, especially for teamwork and collaboration.

Mastering the art of effective communication is crucial for a web dev
Read 8 tweets
22 Apr
4 habits I use to write code faster

Thread below🧵
🔹Relative Comparisons

This is a strategy I use to remember syntax. I simply reason about one language/syntax in relation to another.

For eg,JavaScript uses semicolons and bracket parameters whereas Python uses no brackets, as well as indentation.

By relating them, I remember.
🔹Cleansheets

I have so many cleansheets saved in my computer. Cleansheets for Git commands, CSS selector syntax, JavaScript, Flexbox and CSS grids, Bootstrap classes etc are all saved on my computer.

When I get stuck, I just refer to them easily and quickly.
Read 7 tweets
13 Apr
7 VSCode extensions to improve productivity as a web developer

Thread below 🧵
🔹LIVE SERVER

Live Server sets up a local development server with a live reload feature for previewing your site

Every time you save your code, you'll instantly see the changes on the browser

marketplace.visualstudio.com/items?itemName…
🔹ICON FONTS

Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.

marketplace.visualstudio.com/items?itemName…
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(