Welcome!

My creator has made me with the solely purpose of helping others during the journey of becoming web developers. Since he started this path he has come across amazing and really experienced people who shared their knowledge and have helped him tremendously. That is why he curated and assembled that information into this responsive page (ME) for you to explore and find everything you need to improve your learning.

There is much more to come...

CSS

Learn box alignment
Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.
Box Model
A complete guide to Flexbox
Learn CSS playing games
Hue Tools
3D assets for your Web
CSS tip: How to mask images with clip-path property
CSS color-scheme
CSS cursor use Cases
How to get fonts and colors from any website in Chrome
CSS keywords
How to use "initial", "inherit", "unset" and "revert"?
Organize CSS folders
New 2022 CSS features

Generators

CSS Custom Border Generators
Wave Generator
Create waves for your landing page to look professional.
Cool Buttons
Add amazing buttons by simply copy and pasting the code into your projects.
Shadow Generator
Create smooth shadows for your projects easy and fast.
Gradient Generator
Quite easy tool to generate and see gradients on the go.
Flexbox Generator
Generate and preview flexbox for your projects.
Grid Generator
Generate and preview grids for your projects.
Glassmorphism Generator
Fancy Border Radius Generator
Really fancy and custom border generator for your websites.
Neumorphism Generator

Testimonials

Buttons, Cards, sliders and more!

Hue icons
Animated Menu Bar
Animated Buttons
Hover effects
Hover effect cards
Premium Slider
Changing colour box
Animated Carousel
Animated minimalist bar
About Us Pop Up effect
Super Effects in CSS
Animated Forms
8 Practical Examples of ::before and ::after in CSS
Hover effect Cards
3D Slider
Adjustable Numeric Slider
Credit Card Form
Neon Signs
Slider Transparent Form
Dropdown Cards
Opaque Slider
Collection of Hover Buttons
Animated Check Button
Animate
A fast and efficient solution for adding CSS animations.
Hint
A pure CSS resource using which you can create cool accessible tooltips for your web app.
Magic Efects
Magic CSS are a set of simple animations to include in your web or app project's.
Motion UI
A SASS library for creating flexible CSS transitions and animations.
Vivify
A powerful CSS3 animation library which comes with 68+ animations with support for delay and duration.

Games

Exercises

Practice Programming Logic
Pywombat
Python Exercises
Learn Git Branching
Designed to help begginers to work with the powerful concepts behind branches in Git.
Oh Shit, Git!?!

GitHub Repositories

You don't know JS yet
A book series on JavaScript.
Airbnb Javascript Style guide
Javascript style guide.
HTML5 Boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
Node.js best practices
The Node.js best practices list (January 2022).
Front-End-Checklist
The perfect Front-End Checklist for modern websites and meticulous developers.
Library
Recommended PDF Book Collection to improve your programming skills.
Bookmarks with Information
Real World example apps

Projects

Build 85 Projects Using JavaScript
10 Coding challenges websites
Front-End Mentor challenges
Make #HTML, #CSS and #Javascript real world challenges while your work with professional UI Designs.
Codewell Challenges
Improve your HTML and CSS knowledge with real design templates.
Frontend Practice
Become a better frontend developer. Take your frontend skills to the next level recreating real websites.
How to Make a Landing Page with HTML, CSS, and JavaScript
How to make a landing page for a boxing TV channel with plain HTML, CSS, and JavaScript.
Codealo
Es una red social para programadores de habla hispana enfocada en la colaboración a través de la creación de proyectos.
Top 50 Web Development Projects for Beginners

¿Where to Apply?

Courses

Web Design Course
Complete Course (HTML, CSS and JS) by Soy Dalto.
Introductory Course to Web Development: HTML and CSS (1/2)
Learn how to create your own professional responsive websites from Alicante University.
Introductory Course to Web Development: HTML and CSS (2/2)
Learn how to create your own professional responsive websites from Alicante University.
Cloud Computing
Discover the Cloud Computing world with EOI (Escuela de Organización Industrial).
Mobile Web App development
Discover the world of Mobile Web App development with UCM (Universidad Complutense de Madrid).
Learn to Code HTML & CSS
Learn to Code HTML & CSS has one goal — to teach people how to build beautiful and intuitive websites by way of clear and organized lessons. The guide covers a variety of web design and development topics, ranging from beginner to advanced skill levels.
ReactJs
A list of 8 free Reactjs courses worth your time to master web development.
Tech Dev Guide
Free collections of resources curated by Google engineers and university faculty. Explore any collection that aligns with your goals.
HTML to React
HTML, CSS, JavaScript and React with amazing projects to build.
CSS from 0 to Lading Page
4 free Google courses
Free Certifications for Developers

Roadmaps

Frontend Developer
Roadmap Web Developer 2022
Roadmap for beginners 2022
Data Structures & Algorithms, HTML & CSS, Javascript, ReactJS, Vue.js, Angular.
Full Stack Developer in 6 months
Web3 Developer Roadmap

Twitter Threads

