Stark's blog

Awesome list of web development resources ๐Ÿ’ฅAs you learn, keep this list handy.

main image Learning the skills you need for web design or web development is the first step toward working on the webโ€” but that also means familiarizing yourself with the tools of the trade. Thatโ€™s why I put together this list of Awwwesome free resources youโ€™ll need for web development, web design, or both.

As you learn, keep this list handy.

Contents

๐ŸŒ Free Hosting:

๐Ÿ”น Netlify

Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

โฉฅ ๐Ÿ”— Netlify

๐Ÿ”น Firebase

Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business.

โฉฅ ๐Ÿ”— Firebase

๐Ÿ”น Amazon Web Services (AWS)

Whether you're looking for computing power, database storage, content delivery, or other functionality, AWS has the services to help you build sophisticated applications with increased flexibility, scalability, and reliability.

โฉฅ ๐Ÿ”— Amazon Web Services

๐Ÿ”น Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

โฉฅ ๐Ÿ”— Heroku

๐Ÿ”น GitHub Pages

Websites for you and your projects are hosted directly from your GitHub repository. Just edit, push, and your changes are live.

โฉฅ ๐Ÿ”— GitHub Pages

๐Ÿ”น Vercel

Deploy web projects with the best front-end developer experience and highest end-user performance.

โฉฅ ๐Ÿ”— Vercel

๐Ÿ”น Surge

Static web publishing for Front-End Developers. Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.

โฉฅ ๐Ÿ”— Surge

๐Ÿ”น Render

Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploy from Git.

โฉฅ ๐Ÿ”— Render

๐Ÿ”น GitLab Pages | GitLab

Learn how to use GitLab Pages to deploy a static website at no additional cost.

โฉฅ ๐Ÿ”— GitLab Pages

๐Ÿ“• Learning Platforms:

๐Ÿ”น freeCodeCamp

freeCodeCamp is a community of millions of people around the world who are learning to code together. You can learn to code with free online courses, programming projects, and interview preparation for developer jobs.

โฉฅ ๐Ÿ”— freeCodeCamp

๐Ÿ”น Codecademy

Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new career (or advance in their current one).

โฉฅ ๐Ÿ”— Codecademy

๐Ÿ”น JavaScript 30

Build 30 things with vanilla JS in 30 days with 30 tutorials

โฉฅ ๐Ÿ”— http://javascript30.com

๐Ÿ”น Frontend Mentor | Front-end coding challenges using a real-life workflow

Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working with professional designs.

โฉฅ ๐Ÿ”— Frontend Mentor

๐Ÿ”น Test Automation University | Applitools

Become a test automation superstar - Free!๐ŸŒŸ

โฉฅ ๐Ÿ”— Test Automation University | Applitools

๐Ÿ”น Coursera | Online Courses & Credentials From Top Educators. Join for Free

Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.

โฉฅ ๐Ÿ”— Coursera

๐Ÿ”น Khan Academy | Free Online Courses, Lessons & Practice

Khan Academy offers practice exercises, instructional videos, and a personalized learning dashboard that empower learners to study at their own pace in and outside of the classroom. We tackle math, science, computing, history, art history, economics, and more, including K-14 and test preparation (SAT, Praxis, LSAT) content. We focus on skill mastery to help learners establish strong foundations, so there's no limit to what they can learn next!

โฉฅ ๐Ÿ”— Khan Academy

๐Ÿ”น Sololearn: Learn to Code

SoloLearn apps provide you with the ability to choose what you will learn without the constraints of following existing curricula. They also let you learn wherever you happen to be, whether at home, in a cafรฉ, or even on a bus or a train.

โฉฅ ๐Ÿ”— Sololearn

๐Ÿ‘จโ€๐Ÿ’ป Coding Challenge Platforms:

๐Ÿ”น Codewars - Achieve mastery through coding practice and developer mentorship

Coding practice for all programming levels โ€“ Join a community of over 3 million developers and improve your coding skills in over 55 programming languages!

โฉฅ ๐Ÿ”— Codewars

๐Ÿ”น Topcoder

Topcoder (formerly TopCoder) is a crowdsourcing company with an open global community of designers, developers, data scientists, and competitive programmers.

โฉฅ ๐Ÿ”— Topcoder

๐Ÿ”น CodingGames and Programming Challenges to Code Better

CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, and have fun.

โฉฅ ๐Ÿ”— CodinGame

๐Ÿ”น HackerRank

HackerRank is the market-leading technical assessment and remote interview solution for hiring developers. Learn how to hire technical talent from anywhere!

โฉฅ ๐Ÿ”— HackerRank

๐Ÿ”น Project Euler

Project Euler is a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve. Although mathematics will help you arrive at elegant and efficient methods, the use of a computer and programming skills will be required to solve most problems.

โฉฅ ๐Ÿ”— Project Euler

๐Ÿ”น Coderbyte

The industryโ€™s #1 website for technical interview prep, coding challenges, and expert videos.

โฉฅ ๐Ÿ”— Coderbyte

๐Ÿ”น CodeChef

CodeChef promotes constant learning and friendly programming competitions for its users, along with the support of its large community of problem curators.

