Module 4 - Learning Resources and Tools

Resources

Here is a list of resources related to web development I have come across that I have found to be helpful and will be using in the future. I have separated the resources into five categories: Web Documentation, Web News, Developer Communities, Web Developer Content Sites, and JavaScript and React. I have rated them based on how useful they are to me. The rating system is from 7 to 1 with 7 being the best and 1 being not very good.

Web Documentation

MDN Web Docs

Rating - 7

The MDN web docs is a collection of documentation for Web platform technologies. The different technologies it provides documentation for is HTML, CSS, JavaScript and Web APIs. They also have a lot learning resources for students and beginning developers. It is a go to for a lot of developers because it is open-source collaborative project that provides independent and unbiased information on all of these different topics.

Web.dev

Rating - 6

The Web.dev page is written by members of the Chrome team and other experts to contribute topics to the Web.dev site. The site is a great resource that covers topics on a wide variety of topics related to web development. It provides a lot of news and content from its blog and news articles sections. They have a lot of documentation, training, and courses in HTML, CSS, and JavaScript.

Web News

CSS Tricks

Rating - 7

CSS Tricks is dedicated to all things CSS. It has a ton of information about CSS including news articles, guides on how to use CSS features, and provides an in-depth almanac for all the properties and selectors in CSS. The articles and guides are detailed, but easy to understand. They also have great visual examples to help demonstrate to the topic.

Smashing Magazine

Rating - 7

This website provides a lot of useful articles related to front-end web development. Its articles have a mixture of CSS, JavaScript, UX, accessibility, general design, guides, figma, and much more. The articles provide a lot of current content at a consistent and frequent pace. It is easy to find engaging and informative articles related to the web development field.

Developer Communities

Dev Community

Rating - 5

Dev Community is a community-driven open-source resource website for all types of developers. While not web developer specific it does have a lot of content useful for web developers. It allows developers to make posts, share content, and receive help from other developers. Content can range from user-created guides on how to implement features from a coding language. They could also be posting a new idea or concept about how to approach a problem. Users can comment on posts and offer feedback.

Stack Overflow

Rating - 5

Stackoverlow is another community for developers. Again this one is not specifically for web developers but it allows for developers to ask questions to get help from other developers. It is a nice place to get help on a problem you are stuck with. You can either pose a question to the community or look through previous posts asking similar questions as yours to find a solution. While it might not always have a direct answer it can help provide some other ideas to figure out a problem.

Web Developer Content Sites

SDR - Super Dev Resources

Rating - 5

Super Dev Resource publishes articles and resources for designers and developers. The resources it provides are articles that show lots of free resources for designers and developers. The free resources can range from things like fonts, vector-based graphics, backgrounds, and color palettes. It's not all free resources for designers though it also has articles related to development, marketing, and tech. The sections cover a wide range of topics, but not necessarily always centered on web development, but still informative articles for developers.

Web Designer Depot

Rating - 4

Web Design Depot is a resource centered around web design, development, and UX. It provides a lot of creative inspiration by showcasing websites with trendy designs. The website also showcases lots of new tools, fonts, and design trends related to web design and development. There is a freebie section where you can pick up free assets like icons, fonts, patterns, and mock-ups.

30 Seconds of Code

Rating - 6

This resource is a blog where the author posts short code snippets about a topic and describes how it works. The articles are usually on the shorter side but it does show code snippets and provides good descriptions of what the snippet is trying to accomplish. It will even link to MDN docs for certain subjects for more elaboration. It is a great way to learn new techniques and get another perspective on some topics.

The A11y Project

Rating - 7

This website is a community-driven project dedicated to accessibility on the web. It has lots of articles about general information, misconceptions, quick tips, and how-to guides about accessibility. It even has articles about people with disabilities and their experiences using the web. It has a nice checklist that uses the Web Content Accessibility Guidelines (WCAG) standards that should be considered when developing a website.

JavaScript and React

The Modern Javascript Tutorial

Rating - 7