Learn HTML and CSS with the @shayhowe free guide
Semantic Elements in HTML
How to use them with examples.
Web Development Roadmap
Do you like Web Development?
Free resources to learn Web Development
Front End Interviews and Roadmap
Recommended tools for Frontend Developers
Learn CSS from 0
How to get your first job in an area you do not have experience yet?
Tips to maximize your chances of having interviews with no experience.
What are "Katas"?
Improve your portfolio
A collection of JavaScript one-liners that will save you time
Handling Asynchrony in Javascript
Callbacks, setTimeOut, setInterval, Promises and more.
Code Images for Twitter
Learn how to post beautiful snippets of your code in Twitter.
Web Development Interview Questions
50 JavaScript Interview Questions for Junior, Mid-level and Senior Developer Position.
Coding Interview Patterns
JavaScript Interview Questions in 2022
Create a Github Commit on your birthday
Prepare yourself for your first job
Git basic commands
How to design a Sign Up page
7 important things you must include.
Create a beautiful Navigation Bar
Contact form on Google Maps
Tech Jobs from Argentina

Useful Websites

W3schools
A freemium educational website for learning coding online.
Codeacademy
Learn the technical skills to get the job you want.
HTML dog
HTML Tutorials. And Stuff. Everything HTML, CSS, and JavaScript, the most common languages used in making web pages.
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
HTML Validator
Checks the markup validty of your HTML docs and offers recommendations to fix it.
CSS Validator
Responsively
An open-source DevTool for all Front-End developers that will make your job easier.
Type-scale
A Visual Type Scale - Visualize the difference between different font sizes.
Small dev Tools
20+ Tools for Developers.
Remove Background
Remove backgrounds 100% automatically in 5 seconds with zero clicks.
Smart Mockups
Enables you to create stunning high-resolution mockups right inside your browser within one interface across multiple devices.
Frontend Help
Recommendations on how to start and improve in the Frontend world.
Dribble
Get inspired from most creative and best designs.
Codewell
Improve your HTML and CSS skills by practicing on real design templates.
Land-book
100+ landing pages design inspiration for your next project.
Awwwards
It contains the best rated websites to help you out for your design inspiration.
Webdesign Inspiration
Lot's of website designs with new add-ons daily.
Free Design resources
High quality design resources for free. Crafted with love from amazing artists and professional designers around the world, ranging from fonts, mockups, graphics, templates & more.
Call to Idea
Curated collection of web components.
Icons8
Icons8 is just more than icons. You can download illustrations, vector images, music and much more.
IconMnstr
Black and white themed minimal icons which looks super great. You can also cuatomize the thickness.
Pixel True
+500 2D and 3D free ilustrations.
Isometric
Ilustration collections.
PNG Img
SVG and PNG libraries.
Fonts in the Wild
Find the perfect font for your project.
Libre Logos
PlaceIt
Mockup Generators.
Ilustrations/Images
Use these copyright-free websites to get beautiful illustrations/images for your next project.

Chrome Extensions

Window Resizer:
Resize the browser window to emulate various screen resolutions.
CSS Viewer
A simple CSS property viewer on any page element.
Wappalyzer
Wappalyzer is a technology profiler that shows you what websites are built with.
Fake Filler
A form-filler that fills all inputs on a page with fake/dummy data.
What Font
The easiest way to identify fonts on web pages.
Open in VSCode
Open Github and Gitlab links in VSCode.
Perfect Pixel
This extension helps develop your websites with pixel-perfect accuracy!
Lorem Ipsum Generator
Provides an elegant and quick way to create default text or generate Lorem Ipsum.
actiTIME Time Tracking
Track time directly from your web browser. Make time tracking easier with actiTIME.
JSONVue
Validate and view JSON documents.
One Tab
Save up to 95% memory and reduce tab clutter.
TinEye Reverse Image Search
Find out where an image came from, how it's used, or find higher resolution versions.
Web Developer Checklist
Analyses any web page for violations of best practices
InitTab
Initab replaces Chrome's new tab page with a dashboard of useful tools to make your job as a programmer easier.
Site Palette
Extract colors from any website
Svg Grabber
A tool to quickly preview and get all the SVG assets from a website.
Enhanced Github
Display repo size, size of each file, download link, and option to copy file contents
Remote Debug Android Devices
Remote debug live content on an Android device from your Windows, Mac, or Linux computer.

Web3

Thread Solidity Parte 1
Thread Solidity Parte 2
Build your Web3 Resume with these 5 Blockchain Projects
Web3 Roadmap
Learn Web3
One of the best resources out there for learning web3. It will take you from a beginner to advanced level.
Code Eater
A blockchain learning resource on YouTube. It easily has the best tutorials on Solidity and also builds projects visually which helps a lot.
Use Web3
This platform has the latest resources on blockchain and it will take you through some very good coding challenges that will improve your skills in this domain.
Web3 University
Web3 university takes you through the fundamentals and has amazing documentation on minting NFT’s and building Dapps etc.
Buildspace
focuses a lot on building web3 related projects. It is an amazing platform for people who have a bit of experience in building Decentralized Applications.
Become a Blockchain developer today
What is Solidity, how it works + Free Resources to become a Web3 developer.
Get a Job in Web3 Space
Build your Web3 Resume with these 5 Blockchain Projects.
Best Ethereum Development Tools
Resources to Learn Web3 in 2022