All web development resources that you will ever need! 😉
❗ If you are new to web development that's okay, just take a look at developer roadmaps section and take your road. ❗
😎 Created by Martin Stefanovic.
- Developer tools
- APIs
- Coding challenges
- Frontend
| Website | Description | Price |
|---|---|---|
| w3schools | HTML, CSS, JavaScript, PHP... | Free |
| Udemy | All types of courses. | Paid |
| Skillshare | All types of courses. | Paid |
| Linkedin Learning | All types of courses. | Free trial, Paid |
| CodeCademy | All types of courses. | Free, Paid |
| Developer |
|---|
| Frontend |
| Backend |
| Angular |
| React |
| VueJS |
| DevOps |
| UI & UX |
Next step: jQuery, Angular, React, VueJS...
| Website |
|---|
| CodeCademy - Introduction to JS Course |
| Free Code Camp |
| Eloquent JavaScript |
| JavaScript Design Patterns |
| HTML DOM |
| Website |
|---|
| Learn jQuery from Scratch |
| jQuery Learning Center |
| w3schools jQuery |
| jQuery Cheet Sheet |
| Channel | Description |
|---|---|
| DesignCourse | Web design, Frontend... |
| Fireship | Frontend, Backend |
| Ben Awad | Frontend, Backend |
| Website |
|---|
| UpWork |
| Fiverr |
| Envato |
| Toptal |
| Website | Description | Price |
|---|---|---|
| Visual Studio Code | Coding | Free |
| Sublime Text | Coding | Free |
| Notepad++ | Coding | Free |
| WebStorm | Coding | Paid |
| Postman | For APIs | Free |
| Koala | Less, Sass compiler | Free |
| GIT | Git is a free and open source distributed version control system | Free |
| Clippy | The clip-path property allows you to make complex shapes in CSS | Free |
| CSS Effects | Click on the animation to copy the css | Free |
| CSS Gradient generator | CSS Gradient | Free |
| Icomoon | Gradient SVG icons to FONT | Free |
| CSS Separator generator | Separator | Free |
| Fancy border radius generator | Free |
| Website |
|---|
| Driibbble |
| Behance |
| Awwwards |
| Screenlane |
| Website | Description | Price |
|---|---|---|
| Ionicons | From ionic library | Free |
| Iconfinder | Free, Paid | |
| Flaticons | Free, Paid | |
| css.gg | Open-source | Free |
| IconsSVG | Quick customizable icons | Free |
| Bootstrap icons | From Bootstrap library | Free |
| Material icons | Material icons | Free |
| Website | Price |
|---|---|
| Pexels | Free |
| Unsplash | Free |
| Freephotos | Free |
| Website | Description |
|---|---|
| ColorsAndFonts | Color and typography resources. |
| HtmlColorCodes | Color picker |
| CSS Gradient | Generate CSS gradient |
| UI Gradients | Cool gradients |
| Website | Price |
|---|---|
| UnDraw | Free |
| Freepik | Free, Paid |
| DrawKit | Free |
| Humaaans | Free, Paid |
| Website | Description |
|---|---|
| Google Fonts | The best source of web fonts |
| Website | Description | Price |
|---|---|---|
| Adobe XD | Web design, Mobile design, Prototyping... | Free, Paid |
| Figma | Web design, Mobile design, Prototyping... | Free, Paid |
| Adobe Illustrator | Best for illustrations. | Free trial, Paid |
| Adobe Photoshop | Best for photo editing. | Free trial, Paid |
| Website | Description | Price |
|---|---|---|
| Clockify | Track time from anywhere — all data is synced online. | Free |
| Trello | Collaboration tool that organizes your projects into boards. | Free, Paid |
| Slack | Slack is like a chatroom for your whole team | Free, Paid |
| Extension | Description |
|---|---|
| Wappalyzer | Identify web technologies |
| Fonts Ninja | Identify fonts from any website |
| Color Zilla | Get a color from any point in your browser |
| JSONView | Validate and view JSON documents |
| Web Developer | Various web developer tools |
| Clockify Time Tracker | Track time from anywhere on the web |
| GoFullPage | Capture a screenshot of your current page |
| Muzli 2 | The freshest links about design |
| Augury | For debugging and profiling Angular applications |
| Website | Description |
|---|---|
| Angular Doc | Official documentation |
| Angular CLI | Official documentation |
| Nebular | Customizable UI Kit, Auth & Security |
| PrimeNG | Angular UI Component Library |
| Dragula | Drag and drop library |
| SortableJS | Drag and drop, sort |
| Website | Description |
|---|---|
| React Doc | Official documentation |
| Website | Description |
|---|---|
| Advanced Custom Fields | Full control of your WordPress edit screens & custom field data |
| Uber Menu | Advanced website menu |
| Admin Columns | Manage and organize columns in the posts... in the WordPress admin panel |
| Ajax Pagination | Load paged content with Ajax throughout your WordPress site |
| Website | Description |
|---|---|
| Bootstrap | Most popular front-end open source toolkit |
| Tailwind | A utility-first CSS framework |
| MaterializeCSS | Set of libraries/framework built to conform to the standard material design system. |
| Bulma | Free, open source framework that provides ready-to-use frontend components |
| Semantic UI | Free, open source framework that provides ready-to-use frontend components |
| Website | Description |
|---|---|
| JSONPlaceholder | Free to use fake online REST API for testing and prototyping |
| Lorem Picsum | The Lorem Ipsum for photos |
| OpenWeather | Free weather API from |
| Quotes | More than 1 million+ quotes |
| News API | Retrieve articles and breaking news headlines from news sources and blogs... |
| Random User | Random User Generator |
| Website | Description |
|---|---|
| Frontend Mentor | Real-world HTML, CSS and JavaScript challenges |
| Flexbox Froggy | Flexbox game |
| Flexbox Defense | Flexbox game |
| CSS Grid Garden | CSS Grid game |
| CSS Diner | CSS Selectors |
| Learning GIT Branching | Git |
| CSS Battle | CSS |
| HEX Invaders | Learn HEX Colors |
HTML and CSS are very simple, once you learn this go to SCSS to speed up writing styles.
Pay special attention to the flexbox.
Don`t forget to check some CSS games on Coding Challenges section.
Next step: Javascript
| Website | Description |
|---|---|
| freeCodeCamp | HTML, CSS, Responsive Web Design |
| w3schools | HTML, CSS etc. |
| CSS Grid | CSS Grid |
| Guide to Flexbox | Flexbox |
| Media queries | Responsive design |
| Data attributes | You will need data attributes to store some data |
| SCSS | Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins... |
| Website | Description |
|---|---|
| A Nerd’s Guide to Color on the Web | Colors |
| 101 UX Principles (SR: 101 princip za dobar UX dizajn) | User Experience - Book |
| The Principles of Beautiful Web Design (SR: Principi lepog dizajna) | User Interface - Book |