Explore resources and tools for staying abreast of technologies, trends and standards in the web development field. I rated the tools based on their usage in web development for building websites. I find each of these tools valuable to me in learning and creating websites.
freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations that intend to make learning web development accessible to everyone. Their curriculum includes responsive web design, JavaScript, front end quality assurance, information security, coding interview prep, and many others.
W3Schools is a freemium educational website to learn coding online. It includes tutorials, references, exercises, quizzes, templates, and a how-to section with code snippets. It has an online code editor to practice coding covering almost any coding language including HTML, CSS, JavaScript, PHP, C++, Kotlin, and more.
Hack Design has short lessons on many different topics in web design including typography, user experience, graphic design principles, interaction design, and product design. The lessons include video tutorials.
Udemy is an online learning and teaching marketplace that includes courses on numerous topics — web development, personal development, finance, game development, and more. The courses are a reasonable price and they have a lot of sales and free courses. Some courses are very in-depth and are similar to bootcamps.
LinkedIn Learning is an online video learning platform covering web development, business, finance, certifications, and continuing education credits. It is a premium monthly subscription connected to your LinkedIn account, and you can earn certificates to display on your profile.
At devChallenges you can practice building real-world projects. You choose a path, complete all the challenges in the path, and you earn a certificate. You can work alone or with a team.
On CodeMentor you can work on real-world projects to improve your skills and add to your portfolio. Discuss projects, review code, and learn from peers and mentors.
Frontend Mentor allows you to solve real-world HTML, CSS, and JavaScript challenges while working to professional designs. Developers build projects, review code, and help each other get better. After coding the project, you submit it and others give you feedback. Some challenges have a price, but there are free ones too.
Code in WP is a blog for anyone who wants to learn how to build a website on their own. Every week features new tutorials, lists, and comparison posts covering websites, hosting, software, and WordPress.
Smashing Magazine is an online magazine dedicated to web developers and designers worldwide. They include articles, books, workshops, and a variety of resources on web design and development. I have used them for years and find their articles very informative.
Visual Studio Code is a free and open-source IDE and code editor supporting HTML, CSS, JavaScript, PHP, Python, and many more. It uses syntax highlighting, intelligent code completion, snippets, debugging, and embedded Git. I have been using it for the past year and stopped using all other editors.
CodePen is an open-source online code editor and social development environment for front-end designers and developers. You can test HTML, CSS, and JavaScript snippets and see results live. It is also recommended for use with the freeCodeCamp curriculum.
Bootstrap is a free and open-source CSS framework for responsive, mobile-first web development. It contains HTML, CSS, and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It features drag-and-drop components, uses the Bootstrap framework, and can export clean, semantic HTML. It is not free, but accessible via the GitHub Education Pack.
Animator by Haiku is a free and open-source platform for creating cross-platform UI animations, powered by Airbnb's open-source Lottie engine. It allows you to export or embed animations and offers a suite of features designed to build interactive experiences.
Web Designer lets you create beautiful and compelling videos, images, and HTML5 ads. You can use animation and interactive elements to build your creative vision and scale content for different devices with responsive and dynamic workflows.
FileZilla is a free and open-source FTP client for uploading and downloading to and from your server or host. I have been using it for years to upload websites to my hosting server. It has an easy drag-and-drop interface.
GitHub is an open-source code hosting platform for version control using Git. It allows you to collaborate on projects, with access control, bug tracking, task management, continuous integration, and wikis. Used by millions of developers worldwide. I gave it 4 stars because I am still learning it — there is a small learning curve.
Code Pieces is a productivity platform that enables developers and designers to save, store, and share code snippets, links, raw text, screenshots, images, and design layers with a simple copy-and-paste or right-click. It can extract code from screenshots and works on VS Code, JetBrains, Chrome, and as a desktop app.
Raindrop is an all-in-one bookmark manager that lets you organize and tag your bookmarks. You can use the extension in all popular browsers, automatically save Twitter and YouTube favorites, and access your list from multiple devices.
The W3C Markup Validation Service is a free and open-source code validator for HTML, XHTML, SMIL, MathML, and more. Before I publish a website, I use the validator to check for errors.
The W3C CSS Validation Service is a free service to check the validity of your CSS files. You can enter the URL of the HTML document or the CSS only. I use it to check all of my CSS files.
WAVE is a suite of evaluation tools that help authors make web content more accessible to individuals with disabilities. It identifies accessibility and WCAG errors and facilitates human evaluation of web content. They also have a browser extension for evaluating local, dynamic, or password-protected pages.
Bootstrap is a free and open-source CSS framework for responsive, mobile-first front-end web development. It contains HTML, CSS, and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. It is free to download and easy to incorporate on your website.
Before this course, I was already finding resources on the various topics in web design and development. I have numerous resources I use on a daily basis for my projects. I enjoyed seeing what resources other students used in their projects. I learned about a few resources I did not know about.
As for tools, when I find a tool I like, I usually stick with it. It was nice learning about new tools, some of them I had never heard of. I did use some of them. I found some that I did like and I am going to continue to use.
In the future, when I see new resources or tools, I will attempt to use them if possible. I do like to research tools first before I use them. Some of the tools listed were older tools. I prefer to use popular, newer tools that still have support. This experience has taught me that I should be more open to trying new tools. They could be beneficial to my learning experience.