Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kamilsobik/awesome-frontend-list

Awesome frontend list
https://github.com/kamilsobik/awesome-frontend-list

List: awesome-frontend-list

awesome awesome-list frontend resources

Last synced: about 1 month ago
JSON representation

Awesome frontend list

Awesome Lists containing this project

README 

        
# awesome-frontend-list

Below you can find usefull links for frontend developer.



## Contents

- [HTML](#HTML)

- [CSS](#CSS)

- [JavaScript](#JavaScript)

- [TypeScript](#TypeScript)

- [Frameworks](#Frameworks)

- [Challenges](#Challenges)

- [Helpful links](#helpful-links)



## HTML

- [HTML DevDocs](https://devdocs.io/html/) - HTML documentation

- [MMCSchool](https://mmcschool.pl/#courses) - Very usefull courses - HTML, CSS, SASS and RWD



## CSS

- [CSS DevDocs](https://devdocs.io/css/) - CSS documentation

- [CSS Tricks](https://css-tricks.com/) - Daily articles about CSS, HTML, JavaScript, and all things related to web design and development

- [Grid](https://cssgridgarden.com) - Game for learning Grid

- [Flexbox](https://flexboxfroggy.com) - Game for learning flexbox

- [SASS](https://sass-lang.com/) - SASS documentation



## JavaScript

- [JavaScript DevDocs](https://devdocs.io/css/) - JavaScript documentation

- [JavaScript roadmap](https://roadmap.sh/javascript) - JavaScript roadmap

- [JavaScript course](https://www.udemy.com/course/the-complete-javascript-course/) - The Complete JavaScript Course 2023: From Zero to Expert!

- [Od Zera do JavaScript Developera](https://www.youtube.com/watch?v=LORNrvM4AzY) - Videos of 8 meetings to learn JavaScript from 0 to programmer

- [Programowanie w JavaScript od Zera do Mastera](https://www.udemy.com/course/kurs-programowanie-w-javascript-od-zera-do-mastera/?utm_source=aff-campaign&utm_medium=udemyads&LSNPUBID=%2FS7qeUbCw0o&ranMID=47907&ranEAID=%2FS7qeUbCw0o&ranSiteID=_S7qeUbCw0o-3fp7mg6lvhUlWl8z4L80pA) - Programming course in JavaScript from Zero to Master

- [The Complete Guide 2023](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/?utm_source=aff-campaign&utm_medium=udemyads&LSNPUBID=%2FS7qeUbCw0o&ranMID=47907&ranEAID=%2FS7qeUbCw0o&ranSiteID=_S7qeUbCw0o-F7eAObkWCa9IxzYWyypCTw) - JavaScript - The Complete Guide 2023 (Beginner + Advanced)

- [Understanding the Weird Parts](https://www.udemy.com/course/understand-javascript/?utm_source=aff-campaign&utm_medium=udemyads&LSNPUBID=%2FS7qeUbCw0o&ranMID=47907&ranEAID=%2FS7qeUbCw0o&ranSiteID=_S7qeUbCw0o-6TfMHZxxHcZhTJv9QbQr1g) - An advanced JavaScript course for everyone! Scope, closures, prototypes, 'this', build your own framework, and more

- [JavaScript Full Course (2023)](https://www.youtube.com/watch?v=SBmSRK3feww&ab_channel=SuperSimpleDev) - JavaScript Full Course (2023) - Beginner to Pro

- [JavaScript Info](https://javascript.info/) - Website that provides information about JavaScript, including tutorials, exercises, and references

- [web.dev](https://web.dev/) - Keep up to date with the lastest news from the major browser engines

- [Eloquent JavaScript](https://eloquentjavascript.net/) - This is a book about JavaScript, programming, and the wonders of the digital

- [ES2015+ cheatsheet](https://devhints.io/es6) - A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond

- [ECMAScript News](https://ecmascript.news/) - Stay up-to-date on JavaScript and tools



## TypeScript

- [TypeScript docs](https://www.typescriptlang.org/docs/) - TypeScript documentation

- [Roadmap](https://roadmap.sh/typescript) - TypeScript roadmap

- [Understanding TypeScript](https://www.udemy.com/course/understanding-typescript/) - Boost your JavaScript projects with TypeScript: Learn all about core types, generics, TypeScript + React or Node & more

- [TypeScript the complete developers guide](https://www.udemy.com/course/typescript-the-complete-developers-guide/) - Master Typescript by learning popular design patterns and building complex projects. Includes React and Express

- [Learn Typescript tutorial - 3-hour interactive tutorial](https://scrimba.com/learn/typescript) - A hands-on course giving you the basics of TypeScript while you build a real-world-style couchsurfing app



## Frameworks

- [Ember.js](https://emberjs.com/) - Ember.js is a productive, battle-tested JavaScript framework for building modern web applications

- [React](https://pl.react.dev/) - The library for web and native user interfaces

- [React course](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) - React - The Complete Guide 2023 (incl. React Router & Redux)

- [Vite.js](https://vitejs.dev/guide/) - Tool to quickly start a project from a basic template for popular frameworks

- [Next.js](https://nextjs.org/) - Is a React framework that gives you building blocks to create web applications

- [Next.js 13 course](https://www.udemy.com/course-dashboard-redirect/?course_id=5094198) - The Next.js 13 Bootcamp - The Complete Developer Guide

- [Learn TypeScript – Full Tutorial](https://www.youtube.com/watch?v=30LWjhZzg50) - Learn how to program with TypeScript in this full course for beginners. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript



## Challenges

- [Code Wars](https://www.codewars.com/) - Website that offers users the opportunity to learn coding skills from scratch

- [Codepen Challenges](https://codepen.io/challenges) - Challenges are fun opportunities for leveling up your skills by building things.

- [Dev Challenges](https://devchallenges.io/) - Website that offers coding challenges and projects for developers to improve their skills, build their portfolios, and connect with other developers

- [CSS Battle](https://cssbattle.dev/) - is a fun, online game where players compete to create the closest visual match to a given design using HTML and CSS

- [Javascript 30](https://javascript30.com/) - It’s a 30-day vanilla JS coding challenge



## Helpful links

- [Animista](https://animista.net) - CSS Animation for website

- [AOS](https://michalsnik.github.io/aos/) - Animate On Scroll Library

- [Slick](https://kenwheeler.github.io/slick/) - Full responsive carousel

- [Pixabay](https://pixabay.com) - Free picture database

- [Fontawesone](https://fontawesome.com/start) - Free icon datebase

- [React Icons](https://react-icons.github.io/react-icons/) - Free big icon datebase

- [JSON Placeholder](https://jsonplaceholder.typicode.com/) - Free fake API for testing and prototyping

- [JSON Cracker](https://jsoncrack.com/editor) - Seamlessly visualize your JSON instantly into graphs

- [Can I use](https://caniuse.com) - Useful resource for checking browser support for different HTML, CSS, and JavaScript features

- [FreeCodeCamp](https://www.freecodecamp.org/) - Community of people from all around the world who are learning to code together

- [Iconify](https://iconify.design/) - Very big icon datebase with SVG files