Free Resources
Your go-to source for the best FREE learning resources in web development. Whether you're a beginner or an experienced web developer looking to expand your skillset, our platform provides a vast array of free resources to help you grow. We will continue to update this list as we find more great learning resources.
If you would like to reccomend a free resource that you have found helpful please contact us.
Courses
The Odin Project is a free, open-source, full-stack web development curriculum that is designed to teach people how to build websites and web applications from scratch. It provides a comprehensive, project-based learning experience that covers everything from the basics of HTML, CSS, and JavaScript to more advanced topics like Ruby on Rails, Git, and API development. The curriculum is structured in a way that helps students build up their skills gradually and build real-world projects along the way. The Odin Project is ideal for anyone who wants to learn web development, from complete beginners to people who already have some experience but are looking to take their skills to the next level.
Free Code Camp is a non-profit organization that provides a comprehensive curriculum for learning full-stack web development for free. The curriculum covers a wide range of topics including HTML, CSS, JavaScript, React, Node.js, and more. In addition to the curriculum, Free Code Camp also provides a supportive community of learners and mentors who can help students along the way. The program is structured around a series of coding challenges and projects that help students build up their skills and put their knowledge into practice. As students progress through the curriculum, they also have the opportunity to work on real-world projects for non-profit organizations and add them to their portfolios. Whether you're a complete beginner or an experienced programmer looking to expand your skills, Free Code Camp is a great resource for learning full-stack web development.
MDN Web Docs (previously known as Mozilla Developer Network) is a comprehensive resource for web developers, offering in-depth guides and tutorials on a wide range of web development topics, including HTML, CSS, JavaScript, web APIs, and more. The site is maintained by the open-source community and Mozilla, with the goal of providing accurate and up-to-date information for developers to build great web experiences. MDN Web Docs also includes interactive examples and code snippets, as well as references for web standards and best practices. Whether you're just starting out with web development or are an experienced developer, MDN Web Docs is a valuable resource to have in your toolkit.
HTML Resources
Learn-html.org is a resource for individuals looking to learn HTML, the markup language used to structure and present content on the web. The site offers a comprehensive curriculum, starting with the basics of HTML and gradually building up to more advanced topics. The lessons are written in a clear and concise manner, making it easy for even beginner-level students to understand.
Free Code Camp's Responsive Design course is a comprehensive curriculum for learning how to design and develop websites that look great on any device, from desktop computers to smartphones. The course covers the basics of responsive design, including layout techniques and how to use media queries to adjust the appearance of a website based on the size of the screen.
CSS Resources
CSS Tricks is a comprehensive resource for learning and mastering Cascading Style Sheets (CSS), the stylesheet language used to style and layout web pages. The site offers a wealth of information on CSS, from tutorials and guides to articles and code snippets, making it a one-stop shop for all things CSS.
CSS3 Generator is a tool that allows web developers to quickly generate CSS3 code for various design elements and effects. With CSS3 Generator, developers can create complex styles with just a few clicks, without having to write the code themselves. The tool supports a wide range of CSS3 features, including animations, transformations, and shadows, and provides an easy-to-use interface for customizing the styles.
Free Code Camp's Responsive Design course is a comprehensive curriculum for learning how to design and develop websites that look great on any device, from desktop computers to smartphones. The course covers the basics of responsive design, including layout techniques and how to use media queries to adjust the appearance of a website based on the size of the screen.
Javascript
HTMLdom.dev is a resource for web developers that provides an interactive visual representation of the Document Object Model (DOM) and how it is created from HTML. It provides a user-friendly interface for experimenting with HTML, allowing developers to make changes to the code and see the impact on the DOM in real-time. Whether you're just starting out with web development or are looking to deepen your understanding of the DOM.
Free Code Camp's JavaScript course is a comprehensive curriculum designed to help individuals learn the basics of JavaScript, as well as more advanced concepts and techniques. The course is structured to provide a clear learning pathway, starting with the fundamentals of the language and gradually building up to more complex topics.
Javascript.info is a comprehensive resource for learning JavaScript, the programming language used for developing dynamic, interactive web pages. The site offers a well-structured curriculum, starting with the basics of the language and gradually building up to more advanced topics. The lessons are written in a clear and concise manner, making it easy for even beginner-level programmers to understand.
Art
Colorhunt.co is a platform that provides inspiration and resources for color selection in web design and other creative projects. The site features a curated collection of color palettes, created by both professional designers and the Colorhunt community. Each palette includes a range of colors that can be used together to create visually appealing designs.
Font Awesome is a popular icon library that provides scalable vector icons that can be customized (size, color, drop shadow, etc.) with CSS. Font Awesome icons can be used in a variety of web projects, including websites, applications, and presentations. The icons are designed to be easy to use and accessible, and they work seamlessly with modern web technologies such as HTML, CSS, and JavaScript.
UnDraw is a website that provides a collection of open-source, customizable illustrations for designers and developers. The illustrations are designed in a modern and minimalist style, and they can be easily edited and customized to match the look and feel of any project.
Pexels is a website that provides a library of high-quality, free stock photos for personal and commercial use. The site features a collection of images taken by professional photographers and contributed by a community of photographers and creatives. The images cover a wide range of subjects, including nature, cityscapes, people, and technology, and are organized into easy-to-browse categories for quick and easy access.
Tools
PenPot is a tool for creating and sharing code snippets, commonly known as 'code pens,' for web development projects. PenPot provides a platform for developers to experiment with HTML, CSS, and JavaScript and see the results of their code in real-time. Great free replacement for figma!
Huntr.co is a job search platform that helps job seekers find their next opportunity. It provides a platform for job seekers to search for job listings, connect with recruiters, and get discovered by companies.
The Responsive Checker by WebsitePlanet is an online tool that allows users to assess the responsiveness of websites. It helps users determine how a website appears and functions on various devices, including mobile phones, tablets, and desktops, facilitating efficient web design and development.