โฉฅ ๐Ÿ”— CodeChef

๐Ÿ”น Exercism

Learn, practice, and get world-class mentoring in over 50 languages. Solve coding exercises and get mentored to gain true fluency in your chosen programming languages. Exercism is open-source and not-for-profit.

โฉฅ ๐Ÿ”— Exercism

๐Ÿ”น LeetCode - The World's Leading Online Programming Learning Platform

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

โฉฅ ๐Ÿ”— LeetCode

๐Ÿ”น SPOJ

The SPOJ platform is centered around an online judge system, which serves for the automatic assessment of user-submitted programs. Some of its most important features include: support for more than 45 programming languages and compilers, including C, C++, Pascal, JAVA, C#, Perl, Python, Ruby, Haskell, Ocaml, and esoteric languages.

โฉฅ ๐Ÿ”— SPOJ

๐Ÿ‘จโ€๐ŸŽ“ Freelancing platforms:

๐Ÿ”น Toptal

Toptal is an exclusive network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. Top companies hire Toptal freelancers for their most important projects.

โฉฅ ๐Ÿ”— Toptal

๐Ÿ”น Upwork

Upwork connects businesses with independent professionals and agencies around the globe. Where companies and freelancers work together in new ways that unlock their potential.

โฉฅ ๐Ÿ”— Upwork

๐Ÿ”น Freelancers

Find & hire top freelancers, web developers & designers inexpensively. World's largest marketplace of 50m. Receive quotes in seconds. Post your job online now.

โฉฅ ๐Ÿ”— Freelancers

๐Ÿ”น People Per Hour

Access global talent on the freelancer website trusted by over 1 million businesses worldwide.

โฉฅ ๐Ÿ”— People Per Hour

๐Ÿ”น SimplyHired

Browse SimplyHired for jobs, view local and national salary information, discover companies, and learn about the job market in a specific city.

โฉฅ ๐Ÿ”— SimplyHired

๐Ÿ”น Envato - Top digital assets and services

Join millions and bring your ideas and projects to life with Envato - the worldโ€™s leading marketplace and community for creative assets and creative people.

โฉฅ ๐Ÿ”— Envato

๐Ÿ”น Guru - Hire Freelancers Online and Find Freelance Jobs Online

Guru is one of the best freelance websites to find & hire Freelancers online and get work done. Freelancers can also search jobs for freelance work and get hired.

โฉฅ ๐Ÿ”— Guru

๐Ÿ”น Fiverr - Freelance Services Marketplace for Businesses

Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories.

โฉฅ ๐Ÿ”— Fiverr

๐Ÿ”น Hireable

Your job is our job. Visit Hireable today and search for thousands of jobs in your area.

โฉฅ ๐Ÿ”— Hireable

๐Ÿ“Œ List of websites to find remote jobs:

๐Ÿ”น FlexJobs: The Best Remote Jobs, Work from Home Jobs & More

The #1 job search site for hand-screened flexible and remote jobs (work-from-home jobs) since 2007. Plus get resume, coaching, and career help. Join today!

โฉฅ ๐Ÿ”— FlexJobs

๐Ÿ”น Remote Jobs

Looking for a remote job as a developer, customer service rep, recruiter, designer, or sales professional? Browse openings in those categories and more below. We hand curate this list to showcase the best remote job opportunities in the most recruited job categories. Find a remote job here to launch your work anywhere career.

โฉฅ ๐Ÿ”— Remote Jobs

๐Ÿ”น JustRemote

Discover Remote Jobs from around the world. Give up the commute, work remotely and do what you love, daily, from anywhere. Find your perfect remote development, design, sales, or marketing job today.

โฉฅ ๐Ÿ”— JustRemote

๐Ÿ”น We Work Remotely

We Work Remotely is the largest remote work community in the world. With over 3M visitors, WWR is the number one destination to find and list incredible remote jobs.

โฉฅ ๐Ÿ”— We Work Remotely

๐Ÿ”น RemoteOk

Remote Jobs in Programming, Design, Sales, and more #OpenSalaries in August 2022 Looking for a remote job? Remote OKยฎ is the #1 Remote Job Board and has 50,927+ remote jobs as a Developer, Designer, Copywriter, Customer Support Rep, Sales Professional, Project Manager, and more!

โฉฅ ๐Ÿ”— RemoteOk

๐Ÿ”น Jobspresso

Jobspresso is the easiest way to find high-quality remote jobs in tech, marketing, customer support, and more. 100% of our jobs are hand-picked, manually reviewed, and expertly curated.

โฉฅ ๐Ÿ”— Jobspresso

๐Ÿ”น EU REMOTE JOBS

Remote jobs in Europe, the Middle East & Africa time zones. With the best remote companies in the world

โฉฅ ๐Ÿ”— EU REMOTE JOBS

๐Ÿ”น RemoteHub

Find jobs on RemoteHub, the global workplace, and the professional community.

โฉฅ ๐Ÿ”— RemoteHub

๐Ÿ”น 6nomads for Engineers

Find a full-time remote job in a tech company.

