Resource List
Review our curated list of amazing resources offering learning experiences you will always remember.
24 Resources
Tools
Books
Tips & Tricks
Web docs
Blogs
-
Guide to CSS Media Queries
ProviderCSS-Tricks
CatergoryGuide
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things. Perhaps the most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design. This is a useful guide that shows you how and when to use media queries.
-
How to Code in React
ProviderDigital Ocean
CatergoryTutorial
React is a popular JavaScript framework for creating front-end applications, such as user interfaces that allow users to interact with programs. Originally created by Facebook, it has gained popularity by allowing developers to create fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax known as JSX. In this series, you will build out examples of React projects to gain an understanding of this framework, giving you the knowledge you need to pursue front-end web development or start out on your way to full stack development.
-
Hover Animation
ProviderPiccalil
CatergoryTutorial
Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.
-
A Guide to Flexbox
ProviderCSS-Tricks
CatergoryGuide
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
-
Build an Advice Generator App
ProviderFront End Mentors
CatergoryProject
The perfect project if you're learning how to interact with 3rd-party APIs. This challenge uses the Advice Slip API to generate random quotes of advice.
-
Time Tracking Dashboard
ProviderFront End Mentors
CatergoryProject
A perfect opportunity to practice your CSS Grid skills. For anyone wanting to take it up a notch, we provide a JSON data file to practice working with data.
-
NFT preview card component
ProviderFront End Mentors
CatergoryProject
This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.
-
Javascript
ProviderMDN Web Docs
CatergoryDocs
Web development docs for Javascript
-
CSS
ProviderMDN Web Docs
CatergoryDocs
Web development docs for CSS.
-
React Sandbox
ProviderCode Sandbox
CatergoryTool
A React tool that allows you to test and run you react code without any setup. This is ideal if you want practice or experiment while learning react.
-
GSAP Animations
ProviderGSAP
CatergoryTool
The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools. You can use GSAP to animate pretty much anything JavaScript can touch, in any framework. Whether you want to animate UI, SVG, Three.js or React components.
-
Logo Maker
ProviderLooka
CatergoryTool
Looka Logo Maker combines your logo design preferences with Artificial Intelligence to help you create a custom logo you'll love. All it takes is a few clicks and five minutes.
-
GSAP Cheatsheet
ProviderGSAP
CatergoryDocs
A list of useful functions and modules to get you started with GSAP 3.
-
Logo Design
ProviderLogo Makr
CatergoryTool
Make a custom logo in minutes. Free premium features | Easy to use tools | No sign up required.
-
Creating Fancy Shapes
Provider9Elements
CatergoryTool
Create unique shapes using border radius. A great tool to create shapes in seconds.
-
Fluid typography with CSS clamp
ProviderPiccalilli
CatergoryTutorial
Learn how to use CSS clamp() to create fluid and responsive typography.
-
Learn Python
ProviderDigital Ocean
CatergoryTutorial
Start learning Python by taking one of the many tutorials from Digital Ocean. Learn about Strings, Arrays, Objects, how to manipulate data by using Pandas and many more.
-
Tinypng
ProviderTinify
CatergoryTool
Reduce the size of your jpeg, png or webp file for free. Tiny PNG allows you to optimize your images ensuring optimal website performance.
-
Color Palette Generator
ProviderCoolors
CatergoryTool
Create amazing color palettes with 1 Click. Coolors allows you to get inspired by thousands of color schemes.
-
How to use Colors
ProviderHappy Hues
CatergoryReferance
Happy Hues explains how to use colors in your design or illustration. A great resource to learn where to use colors and why.
-
Icons & Photos
ProviderThe Noun Project
CatergoryTool
Find Icons and Photos for your next project.
-
CSS Icons
ProviderCSS GG
CatergoryTool
A CSS library of icons created entirely by CSS. SVG and Figma files also available
-
3D Object Generation
ProviderPolypane
CatergoryTutorial
A Collection of CSS 3D Transforms that show depth and great visual effects. Every example clearly shows the effect with the CSS code, a great way to understand how to implement these 3D transforms into your projects.
-
Font Pairing Made Simple
ProviderFontjoy
CatergoryTool
Font generation in a single click. Fontjoy allows you to generate font pairings automatically or manually and visually compares them.