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. They include almost any coding language you can think of including HTML, CSS, JavaScript PHP, C++, Kotlin, and many more. It makes coding easy to learn and their interface is easy to use.
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. You can learn anything from a variety of topics including web development, personal development, finance, game development, owning a business, etc. The courses are a reasonable price and they have a lot of sales. They also have a lot of free courses. Some of their courses are very in-depth and are similar to bootcamps.
LinkedIn Learning is an online video learning platform that allows you to learn from a variety of topics including web development, starting a business, finance, certifictions in different fields, and it lets you earn continuing education credits. It is a premium service you have to pay for monthly and it is connected to your LinkedIn account. You earn certifictions and certificates for completion of courses and you can include them 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. After you complete a challenge, you have to submit it, then you will earn your certificate.
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 whilst working to professional designs. Developers building projects, reviewing code, and helping each other get better. They give you everything they need to code the projects. After you code the project, you submit it to their platform. Others review your code and give you feedback. Some of the challenges have a price, but they do have free ones.
Code in WP is a blog for anyone who wants to learn how to build a website all on their own. Every week, you can expect new tutorials, lists, and comparison posts. They also have tutorials and resources on websites, hosting, software, and WordPress. It is a valuable resource for learning how to build a website.
Smashing Magazine is an online magazine dedicated to web developers and web designers around the world. They include articles on a variety of topics in web design and development. They have articles, books, workshops, and a variety of resources to use. They are a valuable resources for anything dealing with the web. I have used them for the past couple of years and find their articles very informative. I use them as a resource for starting my web design business also.
Visual Studio Code is an free and open-source IDE and code editor that supports lots of programming languages including HTML, CSS, JavaScript, PHP, Python, and many more. It is easy to use and lets you start coding quickly. It uses syntax highlighting, intelligent code completion, snippets, code refactoring, debugging, and embedded Git. I have been using it for the past year and I stopped using all other editors.
CodePen is an open-source online code editor and learning environment that allows you to test and showcase user-created HTML, CSS, and JavaScript code snippets. It is also a social development environment for front-end designers and developers. You can copy the code snippets and make changes to the code. CodePen allows you to see the results while you write the code. You can also view others code for ideas or to learn how to code something specific. Also, it is recommended for use with the freeCodeCamp curriculum.
Bootstrap is a free and open-source CSS framework that allows you to create 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.
Bootstrap Studio is a powerful desktop app that is used for designing and prototyping websites. It comes with a large number of built-in components that lets you drag and drop the components to built responsive web pages. It uses the Bootstrap framework and you can edit the code or add custom code. You can also export the code and have clean semantic HTML. I found it easy to use and can quickly make a website once I decide on the components. Bootstrap Studio is not free to use, but you can use it for free using the GitHub Education Pack.
Animator by Haiku is a free and open-source platform for creating cross-platform UI animations. It is powered by Airbnb's open-source Lottie engine. It allows you to export or embed your animation any way you want 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 your content for different devices or audiences with responsive and dynamic workflows.
FileZilla is a free and open-source FTP used for uploading and downloading to and from your FTP site, server, or host. It lets you transfer files for folders, websites, and your computer. I have been using FileZilla for years to upload my websites to my hosting server. It has an easy drag and drop interface.
GitHub is an open-source code hosting platform that is used for version control using Git. It also allows you to collaborate and work with others on projects all over the world. Everyone can work on the same code without messing the code up. It also allows access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. It is used by millions of developers all over the world. The only reason I gave it 4 stars is because I am still learning how to use 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, design layers and more with a simple copy and paste or right-click. It enables you to extract code from screenshots. It can be used on multiple platforms like VS Code, JetBrains, Chrome, and they have a desktop app.
Raindrop is an all-in-one bookmark manager that lets you organize your bookmarks and tag them. You can use the extension in all popular browsers. It even lets you automatically save your Twitter and Youtube favs. You can access your list from multiple devices and enable access to your collection by others.
The W3C Markup Validation Service is a free and open-source code validator that allows you to check your code for validity and errors. It is used for HTML, XHTML, SMIL, MathML, etc. Before I publish a website, I use the validator to check for errors.
The W3C CSS Validation Service is a free service used to check the validity of your CSS files. You can enter the URL of the HTML document with CSS or the CSS only. I use it to check all of my CSS files.
WAVE Web Accessibility Evaluation Tool is a suite of evaluation tools used to help authors make their web content more accessible to individuals with disabilities. It identifies accessibility and WCAG errors, and facilitates human evaluation of web content. It is good to use for any website to make sure it is accessible to everyone. They also have a browser extension for evaluating local, dynamic, or password-protected pages and site-wide WAVE tools for easily evaluating numerous pages.
Bootstrap is a free and open-source CSS framework that allows you to create 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.