โฉฅ ๐Ÿ”— [6nomads(http://6nomads.com)

๐Ÿž Photos:

๐Ÿ”น Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty-free or stock photos.

โฉฅ ๐Ÿ”— Unsplash

๐Ÿ”น Pixabay

Find your perfect free image or video to download and use for anything. โœ“ Free for commercial use โœ“ No attribution required โœ“ High-quality images.

โฉฅ ๐Ÿ”— Pixabay

๐Ÿ”น Pexels

Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty-free stock images & copyright-free pictures. No attribution is required.

โฉฅ ๐Ÿ”— Pexels

๐ŸŒˆ Illustrations:

๐Ÿ”น unDraw

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products, and applications with your color, for free.

โฉฅ ๐Ÿ”— unDraw

๐Ÿ”น DrawKit - Beautiful vector illustrations

Free and premium vector SVG illustrations for you to use on your next project, no attribution required! Vector illustrations, packs, icons, and more.

โฉฅ ๐Ÿ”— DrawKit

๐Ÿ”น Ouch

If you're like most designers and marketers, you search for illustrations in Google Images or on some stock image website. With us, you get trendier, more professional, and better-matching illustrations that enhance your projects and bring visual harmony into the world.

โฉฅ ๐Ÿ”— Ouch

๐Ÿ”น IRA Design by Creative Tim

Build your own amazing illustrations.

โฉฅ ๐Ÿ”— IRA Design

๐Ÿ”น Interfacer

300+ free design resources. Interfacer is a collection of high-quality free Design Resources created by the most talented and awesome people on the Internet. You can use all of them in commercial projects.

โฉฅ ๐Ÿ”— Interfacer

๐Ÿ”น Blush: Illustrations for everyone

Blush makes it easy to add free illustrations to your designs. Play with fully customizable graphics made by artists across the globe.

โฉฅ ๐Ÿ”— Blush

๐Ÿ”  Icons:

๐Ÿ”น Font Awesome

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. The worldโ€™s most popular and easiest-to-use icon set just got an upgrade. More icons. More styles. More Options.

โฉฅ ๐Ÿ”— Font Awesome

๐Ÿ”น Flaticon

Free Icons and Stickers - Millions of resources to download Download Free Icons and Stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD, and CSS formats

โฉฅ ๐Ÿ”— Flaticon

๐Ÿ”น ICONS8

Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers โ†’ consistent quality โšก๏ธ

โฉฅ ๐Ÿ”— ICONS8

๐Ÿ”น Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

โฉฅ ๐Ÿ”— Material Icons

๐Ÿ”น iconmonstr

Free simple icons for your next project

โฉฅ ๐Ÿ”— iconmonstr

โœ๏ธ Fonts:

๐Ÿ”น Google Fonts

Making the web more beautiful, fast, and open through great typography

โฉฅ ๐Ÿ”— Google Fonts

๐Ÿ”น FontSpace

Free downloads of legally licensed fonts that are perfect for your design projects. The best place in the universe to search for amazing fonts.

โฉฅ ๐Ÿ”— fontspace.com

๐Ÿ”น 1001 Fonts โค Free Fonts Baby!

39509 free fonts in 21894 families ยท Free licenses for commercial use ยท Direct font downloads ยท Mac ยท Windows ยท Linux

โฉฅ ๐Ÿ”— 1001 Fonts

๐Ÿ”น Font Squirrel

Free Fonts! Legit Free & Quality ยป Font Squirrel Handpicked free fonts for graphic designers with commercial-use licenses.

โฉฅ ๐Ÿ”— Font Squirrel

โ–ถ Youtube Channels:

๐Ÿ”น Traversy Media

Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python, and PHP

โฉฅ ๐Ÿ”— Traversy Media

๐Ÿ”น FreeCodeCamp

freeCodeCamp is a nonprofit community that helps millions of people learn to code 100% for free helping thousands of people find their first coding job

โฉฅ ๐Ÿ”— FreeCodeCamp

๐Ÿ”น The Net Ninja

Blackbelt your web development skills. Over 1000 free programming tutorials about:

...And many more topics as well :)

โฉฅ ๐Ÿ”— The Net Ninja

๐Ÿ”น Google Chrome Developers - Making the web more awesome.

โฉฅ ๐Ÿ”— Google Chrome Developers

๐Ÿ”น The New Boston

Tons of sweet computer-related tutorials and some other awesome videos too!

โฉฅ ๐Ÿ”— The New Boston

๐Ÿ”น Derek Banas

I make tutorials based on your requests. I will cover any topic you can imagine.

โฉฅ ๐Ÿ”— Derek Banas

๐Ÿ”น Academind

There's always something to learn! We (Max & Manuel) create courses and tutorials that teach you everything related to web development. No matter if it's programming languages like JavaScript, runtimes like NodeJS, or popular frameworks like ReactJS, Angular, or VueJS (and much more!). We got you covered. :-)

โฉฅ ๐Ÿ”— Academind

๐Ÿ”น Sonny Sangha

