✨Pick a right color for your next project from here✨
👇👇👇
🔹Colorhunt
🔸Paletton
🔹Design Seeds
🔸Coolors
🔹Bootflat
🔸0 to 255
🔹uiGradients
🔸BrandColors
🔹Image color picker
🔸Colour Lovers
🔹WebGradients
🔸Egg gradient
🔹Gradient Hunt
🔸Color-hex
👇👇👇
🔹Colorhunt
🔸Paletton
🔹Design Seeds
🔸Coolors
🔹Bootflat
🔸0 to 255
🔹uiGradients
🔸BrandColors
🔹Image color picker
🔸Colour Lovers
🔹WebGradients
🔸Egg gradient
🔹Gradient Hunt
🔸Color-hex
✨Looking for free photos for your next project? ✨
Here are some sites that might be useful
👇👇👇
🔹Unsplash
🔸Pixabay
🔹PicJumbo
🔸IM Free
🔹Pexels
🔸Flickr
🔹Gratisography
🔸Stock Up
🔹Cupcake
🔸Adobe Stock
🔹Icons8
🔸Rgbstock
🔹Pikwizard
🔸Stocksnap
🔹Shutterstock
🔸Freestocks
Here are some sites that might be useful
👇👇👇
🔹Unsplash
🔸Pixabay
🔹PicJumbo
🔸IM Free
🔹Pexels
🔸Flickr
🔹Gratisography
🔸Stock Up
🔹Cupcake
🔸Adobe Stock
🔹Icons8
🔸Rgbstock
🔹Pikwizard
🔸Stocksnap
🔹Shutterstock
🔸Freestocks
Some amazing backgrounds and texture for your next project
👇👇👇
🔹Repeat-X Repeat-Y
🔹Texture King
🔹Pattern8
🔹Subtle Patterns
🔹Patternico
🔹BG Patterns
🔹Lost and Taken
🔹Freepik
🔹Cool backgrounds
🔹BG generator
🔹Canva
🔹Behance
🔹4kwallpapers
🔹Unsplash
🔹Wallpaperaccess
🔹Shutterstock
🔹Pexel
👇👇👇
🔹Repeat-X Repeat-Y
🔹Texture King
🔹Pattern8
🔹Subtle Patterns
🔹Patternico
🔹BG Patterns
🔹Lost and Taken
🔹Freepik
🔹Cool backgrounds
🔹BG generator
🔹Canva
🔹Behance
🔹4kwallpapers
🔹Unsplash
🔹Wallpaperaccess
🔹Shutterstock
🔹Pexel
Forwarded from Learn Web Development
✨Start your 100 Days of Code for mastering web development ✨
In this 100 Days you need to cover mainly 4 technologies
- HTML
- CSS
- JavaScript
- DOM
Starting with HTML, its pretty easy and straight forward. It's a markup that totally operates on tag.
You can get a quick overview of it within few minutes. But wait! Don't rush.... There are a lot of tags
You don't need to learn all tags in one single go
I suggest you to start HTML with a Free crash course.
🔗 HTML: https://t.co/hEPQBMfj2o
Try to play around with all tricky tags like table tags.
You don't need to waste your 10 - 20 days in HTML because as you go further into your journey, you will discover more cool tags and attributes eventually
I think 1 to 5 days for HTML is enough.
After 5 - 6 days it's time to add some styling in your website. And here CSS comes into action
Its totally operates on properties and value. There are 500+ properties. Which takes almost 100 days to learn all🙁..........Just kidding😬
You don't even need to learn all of them.
You must have heard about "Pareto principle" which states that for many outcomes roughly 80% of consequences come from 20% of the causes
Similarly, in order to cover 80% of CSS, you need to learn only 20 properties😍
The cool part about this 100 Days of Code is that all technologies are interconnected. Like when you're working on CSS, you have to work on HTML as well.
So you'll learn about HTML as well while learning CSS
Some important CSS concepts you need to cover
- Display flex
- Display grid
- Box model
- Background
- Color
- Positioning
- Fonts
In my opinion, 25 to 30 days should be enough for CSS. Although they are not fixed you can arrange them according to you.
To be good developer, you need to Google a lot. How quickly you find your solution on Google makes you a good developer
W3 schools and MDN are documentations where you find detailed explanation on each and every topic
So try to learn from there. Try to put everything into practice.
🔗 CSS: https://t.co/6XnTabhGQX
Congratulations🎉
After 30 days, you will be able to make some static sites, personal website and some stunning landing pages.
Time to rewind all your learning and put them together to create a website.
Structure is done✅
Styling is done✅
Time to add behaviour in your website using JavaScript.
JavaScript is deep so I suggest you to learn it from day 31 to the end (100th day)
JavaScript is used for adding logic in your website.
For ex:
- What happens after the user clicks on the button is controlled by JavaScript
- Increase the likes count when user click on the heart button😉
Basic things you need to cover lin JavaScript are
- Data Types
- Var, const, let
- Operators
- Comparators
- Functions
- Loops
- Control statement
- Arrays
- etc
This may sound challenging and confusing but once you start with it, everthing seems like a cake walk.
Don't rush. Try to take short note for future reference it will help you for sure.
So how we can change thing in HTML using JavaScript?
Here DOM comes into play
With the HTML DOM, JavaScript can access and change all the elements of an HTML document
The DOM is powerful but most beginners avoid it or don't take it seriously. Please do not do this.
DOM mainly revolves around methods and value. By method you select where to change and by value you tell what to change.
By the combination of DOM and JavaScript you can perform a lot of cool things.
- You can change styling
- You can change content
- You can change tags
- You can change attributes
- ETC.....
The combination of HTML, CSS, JavaScript and DOM is the most powerful thing in my opinion and once you learn these things. You will become powerful too💪😉
Start your web development journey today. It's now or never.
In this 100 Days you need to cover mainly 4 technologies
- HTML
- CSS
- JavaScript
- DOM
Starting with HTML, its pretty easy and straight forward. It's a markup that totally operates on tag.
You can get a quick overview of it within few minutes. But wait! Don't rush.... There are a lot of tags
You don't need to learn all tags in one single go
I suggest you to start HTML with a Free crash course.
🔗 HTML: https://t.co/hEPQBMfj2o
Try to play around with all tricky tags like table tags.
You don't need to waste your 10 - 20 days in HTML because as you go further into your journey, you will discover more cool tags and attributes eventually
I think 1 to 5 days for HTML is enough.
After 5 - 6 days it's time to add some styling in your website. And here CSS comes into action
Its totally operates on properties and value. There are 500+ properties. Which takes almost 100 days to learn all🙁..........Just kidding😬
You don't even need to learn all of them.
You must have heard about "Pareto principle" which states that for many outcomes roughly 80% of consequences come from 20% of the causes
Similarly, in order to cover 80% of CSS, you need to learn only 20 properties😍
The cool part about this 100 Days of Code is that all technologies are interconnected. Like when you're working on CSS, you have to work on HTML as well.
So you'll learn about HTML as well while learning CSS
Some important CSS concepts you need to cover
- Display flex
- Display grid
- Box model
- Background
- Color
- Positioning
- Fonts
In my opinion, 25 to 30 days should be enough for CSS. Although they are not fixed you can arrange them according to you.
To be good developer, you need to Google a lot. How quickly you find your solution on Google makes you a good developer
W3 schools and MDN are documentations where you find detailed explanation on each and every topic
So try to learn from there. Try to put everything into practice.
🔗 CSS: https://t.co/6XnTabhGQX
Congratulations🎉
After 30 days, you will be able to make some static sites, personal website and some stunning landing pages.
Time to rewind all your learning and put them together to create a website.
Structure is done✅
Styling is done✅
Time to add behaviour in your website using JavaScript.
JavaScript is deep so I suggest you to learn it from day 31 to the end (100th day)
JavaScript is used for adding logic in your website.
For ex:
- What happens after the user clicks on the button is controlled by JavaScript
- Increase the likes count when user click on the heart button😉
Basic things you need to cover lin JavaScript are
- Data Types
- Var, const, let
- Operators
- Comparators
- Functions
- Loops
- Control statement
- Arrays
- etc
This may sound challenging and confusing but once you start with it, everthing seems like a cake walk.
Don't rush. Try to take short note for future reference it will help you for sure.
So how we can change thing in HTML using JavaScript?
Here DOM comes into play
With the HTML DOM, JavaScript can access and change all the elements of an HTML document
The DOM is powerful but most beginners avoid it or don't take it seriously. Please do not do this.
DOM mainly revolves around methods and value. By method you select where to change and by value you tell what to change.
By the combination of DOM and JavaScript you can perform a lot of cool things.
- You can change styling
- You can change content
- You can change tags
- You can change attributes
- ETC.....
The combination of HTML, CSS, JavaScript and DOM is the most powerful thing in my opinion and once you learn these things. You will become powerful too💪😉
Start your web development journey today. It's now or never.
Learn JavaScript™ pinned «✨Start your 100 Days of Code for mastering web development ✨ In this 100 Days you need to cover mainly 4 technologies - HTML - CSS - JavaScript - DOM Starting with HTML, its pretty easy and straight forward. It's a markup that totally operates on tag.…»
Learn JavaScript™
✨Start your 100 Days of Code for mastering web development ✨ In this 100 Days you need to cover mainly 4 technologies - HTML - CSS - JavaScript - DOM Starting with HTML, its pretty easy and straight forward. It's a markup that totally operates on tag.…
✨Divide your 100 days of code effectively✨
👇
- HTML (1 - 5 days)
- CSS (6 - 30 days)
- JavaScript (31 - 80 days)
- DOM (81- 100 days)
Be sure to create a project together. This will help you make better understanding⚡
👇
- HTML (1 - 5 days)
- CSS (6 - 30 days)
- JavaScript (31 - 80 days)
- DOM (81- 100 days)
Be sure to create a project together. This will help you make better understanding⚡
Test your website here🚀
👇
🔹Pingdom
🔸Website Speed Test
🔹SEO Site Checkup
🔸Uptrends
🔹Dotcom-Tools
🔸GTmetrix
🔹WebPageTest
🔸Dareboost
🔹SEO site checkup
🔸Small SEO tools
👇
🔹Pingdom
🔸Website Speed Test
🔹SEO Site Checkup
🔸Uptrends
🔹Dotcom-Tools
🔸GTmetrix
🔹WebPageTest
🔸Dareboost
🔹SEO site checkup
🔸Small SEO tools
✨Some important topics of JavaScript before diving into React✨
1️⃣ ES6 classes
Although new developers are working with functional components, there is a possibility that you may encounter old written class component code. So it can be helpful to learn basic of ES6 class.
2️⃣ Basic understanding of var, let and const
You should have the basic understanding of variable declaration. When to use var, let or const. What is the block scope and stuff like that.
For example
3️⃣ Arrow functions syntax
Arrow function is a new ES6 feature that's been used almost widely in modern codebases because it keeps the code concise and readable. It allows a short syntax for writing function expressions.
4️⃣ Destructuring assignment
Destructuring is a convenient way of accessing multiple properties stored in objects and arrays.
Let's say:
5️⃣ Array methods
You will use Array method multiple times. So try to learn them before jumping onto React
Some commonly used functions are
- map
- filter
- reduce
- find
- findIndex
6️⃣ Operators
- Ternary operator
- Spread operator
7️⃣ Callback functions
A function passed as an argument to another function is called a callback if the function invokes the argument at a later time
You will use callbacks while working with hooks, forms, and other things
#JS #Javascript #React
Follow @learn_JavaScript_js for more JavaScript content.
___________________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
1️⃣ ES6 classes
Although new developers are working with functional components, there is a possibility that you may encounter old written class component code. So it can be helpful to learn basic of ES6 class.
2️⃣ Basic understanding of var, let and const
You should have the basic understanding of variable declaration. When to use var, let or const. What is the block scope and stuff like that.
For example
var x = 2;
// Here x is 2
{
let x = 4;
// Here x is 4
}
// Here x is 23️⃣ Arrow functions syntax
Arrow function is a new ES6 feature that's been used almost widely in modern codebases because it keeps the code concise and readable. It allows a short syntax for writing function expressions.
4️⃣ Destructuring assignment
Destructuring is a convenient way of accessing multiple properties stored in objects and arrays.
Let's say:
const scripting_lang = {
firstName: 'Java',
lastName: 'Script'
}
const {firstName, lastName} = scripting_lang;
console.log(firstName); // Java5️⃣ Array methods
You will use Array method multiple times. So try to learn them before jumping onto React
Some commonly used functions are
- map
- filter
- reduce
- find
- findIndex
6️⃣ Operators
- Ternary operator
- Spread operator
doYouLikeMyPosts ? "👍" : "👎";7️⃣ Callback functions
A function passed as an argument to another function is called a callback if the function invokes the argument at a later time
You will use callbacks while working with hooks, forms, and other things
#JS #Javascript #React
Follow @learn_JavaScript_js for more JavaScript content.
___________________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Learn JavaScript™ pinned «✨Some important topics of JavaScript before diving into React✨ 1️⃣ ES6 classes Although new developers are working with functional components, there is a possibility that you may encounter old written class component code. So it can be helpful to learn basic…»
✨A Simple Audio Player with ReactJS and CSS3✨
Demo:
http://cezarsmpio.github.io/react-cl-audio-player/
Source Code:
https://github.com/cezarsmpio/react-cl-audio-player
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Demo:
http://cezarsmpio.github.io/react-cl-audio-player/
Source Code:
https://github.com/cezarsmpio/react-cl-audio-player
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Forwarded from Learn Web Development
✨What does Web Development look like in 2021✨
👇👇👇
- HTML
- CSS
- CSS frameworks
- JS
- DOM
- UI and UX
- RWD
- CLI
- Git and GitHub
- React / Angular / Vue
- NPM
- Node.js
- SQL vs NoSQL
- Databases
- REST
- Postman
- Authentication & Security
- Jamstack
- PWA
- SPA
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development tutorials
👇👇👇
- HTML
- CSS
- CSS frameworks
- JS
- DOM
- UI and UX
- RWD
- CLI
- Git and GitHub
- React / Angular / Vue
- NPM
- Node.js
- SQL vs NoSQL
- Databases
- REST
- Postman
- Authentication & Security
- Jamstack
- PWA
- SPA
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development tutorials
Forwarded from Programming World👨💻 (☠️Anonymus Venom☠️)
🔰Website Of the Day🔰
✨DevInterview✨
Link🔗:
https://devinterview.io/
You can find full-stack, data structures & software architecture interview questions and answers for developers
Follow @Programmingworld_dev for more programming stuff
✨DevInterview✨
Link🔗:
https://devinterview.io/
You can find full-stack, data structures & software architecture interview questions and answers for developers
Follow @Programmingworld_dev for more programming stuff
✨Set-up an audio version of your blog articles [Works Automatically]✨
https://publications.iamroyakash.com/set-up-an-audio-version-of-your-blog-articles-works-automatically
Follow @learn_JavaScript_js for more JavaScript content.
___________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
https://publications.iamroyakash.com/set-up-an-audio-version-of-your-blog-articles-works-automatically
Follow @learn_JavaScript_js for more JavaScript content.
___________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
✨Machine learning with JavaScript in 2021✨
📌 Tensorflow.js
📌 ConvNet.js
📌 Brain.js
📌 Neuro.js
📌 Mind.js
📌 Deeplearn.js
📌 ml5.js
📌 Stdlib-js
📌 NumJs
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
📌 Tensorflow.js
📌 ConvNet.js
📌 Brain.js
📌 Neuro.js
📌 Mind.js
📌 Deeplearn.js
📌 ml5.js
📌 Stdlib-js
📌 NumJs
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
✨JavaScript libraries/frameworks worth learning in 2021✨
🔹React
🔸Angular
🔹Vue
🔸Svelte
🔹Backbone
🔸Ember
🔹Next
🔸Express
🔹Node
🔸Aurelia
🔹Meteor
🔸Polymer
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
🔹React
🔸Angular
🔹Vue
🔸Svelte
🔹Backbone
🔸Ember
🔹Next
🔸Express
🔹Node
🔸Aurelia
🔹Meteor
🔸Polymer
Follow @learn_JavaScript_js for more JavaScript content.
_______________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Web development in real life😜
HTML - Bricks, pillars
CSS - Painting
JavaScript - Electricity connection
DOM - Reconstruction
API - Menu card
Server - Waiter
Database - Restaurant's kitchen
HTML - Bricks, pillars
CSS - Painting
JavaScript - Electricity connection
DOM - Reconstruction
API - Menu card
Server - Waiter
Database - Restaurant's kitchen
Forwarded from Learn Web Development
✨Web developement code snippets for free✨
🔹Codepen
🔸Codesandbox
🔹CSS-Tricks
🔸Hakim .se
🔹Code My UI
🔸CreativesFeed
🔹Bootsnipp
🔸30 seconds of code
🔹30 Seconds of CSS
🔸Stackoverflow
🔹Code to go
🔸Tweetsnippet
🔹GitHub
🔸W3 Schools
🔹EnjoyCSS
🔸Web Code Tool
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development content
🔹Codepen
🔸Codesandbox
🔹CSS-Tricks
🔸Hakim .se
🔹Code My UI
🔸CreativesFeed
🔹Bootsnipp
🔸30 seconds of code
🔹30 Seconds of CSS
🔸Stackoverflow
🔹Code to go
🔸Tweetsnippet
🔹GitHub
🔸W3 Schools
🔹EnjoyCSS
🔸Web Code Tool
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development content
Forwarded from Learn Web Development
✨Quick overview and tips to make you web page responsive✨
https://telegra.ph/Quick-overview-and-tips-to-make-you-web-page-responsive-02-20
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development content
https://telegra.ph/Quick-overview-and-tips-to-make-you-web-page-responsive-02-20
#Webdevelopment #JS #JavaScript #Html #Css #web
Follow @learn_webdevelopment for Web development content
Telegraph
Quick overview and tips to make you web page responsive
👉 ABSTRACT In this I had covered some quick tips and overview of RWD
Free illustrations
👇👇👇
🔹Undraw
🔸Freepik
🔹IRA design
🔸DrawKit
🔹Absurd Illustrations
🔸Handz
🔹freeillustrations .xyz
🔸Freebie Supply
🔹ManyPixels
🔸Vivid.js
🔹Humaaans
🔸Open Doodles
🔹Icons8
🔸Glazestock
🔹Paper illustrations
🔸illlustrations .co
🔹isometric .online
👇👇👇
🔹Undraw
🔸Freepik
🔹IRA design
🔸DrawKit
🔹Absurd Illustrations
🔸Handz
🔹freeillustrations .xyz
🔸Freebie Supply
🔹ManyPixels
🔸Vivid.js
🔹Humaaans
🔸Open Doodles
🔹Icons8
🔸Glazestock
🔹Paper illustrations
🔸illlustrations .co
🔹isometric .online
✨Found this awesome list of 600+ public APIs 😍✨
Everything you need:
🦒 Animals
📗 Books
📈 Crypto
💰 Finance
🕹️ Games
🗺️ Geo
🏛️ Gov
💉 Health
🧳 Jobs
🎵 Music
🛒 Shopping
🐦 Social
💥 Test data
🌥 Weather
👉 and many more ...
🔗Link:
https://github.com/public-apis/public-apis
Everything you need:
🦒 Animals
📗 Books
📈 Crypto
💰 Finance
🕹️ Games
🗺️ Geo
🏛️ Gov
💉 Health
🧳 Jobs
🎵 Music
🛒 Shopping
🐦 Social
💥 Test data
🌥 Weather
👉 and many more ...
🔗Link:
https://github.com/public-apis/public-apis
GitHub
GitHub - public-apis/public-apis: A collective list of free APIs
A collective list of free APIs. Contribute to public-apis/public-apis development by creating an account on GitHub.
Forwarded from Learn CSS™
✨CSS Animation generators 🎨✨
➢ https://t.co/85G4Jsh1WZ
➢ https://t.co/4N7CrWPJgZ
➢ https://t.co/O7KpqDNqDc
➢ https://t.co/lh2n6duBex
➢ https://t.co/7FPOsSYjmf
➢ https://t.co/LvjzKmaHgS
#Css #cssresources #css3
Follow @learn_CSS_web for more CSS Content
➢ https://t.co/85G4Jsh1WZ
➢ https://t.co/4N7CrWPJgZ
➢ https://t.co/O7KpqDNqDc
➢ https://t.co/lh2n6duBex
➢ https://t.co/7FPOsSYjmf
➢ https://t.co/LvjzKmaHgS
#Css #cssresources #css3
Follow @learn_CSS_web for more CSS Content