You can use HTML entity or HTML code to print some cool symbols or icons
Check out the full list👇
https://www.toptal.com/designers/htmlarrows/symbols/
Check out the full list👇
https://www.toptal.com/designers/htmlarrows/symbols/
Forwarded from Learn Web Development
If you're learning or planning to learn Web Development in 2021 then this is for you👇
WHERE TO START? Front-end or Backend?
- Well this may be a debatable question but I would suggest you to start with front-end development
- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.
WHY TO START WITH FRONT-END DEVELOPMENT?
- More visual content gives you an aesthetic vibe
- You can share your creations
- Easier to get feedback as you can show your webpages to any non technical person as well
WHY TO START WITH FRONT-END DEVELOPMENT?
- More visual content gives you an aesthetic vibe
- You can share your creations
- Easier to get feedback as you can show your webpages to any non technical person as well
FUNDAMENTALS ARE IMPORTANT
- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages
- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript
- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library
-DOCUMENT YOUR LEARNING✍️
- Take a short note of what you learn on the daily basis will be helpful in the long term
- Whenever you go for an interview or some test, you can revise through your notes
- You can also share your learning, projects or anything on social media. It also helps you to be up-to-date
- Write your achievements or failures while learning a specific topic, create tutorials, write article, etc
There are a lot of free tools and courses on the internet you can start with
- I always recommend start with a crash course so that you can have taste of things. Later on, you can buy a course or learn by self teaching
DYNAMIC FIELD🚀
- Web development is a constantly evolving field. To be a great developer, you need to stay updated
- Almost daily, we come across with new concepts, technique, framework, library, designs, etc. So as to survive strongly in this world, you should be updated
- In order to keep up with these, You can read latest article, watch YouTubers, be active on social media, etc
- It will be more beneficial if you can put new concepts into practice. It will help you to understand a specific concept more accurately and effectively
THERE IS ALWAYS A SLIGHT MARGIN TO IMPROVE🍀
- You can't be perfect in this field but you can try to be
- Always be open to learn new things, as this is the vast field learning new techniques always pays off
BE POSITIVE😁
- During your journey you will face many challenges. But it does not matter. What matters is your attitude towards your problems
- Frustration is the basic side effect of coding. Just take a break. No need to burden yourself
This all may sound like a little hectic but it's actually not.
Do not burden yourself. Just try to code daily so that you can develop consistency inside you. Does not matter for hours or minutes
That's pretty much it. Don't think much just start. Let me know if i can help you in any way
All the best😄
WHERE TO START? Front-end or Backend?
- Well this may be a debatable question but I would suggest you to start with front-end development
- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.
WHY TO START WITH FRONT-END DEVELOPMENT?
- More visual content gives you an aesthetic vibe
- You can share your creations
- Easier to get feedback as you can show your webpages to any non technical person as well
WHY TO START WITH FRONT-END DEVELOPMENT?
- More visual content gives you an aesthetic vibe
- You can share your creations
- Easier to get feedback as you can show your webpages to any non technical person as well
FUNDAMENTALS ARE IMPORTANT
- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages
- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript
- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library
-DOCUMENT YOUR LEARNING✍️
- Take a short note of what you learn on the daily basis will be helpful in the long term
- Whenever you go for an interview or some test, you can revise through your notes
- You can also share your learning, projects or anything on social media. It also helps you to be up-to-date
- Write your achievements or failures while learning a specific topic, create tutorials, write article, etc
There are a lot of free tools and courses on the internet you can start with
- I always recommend start with a crash course so that you can have taste of things. Later on, you can buy a course or learn by self teaching
DYNAMIC FIELD🚀
- Web development is a constantly evolving field. To be a great developer, you need to stay updated
- Almost daily, we come across with new concepts, technique, framework, library, designs, etc. So as to survive strongly in this world, you should be updated
- In order to keep up with these, You can read latest article, watch YouTubers, be active on social media, etc
- It will be more beneficial if you can put new concepts into practice. It will help you to understand a specific concept more accurately and effectively
THERE IS ALWAYS A SLIGHT MARGIN TO IMPROVE🍀
- You can't be perfect in this field but you can try to be
- Always be open to learn new things, as this is the vast field learning new techniques always pays off
BE POSITIVE😁
- During your journey you will face many challenges. But it does not matter. What matters is your attitude towards your problems
- Frustration is the basic side effect of coding. Just take a break. No need to burden yourself
This all may sound like a little hectic but it's actually not.
Do not burden yourself. Just try to code daily so that you can develop consistency inside you. Does not matter for hours or minutes
That's pretty much it. Don't think much just start. Let me know if i can help you in any way
All the best😄
John Hopkins University is offering this free course on HTML, CSS, and JavaScript for Web Developers.
Link:
https://www.coursera.org/learn/html-css-javascript-for-web-developers
Link:
https://www.coursera.org/learn/html-css-javascript-for-web-developers
Forwarded from Learn CSS™
Charts.css is a CSS-only charting framework. Looks great and very customizable!
https://chartscss.org/
https://chartscss.org/
chartscss.org
Charts.css
CSS data visualization framework
Forwarded from Learn Web Development
40+ High-Quality Free Resources for Web Development
Illustrations
1. Drawkit
http://drawkit.io
2. Blush
( http://blush.design )
3. Smash illustration
( http://usesmash.com )
4. Control
( http://control.rocks )
5. Error 404
( http://error404.fun )
6. Open Doodles
( http://opendoodles.com )
Development
1. Carbon
( http://carbon.now.sh )
2. Squoosh
( http://squoosh.app )
3. Wappalyzer
( http://wappalyzer.com )
4. Kite
( http://kite.com )
5. DevHints
( http://devhints.io )
6. iHateRegex
( http://ihateregex.io )
7. DevDocs
( http://devdocs.io/css/css_animations …)
CSS
1. Animista
( http://animista.net )
2. Pattern.css
( http://bansal.io/pattern-css )
3. CSSeffectsSnippets
( http://emilkowalski.github.io/css-effects-snippets …)
4. 98.css
( http://jdan.github.io/98.css )
Tailwind
1. TailwindComponents
( http://tailwindcomponents.com )
2. Tailblocks
( http://mertjf.github.io/tailblocks/ )
Design
1. Colors .lol
( http://colors.lol )
2. Colormind
( http://colormind.io )
3. FontSpark
( http://fontspark.app )
4. AppMockUp
( http://app-mockup.com )
5. Webframe
( http://webframe.xyz )
6. Ucraft Logo Maker
( http://ucraft.com/free-logo-maker )
7. HackDesign
( http://hackdesign.org/lessons )
8. Checklist Design
( http://checklist.design )
9. Remove BG
( http://remove.bg )
10. Unscreen
( http://unscreen.com )
Productivity
1. GetTerms
( http://getterms.io )
2. Sejda
( http://sejda.com )
3. Notion
( http://notion.so )
4. Grammarly
( http://grammarly.com )
5. Wave
( http://waveapps.com )
6. Clockify
( http://clockify.me )
7. Untools
( http://untools.co )
8. Evernote
( http://evernote.com )
9. Top Hunts Time Machine
( http://timemachine.betamode.dev )
10. OpensSource Builders
( http://opensource.builders )
Follow @learn_webdevelopment for Web development content
Illustrations
1. Drawkit
http://drawkit.io
2. Blush
( http://blush.design )
3. Smash illustration
( http://usesmash.com )
4. Control
( http://control.rocks )
5. Error 404
( http://error404.fun )
6. Open Doodles
( http://opendoodles.com )
Development
1. Carbon
( http://carbon.now.sh )
2. Squoosh
( http://squoosh.app )
3. Wappalyzer
( http://wappalyzer.com )
4. Kite
( http://kite.com )
5. DevHints
( http://devhints.io )
6. iHateRegex
( http://ihateregex.io )
7. DevDocs
( http://devdocs.io/css/css_animations …)
CSS
1. Animista
( http://animista.net )
2. Pattern.css
( http://bansal.io/pattern-css )
3. CSSeffectsSnippets
( http://emilkowalski.github.io/css-effects-snippets …)
4. 98.css
( http://jdan.github.io/98.css )
Tailwind
1. TailwindComponents
( http://tailwindcomponents.com )
2. Tailblocks
( http://mertjf.github.io/tailblocks/ )
Design
1. Colors .lol
( http://colors.lol )
2. Colormind
( http://colormind.io )
3. FontSpark
( http://fontspark.app )
4. AppMockUp
( http://app-mockup.com )
5. Webframe
( http://webframe.xyz )
6. Ucraft Logo Maker
( http://ucraft.com/free-logo-maker )
7. HackDesign
( http://hackdesign.org/lessons )
8. Checklist Design
( http://checklist.design )
9. Remove BG
( http://remove.bg )
10. Unscreen
( http://unscreen.com )
Productivity
1. GetTerms
( http://getterms.io )
2. Sejda
( http://sejda.com )
3. Notion
( http://notion.so )
4. Grammarly
( http://grammarly.com )
5. Wave
( http://waveapps.com )
6. Clockify
( http://clockify.me )
7. Untools
( http://untools.co )
8. Evernote
( http://evernote.com )
9. Top Hunts Time Machine
( http://timemachine.betamode.dev )
10. OpensSource Builders
( http://opensource.builders )
Follow @learn_webdevelopment for Web development content
Forwarded from Learn JavaScript™
20 Cheat Sheets Website For Developers
1. OverAPI
OverAPI is a website that aggregates cheat sheets for many popular web programming languages such as Javascript, NodeJS, PHP, Python, CSS.
https://overapi.com/
2. Awesome-Cheatsheets
It is a collection of popular web programming language Cheatsheets.
https://lecoupa.github.io/awesome-cheatsheets/
3. Bootstrap-4 Cheat Sheet
Bootstrap 4 Cheat Sheet is a site that aggregates all the functions and displays the components in Bootstrap version 4.3.1
https://hackerthemes.com/bootstrap-cheatsheet/
4. GitSheet
GitSheet is an aggregator of commands that you often use with Git. For each statement, it describes detail usage.
https://gitsheet.wtf/
5. HTML5 Element Index
The HTML5 element index is a web page aggregating new or redefined objects in the HTML5 version.
http://html5doctor.com/element-index/
6. HTML CheatSheet
HTML CheatSheet is a website that synthesizes useful examples and tools for web developers to help us reduce the time and effort in web development such as choosing colors, creating links, creating images, create tables ... for HTML
https://htmlcheatsheet.com/m/?__twitter_impression=true
7. Can I Use
Can I Use is a website that provides information about each different browser version, it will help programmers know which web technology can be used for those browsers.
https://caniuse.com/
8. Rico's cheatsheets
Rico's cheatsheets is an almost complete aggregation cheatsheet for web developers such as React, Vue, ES6, Vim, Kotlin. each category, will be divided into many smaller sections to help you easily find the cheatsheet you want.
https://devhints.io/
9. Cheatography
Cheatography is also a collection of cheat sheets for web development and is divided into several sub-categories such as Miscellaneous, Network, DevOps, Database, Programming Language
https://cheatography.com/programming/
10. CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet is a collection of CSS3 animations for your web project. You just need to load the animations.css file and call the effect class you want for the object in the HTML.
http://www.justinaguilar.com/animations/
11. CSS Grid Cheat Sheet
CSS Grid Cheat Sheet is a website that helps you create a grid system using CSS3 for web pages easily. With tools that support full features such as defining grid-template-columns, grid-template-rows, grid-column-gap
https://alialaa.github.io/css-grid-cheat-sheet/
12. Grid
Grid is a web page that aggregates complete detailed examples for each property used in defining the CSS3 grid system for a website.
https://grid.malven.co
13. Media Queries Cheat Sheet
https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
14. Responsive Web Design Cheat Sheet
https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf
15. HTML5 Canvas Cheat Sheet
https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
16. Web Developer's SEO Cheat Sheet
https://moz.com/learn/seo/seo-cheat-sheet
17. Modern JavaScript Cheatsheet
https://mbeaudru.github.io/modern-js-cheatsheet/
18. HTML5 Security Cheatsheet
https://html5sec.org/
19. Html Vocabulary
http://apps.workflower.fi/vocabs/html/en#children
20. Regex Cheat Sheet
https://dev.to/emmabostian/regex-cheat-sheet-2j2a
Follow @learn_JavaScript_js for more JavaScript content.
1. OverAPI
OverAPI is a website that aggregates cheat sheets for many popular web programming languages such as Javascript, NodeJS, PHP, Python, CSS.
https://overapi.com/
2. Awesome-Cheatsheets
It is a collection of popular web programming language Cheatsheets.
https://lecoupa.github.io/awesome-cheatsheets/
3. Bootstrap-4 Cheat Sheet
Bootstrap 4 Cheat Sheet is a site that aggregates all the functions and displays the components in Bootstrap version 4.3.1
https://hackerthemes.com/bootstrap-cheatsheet/
4. GitSheet
GitSheet is an aggregator of commands that you often use with Git. For each statement, it describes detail usage.
https://gitsheet.wtf/
5. HTML5 Element Index
The HTML5 element index is a web page aggregating new or redefined objects in the HTML5 version.
http://html5doctor.com/element-index/
6. HTML CheatSheet
HTML CheatSheet is a website that synthesizes useful examples and tools for web developers to help us reduce the time and effort in web development such as choosing colors, creating links, creating images, create tables ... for HTML
https://htmlcheatsheet.com/m/?__twitter_impression=true
7. Can I Use
Can I Use is a website that provides information about each different browser version, it will help programmers know which web technology can be used for those browsers.
https://caniuse.com/
8. Rico's cheatsheets
Rico's cheatsheets is an almost complete aggregation cheatsheet for web developers such as React, Vue, ES6, Vim, Kotlin. each category, will be divided into many smaller sections to help you easily find the cheatsheet you want.
https://devhints.io/
9. Cheatography
Cheatography is also a collection of cheat sheets for web development and is divided into several sub-categories such as Miscellaneous, Network, DevOps, Database, Programming Language
https://cheatography.com/programming/
10. CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet is a collection of CSS3 animations for your web project. You just need to load the animations.css file and call the effect class you want for the object in the HTML.
http://www.justinaguilar.com/animations/
11. CSS Grid Cheat Sheet
CSS Grid Cheat Sheet is a website that helps you create a grid system using CSS3 for web pages easily. With tools that support full features such as defining grid-template-columns, grid-template-rows, grid-column-gap
https://alialaa.github.io/css-grid-cheat-sheet/
12. Grid
Grid is a web page that aggregates complete detailed examples for each property used in defining the CSS3 grid system for a website.
https://grid.malven.co
13. Media Queries Cheat Sheet
https://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
14. Responsive Web Design Cheat Sheet
https://uxpin.s3.amazonaws.com/responsive_web_design_cheatsheet.pdf
15. HTML5 Canvas Cheat Sheet
https://simon.html5.org/dump/html5-canvas-cheat-sheet.html
16. Web Developer's SEO Cheat Sheet
https://moz.com/learn/seo/seo-cheat-sheet
17. Modern JavaScript Cheatsheet
https://mbeaudru.github.io/modern-js-cheatsheet/
18. HTML5 Security Cheatsheet
https://html5sec.org/
19. Html Vocabulary
http://apps.workflower.fi/vocabs/html/en#children
20. Regex Cheat Sheet
https://dev.to/emmabostian/regex-cheat-sheet-2j2a
Follow @learn_JavaScript_js for more JavaScript content.
Forwarded from Learn CSS™
CSS Generators
https://telegra.ph/CSS-Generators-03-22
https://telegra.ph/CSS-Generators-03-22
Telegraph
CSS Generators
1 . Neumorphism/Soft UI generator CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its possibilities. Link: neumorphism.io 2 . Smooth Shadow generator Link: shadows.brumm.af 3 . Fancy Border…
Let's compare web development to ourselves
- We have a structure of bones and skin, which is HTML 🚹
- We can do makeup by wearing trendy clothes, which is CSS 🧥🕴️
- We can walk, talk, jump, code, swim, Which is JavaScript🤸🏃⛹️🏋️🚴🤹🏌️⛷️🚣🏊🏇
That's why mastering JavaScript is tough
Like it's tough to learn gymnastics, baseball, weight lifting, cycling, ringleader, golf, skiing, boating, swinging, horse riding, etc in one single life.
But we can try to further our expertise😉💪
- We have a structure of bones and skin, which is HTML 🚹
- We can do makeup by wearing trendy clothes, which is CSS 🧥🕴️
- We can walk, talk, jump, code, swim, Which is JavaScript🤸🏃⛹️🏋️🚴🤹🏌️⛷️🚣🏊🏇
That's why mastering JavaScript is tough
Like it's tough to learn gymnastics, baseball, weight lifting, cycling, ringleader, golf, skiing, boating, swinging, horse riding, etc in one single life.
But we can try to further our expertise😉💪
Project ideas at each level👇
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe
📌 HTML
- Simple portfolio
📌 CSS
- Portfolio with styling
- Tribute page
- Parallax Website
📌 CSS framework
- Landing page
- Survey forms
📌 JavaScript
- Clock
- Navigation bar
- TO-DO app
- Quiz app
- Blog
- Animated menu
- Tic Tac Toe