I've been coding for over 10 years now. As a Full Stack developer, I've worked both with startups and large corporations to help build & scale their companies. Along the journey, I realized my passion existed for helping others excel and pursue their dreams as upcoming developers and if thatโ€™s not enough I have cloned most of the applications you have used in your life! ๐ŸŒŸ

โฉฅ ๐Ÿ”— Sonny Sangha

๐Ÿ”น Clever Programmer

You can find awesome programming lessons here! Also, expect programming tips and tricks that will take your coding skills to the next level.

โฉฅ ๐Ÿ”— Clever Programmer

๐ŸŽ™ Podcasts:

๐Ÿ”น Syntax

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

โฉฅ ๐Ÿ”— Syntax

๐Ÿ”น Fullstack radio

A podcast for developers interested in building great software products. Hosted by Adam Wathan.

โฉฅ ๐Ÿ”— Fullstack radio

๐Ÿ”น The Changelog

Conversations with the hackers, leaders, and innovators of software development hosted by Adam Stacoviak and Jerod Santo.

โฉฅ ๐Ÿ”— The Changelog

๐Ÿ”น The Laracasts Snippet

The Laracasts snippet, each episode, offers a single thought on some aspect of web development.

โฉฅ ๐Ÿ”— The Laracasts Snippet

๐Ÿ”น Front End Happy Hour

A software engineering podcast featuring a panel of Software Engineers from Netflix, Twitch, & Atlassian talking over drinks about Frontend, JavaScript, and career development.

โฉฅ ๐Ÿ”— Front End Happy Hour

๐Ÿ”น JavaScript Jabber Archives

A weekly discussion by top-end JavaScript developers on the technology and skills needed to level up on your JavaScript journey.

โฉฅ ๐Ÿ”— JavaScript Jabber Archives

๐Ÿ”น Commit Your Code!

Commit Your Code motivates and inspires developers of all levels to reach their goals in tech. We will be sharing stories and interviewing developers that have gone through this and made it to their dream jobs!

โฉฅ ๐Ÿ”— Commit Your Code!

๐Ÿ”น Shop Talk

A weekly podcast about just building websites from Dave Rupert and Chris Coyier.

โฉฅ ๐Ÿ”— Shop Talk

๐Ÿ”น Ladybug Podcast

We started the Ladybug Podcast as a few ladies Twitter acquaintances looking to add our voices to the male-dominated tech podcast space. โฉฅ ๐Ÿ”— Ladybug Podcast

๐Ÿ”น CodePen Radio

The CodePen team talks about the ins and outs of running a web software business.

โฉฅ ๐Ÿ”— CodePen Radio

๐Ÿ”น JAMStack Radio

A show all about the JAMstack, a new way to build fast and secure apps or websites.

โฉฅ ๐Ÿ”— JAMStack Radio

๐Ÿ”น Modern web

Modern Web is a podcast that explores next-generation frameworks, standards, and techniques. Visit http://modern-web.org for more.

โฉฅ ๐Ÿ”— Modern web

๐Ÿš€ Code Editors:

๐Ÿ”น Visual Studio Code [VS Code]

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

โฉฅ ๐Ÿ”— VS Code

๐Ÿ”น CSublime Text

Sublime Text is a sophisticated text editor for code, markup, and prose. You'll love the slick user interface, extraordinary features, and amazing performance.

โฉฅ ๐Ÿ”— Sublime Text

๐Ÿ”น Atom

At GitHub, weโ€™re building the text editor weโ€™ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We canโ€™t wait to see what you build with it.

โฉฅ ๐Ÿ”— Atom

๐Ÿ”น Brackets

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

โฉฅ ๐Ÿ”— Brackets

๐Ÿ”น Vim

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X

โฉฅ ๐Ÿ”— Vim

๐ŸŽจ Color Palettes:

Coolors - The super fast color palette generator!

Generate or browse beautiful color combinations for your designs.

โฉฅ ๐Ÿ”— coolors.co

๐Ÿ”น Color Hunt

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

โฉฅ ๐Ÿ”— colorhunt.co

๐Ÿ”น Paletton - The Color Scheme Designer

In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.

โฉฅ ๐Ÿ”— Paletton

๐Ÿ”น Color-Hex

Color-hex gives information about colors including color models (RGB, HSL, HSV, and CMYK), Triadic colors, monochromatic colors, and analogous colors calculated on the color page. Color-hex.com also generates a simple CSS code for the selected color.

โฉฅ ๐Ÿ”— Color Hex

๐Ÿ”น ColorSpace

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients, and much more! Your space for everything that has to do with color!

โฉฅ ๐Ÿ”— ColorSpace

โ‡ UI Inspiration:

๐Ÿ”น UI Garage - Specific UI Design inspiration & Patterns for your design.

Daily UI inspiration & patterns for designers, and developers to find inspiration, tools, and the best resources for your project.

โฉฅ ๐Ÿ”— UI Garage

๐Ÿ”น Collect UI

Daily inspiration is collected from the daily UI archive and beyond. Based on Dribbble shots, hand-picked, updated daily.

โฉฅ ๐Ÿ”— Collect UI

๐Ÿ”น Screenlane

Only the best mobile and web UI design inspiration, right in your inbox

