Piccalilli
Front-end education for the real world. Courses, articles, and a newsletter to level up your web skills.
Web Development Courses, Tutorials & Programming Documentation
84 resources indexed
Expand your skills with high-quality courses, in-depth tutorials, and comprehensive documentation. Whether you're learning a new framework or mastering advanced concepts, find the best educational resources for developers.
Analytics.usa.gov
This website provides a window into how people are interacting with the US government online. The data come from a unified Google Analytics account for U.S. federal government agencies known as the Digital Analytics Program. This program helps government agencies understand how people find, access, and use government services online. For everyone else, it's an interesting look in to browser and device statistics with a huge sample size to help you build with current usage trends in mind.
Go Make Things
Blog posts, newsletter, podcast and videos from Chris Ferdinandi, helping people build the web better. If you hate the complexity of modern front‑end web development and want to learn how to build a simpler, more resilient web, this is the channel for you.
How DNS Works
How DNS Works by DNSimple is a cute, engaging comic exploring the inner workings of the global domain name system.
Dark Patterns
Discover a variety of dark pattern examples, sorted by category, to better understand deceptive design practices.
Inside Modern Browsers
In this 4-part blog series, we'll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you.
PHP for Beginners
We all start somewhere. For programming, this series is that first step. I've designed it specifically for newcomers to, not just PHP, but programming in general. Here, you'll learn the fundamentals of PHP - all the way down to defining basic variables and arrays.
Educational Sensational Inspirational Foundational
A historical record of foundational web development blog posts.
Knights of the Flexbox Table
Welcome to the Knights of the Flexbox table. A game where you can help Sir Frederic Flexbox and his friends to uncover the treasures hidden in the Tailwind CSS dungeons. You can navigate the knight through the dungeon by changing his position within the dungeon using Flexbox and Tailwind CSS.
Flavio Copes Handbooks
Free handbooks for for learning to code with HTML, CSS, JavaScript, SQL, Go, Svelte, PHP, React, Command Line, Next.js, Express, Node.js, Swift, Python and C!
C3 CSS
A methodology to help you write human-friendly CSS. C3 (Component, Child, Context) is a methodology for writing CSS, centred around a selector naming convention. This approach is intended for anyone who wants to write code which is semantic, easy to maintain, and scalable. If you are familiar with BEM, you will be familiar with two thirds of C3. Either way, you should find all the information you need in this guide.
Complete Guide to Media Queries
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.
Free Books for Designers
Free eBooks to help you develop creative and design skills.
Build your own React
Rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.
The Typing of the RegEX
Do you dare to discover the horrors that await! Test your RegEX skills with this challenging game.
Use The Keyboard
A collection of keyboard shortcuts for Mac apps, Windows programs, and websites.
Web Browser Engineering
Web browsers are ubiquitous, but how do they work? This book explains, building a basic but complete web browser, from networking to JavaScript, in a thousand lines of Python.
Oh My Git!
An open source game about learning Git! Oh My Git! is an open source game that introduces players to the popular version control system "Git". It is highly interactive, and aims at building intuition for operations like "merging" or "rebasing" branches. Players are guided through the features of Git step by step – each level tells a little story where the player can use their new-found powers to solve problems or help others.
The Cursed Computer Iceberg
This is not a hall of shame. The intent is to awaken you to many of the peculiarities and weirdness of computers. Hopefully, after reading these articles, you will have learned a lot and will embrace chaos.
Can I Include?
Check if a chosen HTML tag can be nested inside another HTML tag according to the spec.
Flexbox Defense
Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!
Regex Crossword
A fun spin practicing regex. Build your skills by playing Regex Crossword.
Learn Eleventy From Scratch
In this Eleventy (opens new window)course, we go from a completely empty directory to a full-blown marketing site for a design agency, and along the way, we dive really deep into Eleventy and front-end development best practices.
Cloudflare TV
A 24x7 live stream video channel focused on general and technical topics related to building a better Internet.
Learn CSS Grid
Learn CSS Grid with Wes Bos in 25 "pretty good" videos. From fundamentals to real world in about 4 hours.
Design Vault
Design Vault is a curated library of screenshots & interaction patterns from the world's best digital products. Gain insights, explore trends and understand competitors and best practices.
Learn Git Branching
Learn Git Branching is the most visual and interactive way to learn Git on the web; you'll be challenged with exciting levels, given step-by-step demonstrations of powerful features, and maybe even have a bit of fun along the way.
Can't Unsee
Can't Unsee is a test of your attention to detail in UI design. Choose the "correct" version with an eye for pixel perfection. How high can you score?
Ethical Design Handbook
A practical handbook on ethical design for digital products. With practical techniques to make honest interfaces work for digital products.
Talk Python Podcast
A podcast on Python and related technologies. Learn python from start to finish.
HTML Elements Reference
Handy guide to every HTML element there is. Replace your divs with more semantic markup.
30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
Design Systems Checklist
An open-source checklist to help you plan, build and grow your design system.
Webbed Briefs
Brief videos about the web, its technologies, and how to make the most of them.
Checklist Design
A collection of the best design practices compiled in to handy checklists.
Every Layout
Relearn CSS layout. Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Frontend Practice
A collection of real websites to recreate for practice with hints and tips.
Josh W Comeau
Development blog focusing on React, animation, CSS and JavaScript. Great learning resource with interactive articles.
The Design of Forms in Government Departments
A digitally remastered book first published in 1962 on the design of forms in the UK Government.
Flavio Copes
Software engineer content creator covering huge array of disciplines with lots of free content.
Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Screen Size Map
An interactive map of screen sizes for responsive and adaptive design.
CSS-Tricks
These days CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective. We have staff writers (see below) and loads of guest authors, so the content you find here will be as diverse as they are.
Every Layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Flexbox Froggy
Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
Grid Garden
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.
Modern JavaScript
How it's done now. From the basics to advanced topics with simple, but detailed explanations.
Open Source Guide
Open source software is made by people just like you. Learn how to launch and grow your project.
RandomAPI
Easily generate fake data for populating your mockups and testing your applications.
CodePen Challenges
Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on. The best pens get picked and featured on the homepage!
Accessibility Guidelines
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.
Daily UI
Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.
JavaScript 30
Build 30 things in 30 days using vanilla JavaScript with this free course from Wes Bos. Designed for beginner to Intermediate developers and designers who want to become comfortable with JavaScript fundamentals without a library.
PHP: The Right Way
PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the web and what the contributors consider to be best practices at the present time.
What The Flexbox?!
A simple, free 20 video course that will help you master CSS Flexbox! Created by Wes Bos.
Mindful Design
Mindful Design presents a responsible deep dive into the areas of cognitive psychology and neuroscience that can most improve design. If you want to start making products that integrate into lifestyles instead of interrupting them, Mindful Design is for you.