An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Engadget
- Smashing Apps
- Abduzeedo
- You The Designer
- Web Designer Depot
- Naldz Graphics
- Crazy Leaf Design
- Stylized Web
- Freelance Switch
- Willems Lab
Help Webnuz
Referal links:
August 9, 2020 02:20 pm GMT
Original Link: https://dev.to/jatinrao/resources-for-frontend-developers-1l9i
Resources for Frontend Developers
Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some great free and up-to-date resources!
HTML
| Resource | Description |
|---|---|
| W3C Markup Validator | Check the markup of Web documents |
| Meta Tags | Preview, edit, and generate meta tags |
| Favicon Generator | Convert any GIF, PNG, or JPG to ICO |
CSS
| Resource | Description |
|---|---|
| W3C CSS Validator | CSS Validation Service |
| Animate.css | Just-add-water CSS animations |
| animista | CSS animations on demand |
| CSSeffectsSnippets | A collection of CSS effects |
| SpinKit | A collection of loading indicators animated with CSS |
| CSS Minifier | Online CSS minifier/compressor |
JAVASCRIPT
| Resource | Description |
|---|---|
| JavaScript 30 | Build 30 things with vanilla JS in 30 days |
| Codewars | Improve your skills by training with others on real code challenges |
| ESLint | Find and fix problems in your JavaScript code |
| Prettier | Opinionated Code Formatter |
ICONS
| Resource | Description |
|---|---|
| Font Awesome | The web's most popular icon set and toolkit |
| Feather | Simply beautiful open-source icons |
| Ionicons | Beautifully crafted open-source icons |
| Simple Icons | Free SVG icons for popular brands |
| Material Design Icons | Delightful, beautifully crafted symbols for common actions and items |
COLORS
| Resource | Description |
|---|---|
| Material Design Colors | Material design colors |
| Flat UI Colors 2 | A total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs |
| Color Hunt | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| Color Space | Color palettes generator and color gradient tool |
| uiGradients | Beautiful colored gradients |
ILLUSTRATIONS
| Resource | Description |
|---|---|
| Undraw | A constantly updated collection of beautiful SVG images |
| manypixels | Royalty-free illustrations |
| IRA Design | Build your own amazing illustrations |
| Free Illustrations by Lukasz Adam | Free SVG images |
| Blobmaker | Online SVG blob maker |
| Get Waves | Create SVG waves for your next design |
IMAGES
| Resource | Description |
|---|---|
| Unsplash | The internets source of freely useable images |
| Pexels | The best free stock photos & videos shared by talented creators |
| Burst | Free stock photos for websites and commercial use |
| ISO Republic | Thousands of Free High-Resolution CC0 Photos and Videos |
| Pixabay | Stunning free images & royalty-free stock |
| StockSnap.io | Beautiful free stock photos |
| Photopea | Advanced online photo editor |
| Online Image Compressor | Compress up to 20 images at a time |
| Bulk Resize Photos | The fastest online photo size reducer |
READINGS
| Resource | Description |
|---|---|
| Front-end Developer Handbook 2019 | A guide that everyone can use to learn about the practice of front-end development |
| HackerRank 2020 Developer Skills Report | Insights based on 116,648 developers |
| Stack Overflow Developer Survey 2020 | Insights based on nearly 65,000 developers |
| HTML & CSS | A nicer way to learn about HTML & CSS |
| Refactoring UI | Make your ideas look awesome, without relying on a designer |
| airbnb JavaScript Style Guide | A mostly reasonable approach to JavaScript |
| JavaScript & jQuery | A nicer way to learn JavaScript & jQuery |
| You Don't Know JS | A book series on JavaScript |
| Eloquent JavaScript | A modern introduction to programming |
| Learning JavaScript Design Patterns | A JavaScript and jQuery's developer guide |
| Web Content Accessibility Guidelines (WCAG) 2.1 | Covers a wide range of recommendations for making Web content more accessible |
OTHERS
| Resource | Description |
|---|---|
| web.dev | See how well your website performs; uses Lighthouse |
| Shape Divider | A tool to generate sleek dividers for your website |
| GTmetrix | Tool that analyzes your page's speed performance |
| Can I Use | Support tables for HTML, CSS, etc |
| Carbon | Create and share beautiful images of your source code |
| Wappalyzer | Identify technologies on websites |
ACCESSIBILITY
| Resource | Description |
|---|---|
| NV Access | Screen reader for Microsoft Windows |
| ChromeVox Chrome Extension | Screen reader by Google |
| axe Chrome Extension | Accessibility testing in Chrome Developer Tools |
DEPLOYMENT
| Resource | Description |
|---|---|
| GitHub Pages | Free web hosting service by GitHub |
| Netlify | Deploy your site in 30 seconds |
| Vercel | Ship your site in seconds |
| Surge | Simple, single-command web publishing |
Conclusion
I hope all of these resources can help you build better websites and apps as they have helped me! If you have another favorite resource, please write them up in the comments below.
I was inspired by this post by @denicmarko to put some of my favorite resources
Thanks for reading
Original Link: https://dev.to/jatinrao/resources-for-frontend-developers-1l9i
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To