โฉฅ ๐Ÿ”— Screenlane

๐Ÿ“” Docs:

๐Ÿ”น W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references, and exercises in all the major languages on the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

โฉฅ ๐Ÿ”— W3schools

๐Ÿ”น 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.

โฉฅ ๐Ÿ”— Developer Mozilla

๐Ÿ”น DevDocs

Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.

โฉฅ ๐Ÿ”— DevDocs

๐Ÿ”น W3docs

HTML CSS JavaScript jQuery AJAX XML SQL Tutorials References Examples

โฉฅ ๐Ÿ”— W3docs

๐Ÿ’ซ Animation Libraries:

๐Ÿ”น CSShake

Some CSS classes to move your DOM! Easy-to-use classes that will add different kinds of shakes to each part of your site.

โฉฅ ๐Ÿ”— CSShake

๐Ÿ”น Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. โฉฅ ๐Ÿ”— Animate.css

๐Ÿ”น AnimeJS

AnimeJS (/หˆรฆn.ษ™.meษช/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

โฉฅ ๐Ÿ”— AnimeJS

๐Ÿ”น GreenSock (GSAP)

Professional-grade JavaScript animation for the modern web

โฉฅ ๐Ÿ”— GreenSock (GSAP)

๐Ÿ”น Magic Animations

Magic CSS is a set of simple animations to include in your web or app projects.

โฉฅ ๐Ÿ”— Magic Animations

๐Ÿ”น Hover CSS

A collection of CSS3-powered hover effects to be applied to links, buttons, logos, SVG, featured images, and so on. Easily apply to your own elements, modify or just use them for inspiration. Available in CSS, Sass, and LESS.

โฉฅ ๐Ÿ”— Hover CSS

๐Ÿ”น AniJS - A Library to Raise your Web Design without Coding

โฉฅ ๐Ÿ”— AniJS

๐Ÿ”น Wicked CSS

WickedCSS. For the ones looking to spice up their sites with some sweet animation effects. Find all you need here on the site and download the CSS file.

โฉฅ ๐Ÿ”— Wicked CSS

๐Ÿ”น Tuesday - It's Tuesday A quirky CSS Animation Library.

โฉฅ ๐Ÿ”— Tuesday

๐Ÿ”น Mo.js

Fast. Silky smooth animations and effects for staggering user's experience. ; Retina Ready. Screen density-independent effects look good on any device. ; Simple.

โฉฅ ๐Ÿ”— Mo.js

๐Ÿ”น Bounce.js

Bounce.js is a tool and JS library for generating beautiful CSS3-powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you'd like your application to generate these on the fly, you can use the Bounce.js library.

โฉฅ ๐Ÿ”— Bounce.js

๐Ÿ“Š Charts / Data Visualization:

๐Ÿ”น Chart.js

Simple, clean, and engaging HTML5-based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

โฉฅ ๐Ÿ”— Chart.js

๐Ÿ”น D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3โ€™s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

โฉฅ ๐Ÿ”— https://d3js.org/

๐Ÿ”น ๐Ÿ“Š three.js

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL

โฉฅ ๐Ÿ”— https://threejs.org/

โš™ Chrome Extensions:

๐Ÿ”น Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

โฉฅ ๐Ÿ”— Web Developer

๐Ÿ”น CSSViewer

CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on (2006-2008).

โฉฅ ๐Ÿ”— CSSViewer

๐Ÿ”น Wappalyzer

Find out the technology stack of any website. Create lists of websites that use certain technologies, with company and contact details. Use our tools for lead generation, market analysis, and competitor research.

โฉฅ ๐Ÿ”— Wappalyzer

๐Ÿ”น JSONView

JSONView ยท Pretty-prints JSON instead of prompting to download it or rendering it as text. ยท Collapsible array and object sections for easy navigation.

โฉฅ ๐Ÿ”— JSONView

๐Ÿ”น Lorem Ipsum Generator

The Lorem Ipsum Generator quickly delivers default text to complement your amazing design. The default settings are optimized to be used right after installation, but you can easily customize a few settings to get the perfect text for your taste. Each sentence is randomly generated to simulate real text.

โฉฅ ๐Ÿ”— Lorem Ipsum Generator

โšก Website Optimization Tools:

๐Ÿ”น Google PageSpeed Insights - Make your web pages fast on all devices ;

โฉฅ ๐Ÿ”— Google PageSpeed Insights

๐Ÿ”น GTmetrix

GTmetrix was developed by Carbon60 as a tool for customers to easily test the performance of their webpages

โฉฅ ๐Ÿ”— GTmetrix

๐Ÿ”น WebPageTest

Test. Optimize. Repeat! Instantly test your siteโ€™s speed, usability, and resilience in real browsers, devices, and locations around the world.

โฉฅ ๐Ÿ”— WebPageTest

๐Ÿ”น Yslow

YSlow is an open-source tool that analyzes your website and gives you suggestions to improve its performance.

โฉฅ ๐Ÿ”— Yslow

๐ŸŸ Code Playground

๐Ÿ”น CodePen

CodePen is a playground for the front-end side of the web. Itโ€™s all about inspiration, education, and sharing. The service highlights popular demonstrations (โ€œPensโ€) and offers advanced functionality such as sharing and embedding. CodePen is great for building a reduced test case to demonstrate and figure out a bug.

โฉฅ ๐Ÿ”— codepen.io

๐Ÿ”น CSSDesk

CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. There are line numbers and syntax highlighting appears in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.

โฉฅ ๐Ÿ”— cssdeck.com

๐Ÿ”น Googleโ€™s Code Playground

Googleโ€™s Code Playground is a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Googleโ€™s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box

โฉฅ ๐Ÿ”— developers.google.com/oauthplayground

๐Ÿ”น JS Bin

It provides an environment to build apps and assists to test the snippets of HTML and CSS. It allows you to edit the code and also you can also debug the code if any error you find. Once you finalized the code you may send it to a peer for review.

โฉฅ ๐Ÿ”— jsbin.com

๐Ÿ”น JSFiddle

jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow, Vanilla). Also, if there is, you can add a complementary framework like jQuery UI or MooTools. A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too. It is an almost perfect platform for trying & sharing your JavaScript code without the need for a website.

