If you are a developer then these GitHub repositories or websites will boost your knowledge to the next level

A Thread 🧵

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.

Finding good courses is challenging.

Here are five courses on JavaScript, Python, and Go you can consider in 2022.

Thread 🧵

1️⃣ Basic JavaScript

Interactive learning will help you understand the basic concepts of JavaScript quickly.

• Introduction
• Variables
• Comparisons
• Loops

🔗

2️⃣ Advance JavaScript

Understanding complex concepts of JavaScript is the with exercises and challenges.

• Functions
• Arrays
• Objects

🔗

3️⃣ Python

You'll get hands-on practice with all the building blocks to ensure you excel as a Pythonista.

🔗

4️⃣ DS and Algo in Python

Algorithms are tough to master. But this course made it easy with code samples and quizzes.

🔗

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

Practice and improve your HTML, CSS and JavaScript skills by building these 50 projects.

A thread 🧵

1. Expanding Cards
2. Progress Steps
3. Rotating Navigation
4. Hidden Search
5. Blurry Loading
6. Scroll Animation
7. Split Landing Page
8. Form Wave Animation
9. Sound Board
10. Dad Jokes App

11. Event KeyCodes
12. FAQ Collapse
13. Random Choice Picker
14. Animated Navigation
15. Incrementing Counter
16. Drink Water
17. Movie App
18. Background Slider
19. Theme Clock
20. Button Ripple Effect

21. Drag N Drop
22. Drawing App
23. Kinetic Loader
24. Content Placeholder
25. Sticky Navigation
26. Double Vertical Slider
27. Toast Notification
28. Github Profiles
29. Double Click Heart
30. Auto Text Effect

31. Password Generator
32. Good Cheap Fast
33. Notes App
34. Animated Countdown
35. Image Carousel
36. Hoverboard
37. Pokedex
38. Mobile Tab Navigation
39. Password Strength Background
40. 3D Boxes Background

Are you a web developer?

Here are few Productive Tools that will save you 10+ hours per week

🧵A Thread 🧵

1. Metatags

This tool can help you to test and view your website's preview when viewed on Google, Facebook, or

2. ExtractCSS

This tool can help you to extract element Id, class, and inline styles from HTML documents and output them as CSS

3. WhatRuns

This tool can help you to peek at other site's themes, plugins, and server info used. WhatRuns can be installed on @firefox and

4. Unminify

Free tool to unminify javascript, CSS, HTML, XML, and JSON code making it readable and

"I want to learn how to code, but have no idea where to begin."

I've been getting this question pretty frequently lately, and thought it was a good time to put together a thread to cover all the basics.

And here it is!

Instead of just throwing a few links at you, I first want to cover something much more fundamental: The *reason* you want to learn to code.

I've had to train a good number of developers in my time. The ones that succeeded had rock-solid, persistent motivations. Is that you?

Some good motivations for learning how to code:

* Enabling a career change
* Insatiable curiosity, eagerness to learn
* Frustration with inefficiency + desire to improve things
* Larger goals in mind, coding being a stepping stone

Some bad motivations for learning how to code:

* It seems popular
* Your friends/family have ideas for apps
* You want to make lots of money by sitting in front of a computer
* You bought an expensive MacBook and are struggling to justify the expense

For those, trade forex.

Motivation matters, because of the one thing that's universally true about coding: It's hard.

Depending on what you do, you may have to learn several languages at once. Tools constantly update. New approaches land in the market on an annual basis. You're constantly upskilling.

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 }