This tutorial is open-source and has been around since 2007. It has many contributors keeping it updated to current standards. It covers basic topics to advanced topics with simple but detailed explanations. It is neatly broken down into sections progressing from basic to advanced. If you can't find a topic you can use the search feature. The explanations on topics are not only simply detailed but also provide code snippet examples. It is a comprehensive guide about JavaScript and how to use it in web development.

Create React App Tutorial

Rating - 7

This is a tutorial about creating a React app. It walks you through the beginning part of creating the React app by using a command line to install the project. It then progresses through the development, testing, and deployment process. Each section has well-written sections for each step and even provides code snippets for demonstrations. This tutorial is an excellent starting point and is great to reference even after you understand some of the basics.

Tools

Here is a list of tools to help in web development that I have come across that I have found to be helpful and will be using in the future. The tools have been broken down into two sections Development Tools and Design Tools. I have rated them based on how useful they are to me. The rating system is from 7 to 1 with 7 being the best and 1 being not very good.

Development Tools

PageSpeed Insights

Rating - 7

Page Speed Insights is a tool from Google that analyzes the mobile and desktop versions of a website. After it analyzes it provides feedback to what a user might experience visiting the analyzed site. It will show grades for four different categories: performance, accessibility, best practices, and SEO. Each category has a lot of metrics that are used for the grade and it shows where you can make improvements on a page. The improvements might help make the page load faster or help improve your SEO. Overall it is a great tool to use to ensure you are including basic concepts into a website.

Checkbot

Rating - 7

The Checkbot tool is a Chrome extension that can help analyze web pages similarly to the Page Speed tool. It will analyze the SEO, speed, and security of a website. This does do a little more in-depth analysis and includes a security check to make sure your site is secure by using things like HTTPS. It allows you to view everything it scanned and gives an explanation about what is missing or could be improved. It is easy to use and has free and paid versions available.

Can I Use _____ ?

Rating - 7

The Can I use? tool is a compatibility checker for features available in many different web browsers. Since web developers need to produce websites to be compatible with as many browsers as possible this tool allows them to check their code for compatibility. This is important because if something is not compatible they need to find workarounds or change the code. This tool works by entering a code element and it will show which browser it works on. It is free and easy to use.

Design Tools

Wireframe.cc

Rating - 7

Wireframe.cc is a tool specifically for making wireframes for websites. It allows you to create nice looking wireframes quickly. Making a wireframe is as simple as clicking to drag and draw in an area to add an element. They have prebuilt elements that can be added to your defined area. Part of what makes this easy to use is there are not a lot of bloated features, for example, its color palette is limited so you don't have to spend time picking colors for a wireframe. It allows for creating a wireframe for desktop, mobile, or custom-size screens. Overall it makes designing detailed wireframes easy.

Favicon.io

Rating - 7

Favicon.io Favicon is an easy-to-use tool that creates favicons for websites. It provides three ways to make them: uploading a PNG image file, using text, or using an emoji. Uploading a PNG file is as easy as dragging and dropping it to the website and it will generate various sizes and put them in a zip file to download. It provides instructions on how to install them and some code to add to the HTML. It is a quick process making it easier than resizing an image in Photoshop a bunch of times.

Alwane - Extract CSS Colors

Rating - 6

This is another simple tool that can help with designing a website. Alwane.io allows you to extract the color codes from websites by entering a website link or inputting the CSS Code. It will pull all the various colors used from the submitted site and organize them into color swatches displaying their hex codes. It can be a nice way to keep track of colors or to find an errant color in your code.

Caesium Image Compressor

Rating - 6

The Caesium Image Compressor is a tool that helps to compress JPG, PNG, and WebP images. It has a desktop version and a browser version available to use for free. Caesium allows up to 5 images at a time with a 20 MB limit for each file. It is a quick way to compress an image to make the file size smaller. Being able to shrink a file size to use on a website can help reduce load times.

Picular

Rating - 5

This is another color tool, but this one generates colors based on keywords that you enter into a search field. After a keyword has been searched it will generate color swatches based on the keyword and provide the hex code and the picture the color was pulled from. This is a good place to start searching for colors and get inspiration for a project. It is easy to use and can help find colors for a project and speed up the design process.