โฉฅ ๐Ÿ”— jsfiddle.net

๐Ÿ”น Dabblet

Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free so that you wonโ€™t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites, and share it with others. It currently only supports modern versions of Chrome, Safari, and Firefox. All posted code belongs to the poster and no license is enforced. Dabblet itself is open-source software and is distributed under an NPOSL-3.0 license.

โฉฅ ๐Ÿ”— dabblet.com

๐Ÿ”น Editr

Editr is an HTML, CSS, and JavaScript playground that you can host on your server. It is based on ACE Editor. It is super easy to set up. It supports multiple instances on one page. Configurations are available via JS object or HTML attributes. Editr supports 3 layout views: horizontal, vertical, and single. The first two are for live edit. The third one is for presentation. Editr is licensed under MIT License.

โฉฅ ๐Ÿ”— lab.kasper.io/editr

๐Ÿ”น Livewave

Liveweave is an HTML5, CSS3 & JavaScript playground and a real-time editor for web designers and developers. It is a great tool to test, practice, and share your creations. It has resizable panels so that you can write your code (or weave, as we call it) the way you want. Liveweave also has built-in context-sensitive code-hinting for HTML5 and CSS3 tags/attributes that makes life a lot easier.

โฉฅ ๐Ÿ”— liveweave.com

๐Ÿ”น Tech.io

Techio is a collaborative platform to discover and share unique perspectives on any technology through open-source playgrounds. Empower others to learn by crafting hands-on tutorials on topics that matter to you.

โฉฅ ๐Ÿ”— tech.io

๐Ÿ”น PlayCode

PlayCode is a website where you can type in code and it immediatly shows you what you programmed in a little extra tab.

โฉฅ ๐Ÿ”— playcode.io

๐Ÿ”น CodeSandbox

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

โฉฅ ๐Ÿ”— codesandbox.io

๐Ÿ”น StackBlitz

StackBlitz is an online IDE where you can create Angular & React projects that are immediately online & shareable via linkโ€ฆ in just one click. ๐Ÿ˜ฎ It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type.

โฉฅ ๐Ÿ”— stackblitz.com

๐Ÿ”น Glitch

With working example apps to remix, a code editor to modify them, instant hosting and deployment - anybody can build a web app on Glitch.

โฉฅ ๐Ÿ”— glitch.com

โœ’ Blogs for Developers

๐Ÿ”น Coding Horror

Coding Horror is a blog by Jeff Atwood, an experienced web developer. Although, the blog consists of all types of security and software development related topics, Jeff personally concentrates on the human participation in software development. The author firmly believes that one also needs to focus on the people who are going to use the code and understand them while preparing the code.

โฉฅ ๐Ÿ”— Coding Horror

๐Ÿ”น Joel on Software

Joel on software was found by Joel Spolsky in 2000. There is a lot to talk about this blogger. Joel Spolsky worked as a program manager in Microsoft. Later he became the co-founder of StackExchange, a site for programming Q&A. Programming world also recognizes him as the founder of Fog Creek Software and maker of the software Trello. You will love this blog if you love topics related to software development, business, and management.

โฉฅ ๐Ÿ”— Joel on Software

๐Ÿ”น Code Simplicity

Code Simplicity talks about introducing simplicity in code designs. The author, Max Kanat-Alexander (who has also written the book โ€œCode Simplicity: The Science of Software Developmentโ€) believes in simple software designs and considers complex designs stupid. He is an experienced software engineer working at Google. He has also lead the team behind Bugzilla project.

โฉฅ ๐Ÿ”— Code Simplicity

๐Ÿ”น Scott Hanselman

You can look upon Scott Hanselmanโ€™s blog if you want helpful, concise and clear advices on web, development culture, gadgets, code, technology and anything related to a developerโ€™s interest. His experience as a professor and also at Microsoft can be clearly seen in his articles. Moreover, his articles reflect his personality. You can also follow him at his Youtube channel and three podcasts.

โฉฅ ๐Ÿ”— Scott Hanselman

