2. 🌄 Web Frontend Development - jose-r-lopez/Programming-Resources GitHub Wiki
Backend Mocking Tools
- API Mocha: Create a mock API for free (https://apimocha.com/)
- Faker: Generate massive amounts of fake (but realistic) data for testing and development (https://fakerjs.dev/)
- {JSON} Placeholder: Free fake API for testing and prototyping (https://jsonplaceholder.typicode.com/)
- Mockaroo: generate up to 1,000 rows of realistic test data in CSV, JSON, SQL, and Excel formats (https://www.mockaroo.com/)
- Mockend: Develop your UI before your backend (https://mockend.com/)
- Mocky: The world easiest & fastest tool belts to mock your APIs (https://designer.mocky.io/)
General Development Tutorials and Tools
- 10 Projects in 10 Hours by FlorĂn Pop (https://github.com/florinpop17/10-projects-10-hours)
- 50 Projects in 50 Days - HTML/CSS and JavaScript by Brad Traversy (https://github.com/bradtraversy/50projects50days)
- Can I email? by Tilt Studio (https://www.caniemail.com/)
- Can I use? by Fyrd (https://caniuse.com/)
- Interneting Is Hard (But it doesn’t have to be): Friendly web development tutorials for complete beginners (https://www.internetingishard.com/)
- Manz.dev Cheatsheets (https://manz.dev/cheatsheets/)
- Raspberry Pi Code Club web Projects (https://projects.raspberrypi.org/en/projects/?software[]=html-css-javascript)
- The best code generators for developers by Web code tools (https://webcode.tools/)
- The Front-End Checklist by thedaviddias (https://github.com/thedaviddias/Front-End-Checklist?s=09)
CSS
CSS Animations
- AnimatiSS: Nice collection of CSS animations for your awesome web projects by xsgames (https://xsgames.co/animatiss/)
- Animista: CSS Animations on demand (https://animista.net/)
- CSS Loaders and Spinners (https://cssloaders.github.io/)
- Hello, animation!: CSS Animation course by HTML Academy (https://css-animations.io/)
CSS Flexbox and Layout
- 1-Line Layouts: 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be by @una (https://1linelayouts.glitch.me/)
- A collection of popular layouts and patterns made with CSS by Nguyen Huu Phuoc (https://csslayout.io/)
- CSS Flexbox Generator (https://codepen.io/smpnjn/pen/jOazqZE)
- CSS Flexbox Patterns: Build awesome user interfaces with CSS flexbox by cjcenizal (https://flexboxpatterns.com/)
- CSS Grid Cheat Sheet Your ultimate CSS grid visual guide by alialaa (https://alialaa.github.io/css-grid-cheat-sheet/)
- CSS Layout: Popular layouts and patterns made with CSS by Nguyen Huu Phuoc (https://csslayout.io/)
- CSS Section Separator Generator (https://wweb.dev/resources/css-separator-generator/)
CSS Fonts and Backgrounds
- Fluid Type Scale Calculator: Generate font size variables for a fluid type scale with CSS clamp by Aleksandr Hovhannisyan (https://www.fluid-type-scale.com/)
- Pattern.css: CSS only library to fill your empty background with beautiful patterns (https://bansal.io/pattern-css#sidebar)
CSS Learning
- Aprender CSS: Un curso permanente de CSS y un modelo para mejorar sus conocimientos sobre el diseño de páginas web. by web.dev (https://web.dev/learn/css/)
- Apuntes CSS - Frontend Fastlane Plan by Navis Code (https://naviscode.gumroad.com/l/apuntes-css)
- CSS Reference: A free visual guide to CSS (https://cssreference.io/)
- Defensive CSS: avoiding future CSS problems by Ahmad Shadeed (https://ishadeed.com/article/defensive-css/)
- keyframes.app: more tools for devs (https://keyframes.app/)
CSS Z-index
- Understanding Z-Index in CSS by Ahmad Shadeed (https://ishadeed.com/article/understanding-z-index/?s=09)
- What The Heck, z-index?? by Josh Comeau (https://www.joshwcomeau.com/css/stacking-contexts/?s=09)
HTML
- Can I include? Tool to know which HTML tags can go inside other tags (https://caninclude.glitch.me/)
- HTML For Beginners The Easy Way: Start Learning HTML & CSS Today by Frank Moraes (https://html.com/)
- HTML Reference: A free guide to HTML (https://htmlreference.io/)
JavaScript
- 30 days of JavaScript by Asabeneh (https://github.com/Asabeneh/30-Days-Of-JavaScript)
- 40 proyectos de JavaScript para principiantes: Ideas fáciles para empezar a codificar en JS by Rafael D. Hernandez, Jessica Wilkins (https://www.freecodecamp.org/espanol/news/40-proyectos-de-javascript-para-principiantes-ideas-faciles-para-empezar-a-codificar-en-js/)
- Aprende JavaScript jugando (hilo de Twitter by Alexanyer Naranjo) (https://twitter.com/alexanyernas/status/1483461973123735564?t=E6X6DdGgQK4-Np1Sxpap8Q&s=19)
- clean-code-javascript by andersontr15 (https://github.com/andersontr15/clean-code-javascript-es)
- Eloquent JavaScript 3rd edition (2018) (free online book) by Marijn Haverbeke (https://eloquentjavascript.net/index.html)
- El Tutorial de JavaScript Moderno by Ilya Kantor (https://es.javascript.info/)
- Free JavaScript Resources by Frontend Dude (https://www.java5cript.com/)
- TheatreJS: Powerful motion design in the browser (https://www.theatrejs.com/)
- WebStorm: El IDE más inteligente para JavaScript by JetBrains (https://www.jetbrains.com/es-es/webstorm/). NOTE: Full versions of JetBrains IDEs may be used legally for free if you register in their web page with your university email account, no matter if you are a student or a lecturer. You'll have to reconfirm your university link anually
React
- 30 Days of React (step by step guide to learn React in 30 days) by Asabeneh (https://github.com/Asabeneh/30-Days-Of-React)
UI elements and Creation
Color
- Accessible color palette generator by Venngage (https://venngage.com/tools/accessible-color-palette-generator)
- An interactive guide to color & contrast:A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast by Nate Baldwin (https://colorandcontrast.com/#/)
- Color Contrast Button (https://buttonbuddy.dev/)
- Color Picker Tool (https://www.0to255.com/)
- Gradient Generator: Beautiful, lush gradients by Josh Comeau (https://www.joshwcomeau.com/gradient-generator/)
- Happy Hues: Curated color in context (https://www.happyhues.co/palettes/6)
- Huemint Color palette generator: machine learning to create unique color schemes for your brand, website or graphic (https://huemint.com/)
- Wicked Backgrounds: Create beautiful backgrounds waves for yourdesigns. by g_perales (https://wickedbackgrounds.com/)
Components
- UI Buttons: Every style imaginable by eludadev (https://ui-buttons.web.app/)
- Webflow Cloneable Component Library(https://www.flowponent.com/)
Drawing
- Excalidraw Drawing app (https://excalidraw.com/)
Fonts
- Font Pairings: Generate font combinations with deep learning (https://fontjoy.com/)
Images and Icons
- Blush.design: Easily create and customize stunning illustrations (https://blush.design/)
- Compress Image online: Compress JPG and PNG images at light speed with Browser based Image compressor (https://compressimage.io/)
- Free stock photos for presentations, backgrounds, etc. (https://www.pexels.com/)
- Multiple free icon sources (Twitter thread, in Spanish): (https://twitter.com/miriamgonp/status/1374643609765605377?t=aSwuMDC8-13sL6Eh9x1wQQ&s=19)
- Pixabay: IncreĂbles Imágenes Gratis Para Descargar (https://pixabay.com/es/)
- Simple Icons: 2374 Free SVG icons for popular brands (https://simpleicons.org/)
- SVG OMG by Jake Archibald (https://jakearchibald.github.io/svgomg/)
- SVG Repo: Browse 300.000+ SVG Vectors and Icons (https://www.svgrepo.com/)
- The Noun Project: Icons and Photos For Everything (https://thenounproject.com/)
- Undraw.co: Open-source illustrations for any idea you can imagine and create (https://undraw.co/)
- Unsplash: La fuente de Internet de imágenes de uso libre. Con recursos de creadores de todo el mundo. (https://unsplash.com/es)
UI Building and General Resources
- Block Element Modifier (BEM) Methodology Cheatsheet (https://9elements.com/bem-cheat-sheet/?s=09)
- Front-end prácticas; Become a better frontend developer (https://www.frontendpractice.com/)
- Game UI Database (https://www.gameuidatabase.com/)
- Grid for layout, Flexbox for components by Ahmad Shadeed (https://ishadeed.com/article/grid-layout-flexbox-components/?s=09)
- Sample UI Designs (https://collectui.com/)
- The best code generators for developers (https://webcode.tools/)
- Tools That Solve Your Files Problem (https://tinywow.com/)
- Toools Design: Discover highly useful Design Resources & Tools by Pascal Strasche (https://www.toools.design/)
Vue.js
- Vue tutorial (https://vuejs.org/tutorial/#step-1)