Développement frontal
Salut
Il s'agit d'un référentiel open source pour tous ceux qui veulent apprendre le développement frontal.
Développement frontal
Le développement Web frontal est la pratique de la conversion des données en une interface graphique, grâce à l'utilisation de HTML, CSS et JavaScript, afin que les utilisateurs puissent afficher et interagir avec ces données.
Assurez-vous de montrer votre support par Star Mark et de partager le référentiel
Une liste de ressources utiles pour les développeurs frontaux
Table des matières
- Développement frontal
- Salut
- Une liste de ressources utiles pour les développeurs frontaux
- Table des matières
- Feuille de route
- Utile
- Apprentissage
- A11y
- Canaux YouTube
- Blogs
- Podcasts
- Codes éditeurs
- Extensions de code Visual Studio
- Outils
- Cadres CSS
- Icônes
- Couleurs
- Typographie
- Inspiration de conception
- Cadres d'animation
- Ressources de stock
- Géolocalisation
- Apis
- Maquette
- Livres
- Défis / jeux
- Outils gratuits pour les étudiants
- Vidéos youtube
- Essai
Feuille de route
- Feuille de route - pour une feuille de route bien décrite étape par étape pour les développeurs frontaux.
Utile
- BGJAR - Générateur d'arrière-plan SVG gratuit pour vos sites Web, blogs et application.
- Inspectez - Inspectez et déboguez vos applications Web et sites Web mobiles sur les appareils iOS directement depuis Mac ou Windows.
Apprentissage
- Un guide complet de Flexbox | CSS-Tricks - Un guide complet de la disposition Flexbox.
- Un guide complet de la grille | CSS-Tricks - Un guide complet de la disposition de la grille.
- Utilisateur de puissance de la ligne de commande - Une série de vidéos pour les développeurs Web sur l'apprentissage d'un flux de travail de ligne de commande moderne avec ZSH, Z et des outils connexes.
- CSS Grid - Cours vidéo complet tout sur CSS Grid
- Best of JS a un site pour vérifier les meilleurs dépôts GitHub pour votre framework JS préféré
- Codecademy - Une série de cours interactifs enseignant au monde comment coder. Offrant des abonnements gratuits et payants dans une variété de langues.
- Codementeor - Un outil pour obtenir l'aide de développeurs expérimentés dans diverses langages de codage sur votre parcours d'apprentissage.
- SCALER SUBRICS - Une plate-forme pour apprendre les langages de programmation comme HTML, Java, Javascript, Python etc.
- Conquérir des dispositions réactives - fabriquées par Kevin Powell (https://twitter.com/kevinjpowell). Ce cours vous guide à travers tout ce que vous devez savoir pour créer des dispositions réactives dans son brillant cours de 21 jours.
- Coursera - Une sélection de cours d'écoles très réputées comme Stanford et Yale.
- CSS Almanac | CSS-Tricks - Un guide de référence rapide sur de nombreuses fonctionnalités de CSS.
- CSS Grid Playground - Un guide visuel organisé par l'équipe Mozilla pour vous aider à apprendre les fonctionnalités de mise en page de la grille de CSS avec beaucoup d'exemples de code et de démos.
- Ressources de conception - Ressources de conception de Skullface.
- Dev.To - où les programmeurs partagent des idées et s'entraident à grandir.
- DevProjects - Une communauté libre se compose de projets organisés de développeurs seniors pour vous aider à combler l'écart entre la théorie et la pratique. !
- Dicoding Academy - où tout le monde peut apprendre la programmation des principes fondamentaux ( disponible uniquement à Bahasa Indonésie ).
- EDX - Une série de cours de niveau universitaire de Harvard, MIT, Wharton et plus encore.
- Egghead - Tutoriels vidéo de développement Web dans les segments "Bite-Size". A des abonnements gratuits et "pro" (payés).
- Enchet | Ressources frontales - Ressources organisées sur le développement frontal.
- Flexbox - Augmentez vos connaissances Flexbox - un cours d'histoire en ligne centré sur les zombies.
- FreeCodeCamp - Une ressource gratuite incorporant des projets de programmation et la préparation des entretiens pour les emplois des développeurs.
- Frontend Masters - Tutoriels vidéo de développement Web des leaders de l'industrie (mis à jour fréquemment). A à la fois des abonnements gratuits (à durée limitée) et rémunérés.
- Full Stack Open - Course sur le développement Web complet de la pile par l'Université d'Helsinski. Apprenez React, Redux, Node.js, MongoDB, GraphQL et TypeScript en une seule fois! Ce cours vous présentera le développement Web moderne basé sur JavaScript. L'objectif principal est de créer des applications à page unique avec ReactJS qui utilisent des API REST construites avec Node.js.
- Geeksforgeeks - un portail informatique pour les geeks.
- Khan Academy - Une plate-forme d'apprentissage en ligne universelle qui fournit également les cours importants aux développeurs.
- Learnanything - Recherchez des cartes d'esprit interactives pour apprendre quoi que ce soit.
- Apprenez JavaScript - Apprenez JavaScript dans un environnement interactif. Lisez de courtes leçons, prenez des notes et relevez des défis directement dans votre navigateur.
- Mastering Markdown - Une mini série qui changera la façon dont vous écrivez la documentation.
- Mozilla Developer Network - Les dernières informations sur Open Web Technologies.
- Tutoriels complètes de développement Web -Lyty.Dev Tutoriels de développement Web complet avec des exemples bien expliqués gratuitement.
- Pluralsight - Formation illimitée en ligne des experts de l'industrie.
- Saylor - Une solution d'apprentissage en ligne ouverte offrant des opportunités de crédit universitaire pour les étudiants.
- SCRIMBA - Apprentissage basé sur le code-screcast dans une variété de langues.
- Scotch - de nombreux cours de développement Web. A des abonnements gratuits et "premium" (payés).
- Cours de recherche - Une sélection de cours de tendance et de tutoriels.
- Sololearn - un portail libre pour l'apprentissage du développement Web.
- Team Treehouse - Apprentissage en rythme auto-rythmé dans une variété de langues et de sujets.
- Le tutoriel JavaScript moderne - tout sur la langue javascript.
- The Odin Project - Un programme d'études open source pour l'apprentissage du développement Web
- Tutoriels Point - Tutoriels pour de nombreuses langues différentes avec des exemples de code interactifs.
- UDACITY - Apprenez n'importe quoi en ligne - Deep Learning, Machine Learning, Front End Languages.
- Udemy - Un marché d'apprentissage et d'enseignement en ligne.
- Watch and Code - L'école d'informatique pour les étudiants qui exigent une rigueur intellectuelle et une profondeur.
- W3School - Bibliothèque de référence de développement Web. Couvre HTML, CSS, JavaScript (jQuery, Ajax et plus), ainsi que certaines langues côté serveur. Comprend des descriptions et des exemples interactifs.
- API Web | MDN - Tout ce qu'un débutant doit savoir sur les API Web.
- Conception Web en 4 minutes par Jeremy Thomas Créateur de Bulma CSS et Marksheet.io.
- WESBOS - Cours gratuits et premium en développement Web
- Tricks de développement Web - Tous vos codes de tendance CSS, JS, JQuery avec des codes source en un seul endroit. Votre partenaire pratique pour tous les types de développement Web et de conceptions modernes.
- Web.dev - Guides et ressources pour les sites Web rapides modernes par les développeurs Google.
- Devenez un développeur Web frontal - développez des compétences avec HTML, CSS, JavaScript et JQuery.
- Webglossary.info - Glossaire pour le développement et la conception Web, avec plus de 3 500 entrées (en août 2023)
- Compétences Web - Un aperçu visuel des compétences utiles à apprendre en tant que développeur Web.
- L'application Brewery - All in One Plateforme pour couvrir vos compétences de développement Web
- Full Stack Open 2021 - Ce cours sert d'introduction au développement d'applications Web moderne avec JavaScript.
- Devtools Tech - Une plate-forme de préparation des entretiens gratuite pour les ingénieurs de frontend en mettant l'accent sur les questions de programmation du monde réel de haute qualité.
⬆ Retour en haut
A11y
- Guide de style A11y - Un guide de style vivant ou une bibliothèque de motifs, généré à partir des styles documentés KSS ... avec une touche d'accessibilité.
- Axe - Test d'outils de test d'accessibilité.
- Analyseur de contraste de couleur - CCA vous aide à déterminer la lisibilité du texte et le contraste des éléments visuels, tels que les commandes graphiques et les indicateurs visuels.
- Université Deque - Cours en ligne sur les compétences d'accessibilité Web et mobile.
- W3C Intro à l'accessibilité Web - Stratégies, normes, ressources pour rendre le Web accessible aux personnes handicapées.
⬆ Retour en haut
Canaux YouTube
- APNA College - Tutoriels sur HTML, CSS, bootstrap, javascript, git, github, sql
- Adrian Twarog- tutoriels sur HTML, CSS, bootstrap, javascript, react, react
Native, UI / UX et des trucs de conception cool - 1stWebDesigner - Tutoriels sur WordPress, PSD à HTML
- Brad Hussey - Tutoriels sur Bootstrap, Sass, JQuery, PHP, Freelancing
- CSS Tricks - Channel YouTube de Blog et de développement bien connues Blog CSS par Chris Coyier.
- Tutoriels CSS - Tutoriels en hindi par Husain Sir couvrant toutes les bases de CSS.
- Guide du codeur - Tutoriels sur HTML, CSS, JavaScript, bootstrap
- Codevolution - Tutoriels sur React, Vue, Angular, MongoDB, JavaScript, Mean Stack, HTML, CSS.
- Programmeur intelligent - Tutoriels sur React, MongoDB, JavaScript, Mern Stack, HTML, CSS, React Native.
- Derek Banas - Tutoriels sur C #, Visual Basic, Django, Python, Nodejs, AngularJS, MongoDB, JQuery, JavaScript, CSS, Ruby on Rails, Java, Sqlite, Android, HTML, PHP, Objectif C.
- Devtips - Tutoriels sur HTML5, CSS, SASS, bootstrap, fondation, jQuery, Ruby on Rails, Github.
- DesignCourse - Tutoriels sur UI / UX Design ou HTML5, CSS, SASS, bibliothèque d'animation.
- Dennis Ivy - Tutoriels sur les projets de développement Web de Django & Flask Full-Stack
- Elzero Web School - Arabe uniquement
- FreeCodeCamp - Tutoriels sur jQuery, JavaScript, React, Math, Science, Software Engineering, Open Source Software
- Fonction amusante amusante - Tutoriels sur JavaScript, React, Programmation fonctionnelle, GraphQL, Life en tant que développeur
- Google Chrome Developers - Dernières et grandes discussions sur le développement Web moderne avec des pro-tips, des idées et des techniques pour vous aider à améliorer votre compétence de développement Web.
- Kevin Powell - Tutoriels sur HTML, CSS, aidant à mieux comprendre CSS de manière simple
- LearnCode.Academy - Tutoriels sur HTML, CSS, JQuery, JavaScript, React JS / Redux, Node JS
- NIVEALUPTUTS - Tutoriels sur HTML, CSS, SASS, WordPress, Magento, Drupal, React, Meteor
- Mackenzie Child - Conception de Code Challenge - Tutoriels sur l'interface utilisateur, comment concevoir et coder plusieurs styles de sites.
- Le train de codage - Tutoriels sur JavaScript, nœud, apprentissage automatique, réseaux de neurones, algorithmes
- The Net Ninja - Tutoriels sur HTML, CSS, JQuery, JavaScript, Git et Github, Bootstrap, Mangodb, PSD à WordPress, PSD à HTML, et bien d'autres.
- TheDiGicraft - Tutoriels sur HTML, CSS, JQuery, PHP, Ajax, Bootstrap, MySQL.
- thenewboston - Tutoriels sur Ecmascript 6, React JS / Redux, Django, Angular 2, Gulp, Git, Python, SEO, Sass, SCSS, Grunt, illustrator, MongoDB, PHP, Java, Ruby, objectif C C
- Traversy Media - Tutorials sur HTML, CSS, JQuery, PHP, AJAX, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Larravel, Cake PHP, sympath
- CodeWithHarry - Tutoriels sur HTML, CSS, JavaScript, Node JS, MongoDB et l'hébergement.
- Programmation avec mosh - Tutoriel sur React, Nodejs, Python, JavaScript, Angular, TypeCICT et C #.
- Dev Ed - Apprenez le développement Web, la conception Web, la modélisation 3D, les outils comme Figma et plus
- Web Dev Simplified - Apprenez les développements de sites Web avec HTML, JavaScript, CSS et d'autres cadres avec les mêmes projets et plus
- Développeur Mozilla - Vidéos pour vous aider avec votre travail en tant que concepteur Web, développeur Web ou personne impliquée de créer des sites Web ou des applications Web
- Academind - il y a toujours quelque chose à apprendre. Que vous souhaitiez regarder des tutoriels ou des guides angulaires, Vue.js, d'autres sujets de contenu de développement ou de science des données ou autre chose - vous avez probablement raison
- Sonny Sangha Project Tutoriels sur React, Redux, Next JS & React Native
- WB Web Development - Tutoriels sur HTML, CSS, Bootstrap, Sass, Javascript, Git et Github, MongoDB, Nodejs, ReactJS
- Tutoriels en ligne - Contenu de la classe supérieure sur le développement Web frontal. A des tutoriels exclusifs sur HTML, CSS et JavaScript avec des effets incroyables. Une visite incontournable pour tous les développeurs frontaux
- Akshay Sainid Videos sur les conseils d'interview Frontend, les expériences d'entrevue et les concepts spécialement principaux de JavaScript.
- Devtools Tech- vidéos sur les concepts avancés de frontend, des questions et expériences d'entrevue et se concentrer sur les concepts JavaScript intermédiaires à avancés.
⬆ Retour en haut
Blogs
- 10 Besoin de connaître les cours de concepts JavaScript - du concept JavaScript de base à l'avance expliqué de manière simple que chaque développeur JavaScript doit savoir.
- 100 façons d'être plus créatives - 100 façons d'être plus créatives de Shaunta Grimes.
- 2017 Design Roundup - Collection de toutes les ressources de développement Web Codrops pour 2017.
- 50 choses que vous [probablement] oublié de concevoir - UX Power Tools - Medium - 50 choses que vous avez probablement oublié de concevoir de Jon Moore
- Mois ACM du code 2K17: Bâtiment MoodIFIE - Mois ACM du code 2K17: Bâtiment MoodIFIAD à partir d'Ajay NS.
- Un guide illustré pour configurer votre site Web à l'aide de GitHub & CloudFlare - un guide illustré pour configurer votre site Web à l'aide de GitHub et CloudFlare de Karan Thakkar.
- Brad Frost Blog - Auteur de Atomic Design, Building Design Systems in CSS & HTML.
- Meilleures polices gratuites - 70+ meilleures polices gratuites pour les concepteurs - gratuits pour une utilisation commerciale en 2019
- ANIMATIONS CSS VS L'API des animations Web: une étude de cas
- CSS Tricks - Articles quotidiens sur CSS, HTML, JavaScript et tout ce qui concerne la conception et le développement Web.
- Citations de conception et de créativité - 72 citations sur le design et la créativité de Margaret Kelsey.
- Ressources de conception - Liste des ressources pour travailler et apprendre le design.
- Design for Change - Article sur la conception régénérative et durable par Viba Mohan.
- Registraires du domaine DNS et hébergement - Registraires du domaine, DNS et hébergement de Kirby Kohlmorge
- Guide des débutants de Gatsby - Gatsby.js: comment configurer et utiliser le générateur de sites statique React d'Aman Mittal
- Exemples de tout dans ECMascript en 2016, 2017, 2018
- Flavio Copes Tutorials - Tutoriels quotidiens sur JavaScript et le développement Web par Flavio Copes
- De l'URL à l'interactif - explication du fonctionnement du World Wide Web.
- Frontend Dogma - Actualités et outils pour le développement du frontend, généralement mis à jour deux fois par jour
- Frontend Weekly - Les meilleurs articles, liens et nouvelles liés au développement de frontend sont livrés une fois par semaine à votre boîte de réception.
- Comment j'ai animé le logo BitsOfCode avec CSS - Processus Article sur une animation CSS personnalisée.
- Comment fonctionne la fonction Minmax () - Explication de la fonction CSS Minmax (), qui peut être utilisée pour les dispositions de grille CSS.
- Comment construire un portfolio impressionnant lorsque vous êtes nouveau dans Tech - Comment construire un portfolio impressionnant lorsque vous êtes nouveau dans Tech de Randle Browning
- Comment construire un générateur de devis aléatoire avec JavaScript et HTML, pour les débutants absolus - comment construire un générateur de devis aléatoire avec JavaScript et HTML, pour les débutants absolus de Sophanarith SOK.
- Comment construire votre premier composant Vue - Tutoriel de projet débutant pour construire un composant VUE par Sarah Dayan.
- Codez un réseau de neurones à partir de zéro - partie 1 - Typeme - Medium - Codez un réseau de neurones à partir de zéro de Charles Fried
- Music Player Inspirations - Music Player Inspiration 2017 de Muzli.
- La liste de contrôle frontale - une liste exhaustive de tous les éléments dont vous avez besoin pour avoir / tester avant de lancer votre site Web en production.
- Ce que c'est que de construire et de commercialiser un chatbot alors que vous n'avez que 14 ans - ce que c'est que de construire et de commercialiser un chatbot alors que vous n'avez que 14 ans d'Alec Jones
- Quel est le problème avec les marges approuvées? - Explication de la fonction des marges d'effondrement de CSS.
- Une liste bien organisée pour UX - Liste de ressources organisée pour UX par FernandoComet.
- Airbnb Open Source - Articles d'ingénierie et de science des données et projets open source.
- Le coût de JS - Comment livrer efficacement JavaScript pour une expérience utilisateur précieuse par Addy Osmani.
- CSS Scroll-SNAP - Tutoriel sur CSS Scroll Snapping, qui vous permet de verrouiller la fenêtre après un utilisateur terminé de faire défiler.
- Précharge, préfet et priorités dans Chrome - Article sur la façon dont les primitives du chargement Web fonctionnent sur la pile Neworking de Chrome par Addy Osmani.
- Apprendre du git pour vous-même - chinois traditionnel
- IDE pour les développeurs Web - Facteurs à considérer lors du choix d'un IDE pour le développement Web et des exemples de bonnes options.
- Les 8 meilleures API météorologiques pour 2020 - les 8 meilleures API météorologiques pour 2020 - les meilleures API météorologiques gratuites pour les développeurs
- Tutoriels communautaires de l'océan Digital - Une collection de tutoriels gratuits d'experts. Tous ont contribué à Digital Ocean Community.
- React for Beginners - Un manuel React.js pour les développeurs frontaux - un manuel React.js pour les développeurs frontaux
- Ultimate React Resources - Le blog comprend des articles de blog, des livres électroniques gratuits, des références GitHub avec des listes organisées, une implémentation pratique de react.js dans le monde réel avec du code de travail.
- Introduction complète à CSS Grid - Un blog pour apprendre les principes fondamentaux de CSS Grid en construisant différentes dispositions complexes.
- Rado's Blog) - Un blog consiste à des articles sur les dépendances et l'implémentation React, GraphQL et beaucoup plus!
- Roblog - une destination incontournable pour toutes les choses liées à la technologie, JavaScript, Node.js et le développement Web.
- Monica Powell Blog - Un blog génial sur Javascript, React, Gatsby et Git.
- Devtools Tech - Ressources de haute qualité soigneusement organisées pour les ingénieurs de frontend.
Embauche
Podcasts
- Blocs de codage - podcasts de développement de logiciels par une équipe de programmeurs professionnels.
- Frontend Happy Hour - Front end, logiciel et podcasts de développement de carrière par les panélistes de l'industrie.
- JavaScript Jabber - Podcasts pour les développeurs JavaScript. Le site Web propose également de nombreux autres podcasts liés à la programmation.
- Syntaxe - Podcasts de développement frontal par WES BOS et Scott Tolinski à partir de TUTS de niveau.
⬆ Retour en haut
Codes éditeurs
Atom - Atom est un éditeur de texte moderne, accessible, mais piratable au noyau - un outil que vous pouvez personnaliser pour faire quoi que ce soit, mais aussi utiliser de manière productive sans jamais toucher un fichier de configuration. Open source | Toutes les plates-formes
Bracets - Avec des outils visuels ciblés et une prise en charge du préprocesseur, les supports sont un éditeur de texte moderne qui facilite la conception du navigateur. Il est fabriqué à partir de zéro pour les concepteurs de sites Web et les développeurs frontaux. Open source | Toutes les plates-formes
Geany - Geany est un environnement de développement intégré petit et léger.
Intellijidea - un IDE universel de Jetbrains. Il a le code de code, l'intégrationa et le système de contrôle de version (VCS).
Notepad ++ - Notepad ++ est un éditeur de code source gratuit (comme dans la "liberté d'expression" et aussi dans "bière gratuite") et le remplacement du note de notes qui prend en charge plusieurs langues. Windows Only -PyCharm-Used spécialement pour le langage Python, il fournit une analyse de code, un débogueur graphique, un testeur d'unité intégré, une intégration avec des systèmes de contrôle de version et prend en charge le développement Web avec Django ainsi que la science des données avec Anaconda. Toutes les plates-formes | Open source
Texte sublime - un éditeur de texte sophistiqué pour le code, le balisage et la prose. Toutes les plates-formes
VIM - VIM est un éditeur de texte hautement configurable pour créer et modifier efficacement tout type de texte. Il est inclus comme "VI" avec la plupart des systèmes Unix et avec Apple OS X.
Code Visual Studio - Édition de code redéfini. Il a la mise en évidence de la syntaxe et la complétion automatique avec Intellisense, les commandes GIT intégrées, extensibles et personnalisables. Open source | Toutes les plates-formes
WebStorm - L'IDE JavaScript le plus intelligent, WebStorm est un environnement de développement intégré pour JavaScript et les technologies connexes. Toutes les plates-formes
UltraEdit - UltraEdit est un puissant éditeur HTML et de code disponible pour Mac, Windows et Linux. Il est livré avec une utilitaire de comparaison de fichiers intégrée, une assurance automatique, une mise en page avancée, des éditeurs multi-puits multiples et une mise en évidence de la syntaxe pour les langages de programmation les plus populaires.
Nano - GNU Nano est un éditeur de texte pour Unix-like OS's.
Stackblitz - Un éditeur de code puissant en ligne pour les frameworks et bibliothèques JavaScript, avec des fonctionnalités impressionnantes telles que GitHub Imports, Live Server et Direct Commit de l'éditeur à GitHub!
⬆ Retour en haut
Extensions de code Visual Studio
- Renommer Auto Renommer - Lorsque vous renommez une balise HTML / XML, renommez automatiquement la balise HTML / XML appariée.
- Meilleurs commentaires - Cette couleur extension codes différents types de commentaires pour leur donner une signification différente et se démarquer du reste de votre code.
- Colorzor de paire de supports - Couleurs correspondant aux supports pour rendre votre code beaucoup plus lisible - très utile.
- Code Spell Checker - Un vérificateur orthographique de base qui fonctionne bien avec le code CamelCase.
- ES Lint - JavaScript Linter pour mettre en surbrillance les erreurs de code et les meilleures pratiques.
- Formatage à bascule - Une extension de code vs qui vous permet de basculer le formateur (plus joli, embellir,…) en un simple clic.
- Git History - Afficher le journal GIT, l'historique des fichiers, comparer les succursales ou commits
- Gitlens - Super-surchargez les capacités GIT intégrées dans le code Visual Studio - Visualisez le code Puttingship en un coup d'œil via les annotations Git Blame et l'objectif de code, naviguez de manière transparente et explorez les référentiels GIT, obtenez des informations précieuses via des commandes de comparaison puissantes, et bien plus encore.
- Extraits JS - Cette extension contient des extraits de code pour JavaScript dans la syntaxe ES6 pour l'éditeur de code vs (prend en charge JavaScript et TypeScript).
- Serveur en direct - un serveur en direct de développement rapide avec un rechargement de navigateur en direct.
- Thème d'icône de matériel - pack d'icônes sur le thème Google.
- PATH Intellisense - Lorsque vous commencez à taper un chemin dans les citations, vous obtiendrez Intellisense pour les répertoires et les noms de fichiers.
- Peacock - changez subtilement la couleur de l'espace de travail de votre espace de travail. Idéal lorsque vous avez plusieurs instances de code vs et que vous souhaitez identifier rapidement lequel est lequel.
- Polacode - Vous connaissez ces captures d'écran de code fantaisie que vous voyez dans les articles et les tweets? Eh bien, ils sont probablement venus de Polacode. C'est super simple à utiliser. Copiez un morceau de code dans votre presse-papiers, ouvrez l'extension, collez le code et cliquez pour enregistrer votre image!
- Plus joli - formatez automatiquement votre code sur Enregistrer.
- Quokka.js - Quokka.js est un outil de productivité du développeur pour le prototypage JavaScript / TypeScript rapide. Les valeurs d'exécution sont mises à jour et affichées dans votre IDE à côté de votre code, lorsque vous tapez.
- Paramètres Sync - Paramètres Sync Extension Enregistrer votre réglage dans GitHub. Ensuite, vous pouvez les charger sur n'importe quelle nouvelle version de VS Code avec une seule commande.
⬆ Retour en haut
Outils
- Répertoire de l'API | Programmableweb
- Animista - CSS Animation prérégle / générateur
- Better Code Hub - vérifie la base de code GitHub contre les directives d'ingénierie logicielle et donne des commentaires.
- Browserling - Test de croisement interactif en direct sur les machines virtuelles.
- Lambdatest - Test des sites Web et des applications Web sur plus de 2000 navigateurs et OS.
- Browserstack - Test des sites Web et des applications mobiles sur différents navigateurs et appareils mobiles.
- Puis-je utiliser ... - Tables de support pour HTML5, CSS3, etc. sur les navigateurs de bureau et mobiles
- Checkbot - Extension du navigateur qui teste les sites Web pour le référencement, la vitesse et les problèmes de sécurité
- Codepen - Environnement de développement social où vous pouvez écrire du code dans le navigateur et voir les résultats en créant.
- CodePly - A HTML, CSS, JavaScript Editor Playground pour les concepteurs et les développeurs à comparer, les prototypes et tester les cadres frontaux.
- CODESANDBOX - IDE instantanée et outil de prototypage pour le développement Web.
- Créez un nouveau violon - JSFiddle - Test JS, CSS, HTML ou CoffeeScript dans un éditeur de code en ligne.
- Générateur CSS CRITICAL PATH - par Jonas Ohlsson - réduit la quantité de CSS que le navigateur doit passer pour rendre une page Web.
- CrossbrowsertSting App - Service Web pour exécuter des tests Web fonctionnels sur les navigateurs Web mobiles et de bureau.
- Fiche de triche CSS - Une référence très facile à utiliser pour les sélecteurs et propriétés CSS. Il comprend également des catégories pour Flexbox et Grid.
- MINIFICATION CSS - MINIFIE VOS FICHIFICATIONS CSS!
- Référence CSS - Un guide visuel gratuit de CSS.
- CSS déclenche - vous indique ce qui est déclenché lors de la mutation d'une propriété CSS donnée.
- Filtres CSS - générateur de filtre CSS interactif
- Colorlisa - Générateur de palettes de couleurs basé sur de grands artistes
- DirtyMarkup - Richez votre code HTML, CSS et JavaScript.
- ExtendSclass - Fournit des outils pour ajouter des fonctionnalités directement utilisables dans le navigateur.
- FAVICON Générateur - Téléchargez une image et générez un favicon pour votre site Web.
- FAVICON Générateur pour iOS / Google Progressive App Manifest Web Manifest - Tool en ligne pour tester les favicons sur différentes plateformes.
- STATS DE DÉVELOPPEMENT GRATUIT - LISTE DES STATS GRATUITS POUR LE développeur par développeur à utiliser. Certains services sont gratuits pour toujours ou ont un niveau gratuit au moins pendant 1 an.
- GRATUIT pour les développeurs - Ce site Web a une grande quantité de listes de ressources gratuites et payantes organisées non seulement pour les développeurs de frontend mais aussi pour tout type de développeur.
- Générer FAVICON basé sur le texte - Générez un Favicon à partir de texte, une image ou des emojis.
- Obtenez des vagues - Générez de nombreux types d'ondes SVG à utiliser dans la conception Web.
- Glitch - Glitch, c'est comme travailler ensemble dans Google Docs - Multiple Les gens peuvent travailler sur le même projet en même temps.
- GÉNÉRATEUR GRAPHIQUE - GÉNAGE GRAPHIQUES POUR PERSONNES APPLICATIONS FRONTES COMMULES.
- Google Analytics - Service Web qui suit et rapporte le trafic du site Web.
- Google API Explorer - outil pour explorer de manière interactive diverses API Google.
- Console JavaScript dans le texte sublime - Tutoriel pour tester JavaScript et l'exécuter via des systèmes de construction dans le texte sublime 3.
- JQUERY MEGA TRICT Sheet - Feuille de triche de jQuery Selectros, manipulation, événements, et plus encore au format PDF.
- JS Bin - Live Pastebin pour HTML, CSS et JS, ainsi qu'une gamme de processeurs.
- Lighthouse - Open source, outil automatisé pour améliorer la qualité des pages Web.
- Feuille de triche JavaScript moderne - Ceci est une excellente collection de conseils et de concepts JavaScript de Manuel Beaudru travaille comme un bel aperçu de beaucoup de choses que vous devrez familiariser si vous ne faites que commencer avec JavaScript et d'autres cadres connexes.
- Node Package Manager (NPM) - Package Manager pour JavaScript.
- YARN - Gestionnaire de packages pour JavaScript, comme NPM.
- ResponInator - Répliquez à quel point les sites seront réactifs sur les appareils populaires.
- React Cheat Sheet - Un site Web basé sur la documentation également une application Web progressive qui signifie que cela fonctionne bien même en dehors de la ligne. Vous pouvez rechercher par mot-clé ou sélectionner l'un des filtres prédéfinis.
- Système de grille réactif - Générez des grilles flexibles pour créer un site Web réactif.
- Éditeur d'expression régulière (regex) - aide à créer et à vérifier vos expressions régulières.
- Sans Francisco - Un outil pour les concepteurs - Collection d'outils pour les concepteurs
- ScreenSizEMap - Une comparaison des tailles d'écran dans le pixel indépendant de l'appareil.
- Sizzy: outil de test de navigateur - outil pour développer et tester la conception réactive sur plusieurs appareils à la fois.
- Stack Overflow - Communauté en ligne pour les développeurs pour poser des questions et obtenir des réponses.
- Le service de validation de balisage W3C - vérifie la validité de balisage des documents Web dans HTML, XHTML, SMIL, Mathml, etc.
- Le service de validation CSS W3C - vérifie la validité des documents CSS et XHTML avec des feuilles de style.
- Time Helper - Aide à convertir Millis en Datetime et vice-versa.
- Tinypng - PNG et JPEG Compression / Optimiseur
- Liste de contrôle des développeurs Web - Liste de contrôle catégorisée pour les choses à couvrir pendant le développement Web.
- Outillage progressif pour optimiser vos performances sur le Web - Liste des outils qui peuvent être utilisés pour améliorer les performances de la page.
- Stackblitz - IDE en ligne pour les projets Angular et React qui peuvent être partagés via Link.
- Postman (outil pour tester les API) - Client de l'API pour créer, partager, tester et documenter les API.
- Feuille de triche Bootstrap 5 gratuite - Il s'agit d'une liste interactive de classes, variables et mixins Bootstrap 5.
- JSONT - Un outil de formatage JSON simple et puissant en ligne.
⬆ Retour en haut
Cadres CSS
- Bootstrap - Concevoir et personnaliser les sites mobiles d'abord responsables.
- BULMA CSS - Framework open source modulaire basé sur Flexbox.
- Caramel - Un cadre de site Web simple, moderne et réactif.
- CARDINAL - Framework mobile mobile pour les performances et l'évolutivité.
- Element CSS - Bibliothèque de composants basée sur Vue 2.0.
- Fondation CSS - Famille de cadres frontaux réactifs.
- Halfmoon - Framework frontal entièrement personnalisable et réactif pour la construction de tableaux de bord et d'outils.
- Jeet - Système de grille fractionnaire pour Sass et Stylus.
- Système de grille CSS Moins pour la conception de sites Web adaptatifs.
- Material Design Lite - Implémentation de composants de conception de matériaux dans Vanilla CSS, JS et HTML.
- Framework CSSS - CSS visant à permettre une expérience utilisateur unifiée sur tous les produits sur n'importe quelle plate-forme.
- Milligramme - Un cadre CSS minimaliste.
- Peed - une grille SASS légère et flexible.
- PETAL CSS - Framework UI CSS Light Bason basé sur moins.
- CSS pur - Un ensemble de petits modules CSS réactifs.
- Cadre d'interface utilisateur sémantique - conçu pour le thème et la conception réactive.
- Skeleton CSS - Coulageur simple et réactif pour lancer tout projet réactif.
- Spectre CSS - cadre CSS léger, réactif et moderne pour un développement plus rapide et extensible.
- Tacite - Cadre primitif mais attrayant pour les débutants en conception graphique.
- TailwindCSS - Frame CSS de niveau hautement personnalisable et de bas niveau.
- Kit d'interface utilisateur - Framework frontal léger et modulaire pour les interfaces Web.
- Système de grille fluide non sémantique basé sur des pourcentages, plutôt qu'un nombre défini de colonnes.
- CSS vital - Framework CSS minimalement invasif pour les applications Web construites avec SASS et Slim.
⬆ Retour en haut
Icônes
- BRANDICONS - Générateur de polices d'icône et téléspectateur.
- Icône plate - base de données des icônes libres dans les formats PNG, SVG, EPS, PSD et base64.
- Font Awesome - Set d'icône open source et boîte à outils avec des styles cohérents.
- Glyphicon - Icônes à utiliser avec bootstrap, autres frameworks CSS et tous les projets Web.
- Icônes de conception de matériaux Google - Un aperçu des icônes de matériau et comment les intégrer dans les projets.
- ICOMOON - Générateur de polices d'icônes et collection d'icônes.
- INongram - Collection de packs d'icônes à partir de différentes sources.
- ICONSVG - Icônes personnalisables rapides pour vos projets
- Icons8 - packs d'icônes de style cohérentes et personnalisables.
- Ionicons - Icônes open source dans SVG et WebFont.
- Mapicons - Font d'icône à utiliser avec l'API Google Maps et Google place l'API à l'aide de marqueurs SVG et d'étiquettes d'icônes.
- Conception de matériaux Police emblématique - suite complète d'icônes de conception de matériaux pour des SVG faciles sur le site Web ou le bureau.
- MFGLABS-ICONNET - SET des icônes de MFG Lab pour une utilisation dans WebFontes et CSS.
- MICON - Windows Font et CSS Toolkit.
- Le projet Noun - Collection d'icônes complète.
- OCTICONS - Collection des icônes de Github pour les projets.
- Open Iconic, un ensemble d'icônes libres et ouvert - ensemble d'icônes open source dans les formats SVG, WebFont et Raster.
- OpenWebicons - WebFont pour les icônes et logos vectoriels évolutifs.
- Reacticons -Svg React Icônes de packs d'icônes populaires.
- REMIXICON - Système d'icônes de style neutre open source.
- Forme.so - collection personnalisable d'icônes et d'animations.
- Stackicons - Icônes personnalisables pour les marques sociales.
- Typicons - Icônes vectorielles gratuites intégrées dans un webfont.
- Icônes météorologiques - Font icône sur le thème de la météo et CSS.
- Zocial | Ensemble de bouton CSS3 - Créez des boutons sociaux à l'aide de CSS et rendant les icônes sociales comme police.
⬆ Retour en haut
Couleurs
- Couleur Adobe - roue chromatique, thème d'extrait, gradient d'extrait, outils d'accessibilité et plus
- Codes couleur BADA55 - Convertir les mots Leet en couleurs hexagonales CSS.
- Couleurs de branition - Collection de palettes de couleurs organisées à la main les mieux installées pour la marque.
- Couleur Hunt - Collections ouvertes de belles palettes de couleurs
- Théorie des couleurs par Natalya Shelburne - Théorie pratique des couleurs pour les personnes qui code: Tutoriel sur l'utilisation de la couleur avec des exemples
- Rouge chromatique | Schémas de couleurs - Adobe Color CC - Roue chromatique interactive avec différentes règles de couleur (ajustements possibles)
- Outils ColorDesigner - Le but principal de cet outil est d'aider à construire une palette de couleurs et à générer des teintes et des nuances en fonction de celle-ci. Choisissez simplement une couleur et l'application fait le reste. Vous pouvez utiliser les couleurs présélectionnées ou le sélecteur de couleurs pour plus de contrôle. Vérifiez également les autres outils ici
- Colormind - Bootstrap - Colormind est un générateur de pymataires de couleurs qui utilise l'apprentissage en profondeur pour appliquer automatiquement la palette de couleurs à une maquette de site Web en direct.
- Collecteurs - Créateur de palettes de couleurs super rapide avec beaucoup de fonctionnalités
- CSS Gradient - Liste organisée de sites pour explorer les gradients et les palettes de couleurs.
- Picker de couleur de données - Générez des palettes de couleurs avec des couleurs à équidistants visuellement. Utile pour les visualisations de données.
- Conception en couleur - Un guide complet de la conception en couleur (article sur Medium)
- Couleurs d'interface utilisateur plates - Picker de couleur pour designs plats
- Picker de couleur d'image - Picker de couleur d'image et générateur de palettes
- Couleurs lol - Inspirations de palette de couleurs organisées
- Palette de matériau - Générateur de palettes de couleurs pour conception de matériaux
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![Gratuit]
⬆ back to top
Typographie
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
Inspiration de conception
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
Apis
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
Livres
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
Essai
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