๐Ÿ”น Specky Boy

The blog was found in 2007 by Paul Andrew with a notion to provide useful information related to various design resources and talk about latest web technologies. Now, the blog has developed into a great design magazine which can guide developers and designers with all kinds of useful resources, time-saving techniques and online tutorials.

โฉฅ ๐Ÿ”— Specky Boy

๐Ÿ”น SitePoint

SitePoint is very popular tutorial site for fields related to product creation, programming, development, SEO, web designing and entrepreneurship found in 1999. The site from also consists of numerous video tutorials which may require premium membership in the website.

โฉฅ ๐Ÿ”— SitePoint

๐Ÿ”น Six Revisions

Six revisions though has minimal look but focuses on publishing awesome contents since 2008. The blog is followed by developers and designers where you can find many blog posts related to WordPress, design, JavaScript, HTML, CSS and many more. The posts are added few times in a month. You can also enjoy different free tutorials and tools in this blog.

โฉฅ ๐Ÿ”— Six Revisions

๐Ÿ”น Blog /\ndy

The blog /\ndy founded by Andy Hunt offers knowledge about development topics especially agile development. His insights as the founder of Agile Alliance and an important player from the team of Agile Manifesto helps the blog to offer quality solutions related to the topics.

โฉฅ ๐Ÿ”— Blog /\ndy

๐Ÿ”น Federico Cargnelutti

Any developer will love Federicoโ€™s blog. The blogger himself is a professional web and mobile developer. He regularly posts about agile development, software architecture and coding (especially PHP). He includes tutorials and Twitter posts to share his insights on the respective fields.

โฉฅ ๐Ÿ”— Federico Cargnelutti

๐Ÿ”น Paul Grahamโ€™s Essays

Paul Grahamโ€™s Essays are excellent guide for developers who want to understand and develop businesses based on SaaS. The author is the man behind Viaweb (a SaaS based company founded in 1995) and co-founder to Y-combinator. The blog will provide you insight of your role as a developer in the world of business.

โฉฅ ๐Ÿ”— Paul Grahamโ€™s Essays

๐Ÿ”น DailyJS

The blog was made to provide daily updates on everything about JavaScript. Alex Young, the author of the blog creates content consisting of worked examples and hands-on tips about JavaScript.

โฉฅ ๐Ÿ”— DailyJS

๐Ÿ”น ProgrammableWeb

The blog ProgrammableWeb is popular for its huge directory of research papers and APIโ€™s (for mobile and web development). The blog was launched in 2005 and works for the development of API economy. ProgrammableWeb has a high publication rate with even 10 posts in a day and still maintains their contentโ€™s quality.

โฉฅ ๐Ÿ”— ProgrammableWeb

๐Ÿ”น Ajaxian

Ajaxian blog comes in the must read list for many developers because of the diversity of topics it contains (ranging from XML to .Net development). The blog produces engaging content on different components of development especially AJAX and JavaScript. The team consists of 12 members (core developers) who have gathered experience from working with big guns like Google.

โฉฅ ๐Ÿ”— Ajaxian

๐Ÿ”น Pontikis

You will find many guides and how to articles in Pontikis. Christos Pontikis, the author of the blog provides detailed content about different languages, frameworks alongside his insights on MySQL, jQuery and PHP. so, if you a knowledge driven developer, this blog site is for you.

โฉฅ ๐Ÿ”— Pontikis

๐Ÿ”น David Walsh

The blog by David Walsh focuses on front end technologies and talks about languages like CSS, JS and HTML/5. You will find many engaging and honest posts which supports trial and error development and open source contribution. FYI, David Walsh is a part of core developing team of MooTools JavaScript Framework and is a seasoned web developer in Mozilla.

โฉฅ ๐Ÿ”— David Walsh

๐Ÿ”น WebAppers

WebAppers is another blog which supports collecting and sourcing open source resources and tools. Besides offering guides and helpful advice to web designers and developers, the blog also provides nearly 700 plugins to facilitate their needs.

โฉฅ ๐Ÿ”— WebAppers

๐Ÿ”น Codrops

You may not find new posts periodically on Codrops but it shines with its USP of innovative, inspiring and most useful content. Codrops offers awesome content, freebies, blueprints and tutorials based on latest techniques and trends in web development and designing.

โฉฅ ๐Ÿ”— Codrops

๐Ÿ”น Tuts+ Tutorials

Tuts+ is a place where you can find in-depth tutorials about web design, coding, and illustration. Moreover, you can follow these tutorials at your comfort and various topics about CSS, UX and HTML, design tools and resources available in the blog will help you increase your skills in web designing. The blog is maintained by Envato.

โฉฅ ๐Ÿ”— Tuts+ Tutorials

๐Ÿ”น Eric Sink

You can find roundups, useful advice and views by Eric Sink in his blog. Eric Sink has worked at SourceGear and also been a part of the development team of Internet Explorer. He talks about everything related to software development.

โฉฅ ๐Ÿ”— Eric Sink

๐Ÿ”น Ytechie

