https://github.com/guidefari/dev-toolbox
A curated list of useful tools for those just getting started with Web Development.
https://github.com/guidefari/dev-toolbox
Last synced: 6 months ago
JSON representation
A curated list of useful tools for those just getting started with Web Development.
- Host: GitHub
- URL: https://github.com/guidefari/dev-toolbox
- Owner: guidefari
- Created: 2020-04-13T09:02:27.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T10:17:46.000Z (almost 6 years ago)
- Last Synced: 2025-04-02T02:44:27.085Z (over 1 year ago)
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dev-toolbox
> A curated list of useful tools for those just getting started with Web Development. This is by no means a list of everything you need to know, nor is it exhaustive. Merely a collection of tools & resources we have found to be useful while on the development path.
## Education Resources
- [Brad Traversy](https://www.traversymedia.com/): This is probably the best starting point to get a feel of what Web Development is today.
- [freeCodeCamp](https://www.freecodecamp.org/learn/): Tutorial based learning, good starting point for html, css & js.
- [Open Source Contribution](https://github.com/freeCodeCamp/how-to-contribute-to-open-source): The most comprehensive guide for beginners to open source software contribution.
- [Javascript Modules](https://wesbos.com/javascript-modules) - Intro to npm, ES6 modules, & a bit of information on Bundlers, for Front-End Development.
- [Grid By Example](https://gridbyexample.com/) - Everything you need to learn CSS grid.
## Basic Toolbox - Items you're likely to use everyday
- [Text Editors](https://www.techradar.com/best/best-text-editors): Check all these text-editors out and choose one you're comfortable with.
- [Mozilla](https://www.mozilla.org/en-US/firefox/new/): When dealing with CSS grid & flexbox, Mozilla delivers much more solid dev tools.
- [Netlify](https://www.netlify.com/): Host static sites for free from github repo, start learning how to deploy sites and a lot more.
## Essential Text Editor plugins
- Live server: Development local server.
- Prettier: Code formater, for consistency across all your projects' code.
- GitHub intergration: Makes for easier learning of git for beginners.
## Design Toolbox
- [Figma](https://www.figma.com/downloads/) & [XD](https://www.adobe.com/products/xd.html): Recommended for prototyping, an essential part of the design process.
- [HTML5up](https://html5up.net/): Free HTML & CSS3 templates
- [UI Design Daily](https://uidesigndaily.com/) - Free design templates for popular prototyping software.
- [ScrollWatch](https://edull24.github.io/ScrollWatch/0): Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position.(Javascript)
- [Fonts](https://fonts.google.com/): Google fonts
- [FontJoy](https://fontjoy.com/): Font pairing generator
- [Color Palettes](https://www.designbombs.com/best-online-color-palette-generators/): An essential part of the design process.
- [Fun Dummy text generators](https://loremipsum.io/ultimate-list-of-lorem-ipsum-generators/): Plain lorem ipsum gets a bit boring, for me at least. Also, this site is very beautiful.
- [CSS Grid generator](https://cssgrid-generator.netlify.app/): Quick starting templates for your grids, customizable on the site too.
- [Curated Design tools](https://github.com/kudapara/curated-design-tools): More extensive design toolbox
- [Design tools for devs](https://github.com/bradtraversy/design-resources-for-developers) - Extensive design toolbox by [Brad Traversy](https://www.traversymedia.com/)
## Slightly more advanced toolbox - Want to challenge yourself more?
- [App Ideas](https://flaviocopes.com/sample-app-ideas/): Tired of hearing about building a to-do list web-app? A teacher worth following has a bunch of ideas listed .
## Freelance Development useful links
- [Drafting your own contract](https://www.smashingmagazine.com/2009/10/freelance-contracts-dos-and-donts): Blog post to help with drafting your contracts for clients, a **must** before taking up any jobs.
- [More contract drafting links](https://www.smashingmagazine.com/2013/04/legal-guide-contract-samples-for-designers/)
- [Free SSL Certificates](https://letsencrypt.org/): Provided by Let's encrypt, good for dealing with real SSL certificates whilst learning or deploying client sites. Most hosting providers these days however, provide SSL certificates in their packages.
## Similar Repositories & References
- [Andreasbm web skills](https://andreasbm.github.io/web-skills/): Almost all up to date technologies that are at your disposal as a web developer.
- [Roadmap](https://roadmap.sh/): Another very comprehensive roadmap that I've referred to a few times.
- [Awesome tools for junior developers](https://github.com/stephhappens/awesome-tools-for-junior-developers): Covers relevant resources help with all sorts, from education to entertainment.