Jason Young, the author of Ytechie, adds humour to each of his articles. You can understand his writing style by going through his author bio. His blogs are full of useful knowledge and friendly discussions supporting technologies like Node.js and Windows Azure.

โฉฅ ๐Ÿ”— Ytechie

๐Ÿ”น The Daily WTF

The Daily WTF Enjoy your breaks by reading these amazing articles by The Daily WTF. Itโ€™s not so monotonous tone offers you humorous contents with deep insight about programming and development. My personal favorite sections from the blog are โ€˜disastrous development storiesโ€™ and โ€˜how not to guidesโ€™.

โฉฅ ๐Ÿ”— The Daily WTF

๐Ÿ”น Silk and Spinach

Silk and Spinach is a great blog for advice related to agile development. Kevin Rutherford (author) has a vast experience in agile development which he acquired by working as a Scrum Master and freelancer developer. He has a membership in Agile Alliance as well.

โฉฅ ๐Ÿ”— Silk and Spinach

๐Ÿ”น PragDave

Dave Thomas, a publisher and an experienced coder, believes in learning forever ideology. Thus, he propagates the idea through his blog by creating a different approach by adding philosophy of martial arts in coding. He has termed it as CodeKata. He provides latest updates, views, guides and tutorials about development through his blog and tweets.

โฉฅ ๐Ÿ”— PragDave

๐Ÿ”น Jonathan Kohl

Jonathan Kohl shares his expertise in developing mobile application and business opportunities surrounding the technology through his blog. His blog can be interesting for those developers who are also interested in business aspects of application development.

โฉฅ ๐Ÿ”— Jonathan Kohl

๐Ÿ”น Word Aligned

Thomas Guest with his blog Word Aligned offers coding tricks and hacks which are both helpful and humorous to read. I love reading his awesome post -โ€œJokey Code?โ€.

โฉฅ ๐Ÿ”— Word Aligned

๐Ÿ”น Succeeding with Agile

Another awesome blogpost for someone following agile development. The blogger, Mike Cohn with his 20 years of knowledge in handling Scrum projects, strongly supports agile projects. So, if you want to enhance your agile processing capabilities, you should read this blog.

โฉฅ ๐Ÿ”— Succeeding with Agile

๐Ÿ”น Hongkiat

Hongkiat has some great resources for designers. Hongkiat Lim launched this blog in 2007 because he wanted to do something more interesting than his monotonous job. Presently, Hongkiat serves more than 10 million visitors in a month and is one of the most popular blogs in the world. The blog often covers topics like various design tools, WordPress, CSS, HTML and Photoshop.

โฉฅ ๐Ÿ”— Hongkiat

๐Ÿ”น CSS Tricks

CSS-Tricks created by Chris Coyier concentrates on fancy CSS tricks. It provides forums, code snippets, videos and articles related to CSS. You can also have a look on a calendar for developers which information about generally known CSS properties and selectors.

โฉฅ ๐Ÿ”— CSS Tricks

๐Ÿ”น Designr Fix

Designr FixNow, when talking a site about fancy design or a site for design junkies, there is nothing better than Designr Fix. The blog takes art seriously as a source for inspiration in making awesome designs. It offers resources, deals, tutorials and freebies.

โฉฅ ๐Ÿ”— Designr Fix

๐Ÿ”น Smashing Magazine

Smashing Magazine is an outstanding blog dedicated to development and designing. You can find great posts about responsive design issues, Andriod, iOS, WordPress, JavaScript, HTML, CSS and other latest techniques. You can also buy e-books through smashing magazine.

โฉฅ ๐Ÿ”— Smashing Magazine

๐Ÿ”น Scott Berkun

Scott BerkunThe blog by Scott Berkun majorly focuses on insights related to his work experience in WordPress and Microsoft. The author also offers content related to philosophy, leadership and creativity. So, the blog can prove to be an interesting venue to you, if you are bored of monotonous contents in technical blogs. The blog can help you transform into a better programmer as well as a better person.

โฉฅ ๐Ÿ”— Scott Berkun

๐Ÿ”น HTML5 Doctor

HTML5 DoctorHTML5 Doctor has good collection of HTML5 resources which is being maintained by a group consisting of Ian Devlin, Oli Studholme, Remy Sharp, Bruce Lawson, Steve Faulkner and Rich Clark. The inspiration behind the launch of blog was the lack of resources related to HTML5. Interactive sessions are encouraged in HTML5 doctors where you can ask them to debug your code or a simple question.

โฉฅ ๐Ÿ”— HTML5 Doctor

๐Ÿ”น Smashing Hub

Smashing HubSmashing Hub shares content related to designing issues in WordPress. You go for its directory of design giveaways and freebies. The blog is a great help for developers and designers.

โฉฅ ๐Ÿ”— Smashing Hub

๐Ÿ”น Jon Skeet's coding blog

Last but not the least, Jon Skeet is known by the name โ€˜human compilerโ€™ in the world of programming. His blog is a miscellaneous baggage of content and books related to C#, Java, F#, Stack overflow, and other general topics of coding. His blog also provides reviews of different books.

โฉฅ ๐Ÿ”— Jon Skeet's coding blog