MUST USE Websites & Tools for Web Developers

Summary

This JavaScript Mastery video introduces developers to a curated list of essential tools and websites for web development. The host shares his top picks for hosting services like Netlify and Heroku, royalty-free media from Unsplash and Pixels, and professional illustrations from Draw.com. The video also covers resources for fonts and icons, learning platforms like Free Code Camp and the Odin Project, and tools for mock-ups and freelancing. It concludes with design inspiration sites, coding challenges, and general web development utilities, all aimed at enhancing developers' skills and workflow.

Takeaways

• 🌐 The video introduces various tools and websites useful for JavaScript developers, all of which are free to use.
• 📚 For hosting and deployment, Netlify is recommended for frontend applications and Heroku for backend APIs.
• 🖼️ Unsplash and Pixels are go-to websites for royalty-free images, while Coverr offers free stock video footage.
• 🎨 On Draw.com, you can find professional illustrations that are used in commercial applications.
• 🔠 Google Fonts is a one-stop site for a wide variety of free fonts that are easy to integrate into websites.
• 📊 Flaticon and Font Awesome are highlighted as top resources for icons, including animated icons to enhance website design.
• 📈 FreeCodeCamp and The Odin Project offer comprehensive curriculums for web development learning.
• 🧠 Mem.dev is a tool to help developers practice and retain their coding knowledge.
• 🎨 Figma and Zeplin are presented as essential mock-up tools for designing and collaborating on application workflows.
• 💼 Upwork, Freelancer, and Fiverr are popular freelancing platforms for web developers to find contract work.
• 🏆 Awwwards.com and Dribbble.com can inspire web design ideas by showcasing award-winning and creative web designs.
• 🧐 LeetCode, Exercism, and Codewars are platforms for improving coding skills and problem-solving abilities.
• 💬 Email.js facilitates sending emails directly from JavaScript without server-side code.
• 🔍 Can I Use checks browser compatibility for CSS features like Flexbox.
• 🗜️ Image Compressor helps optimize images for faster website loading times.
• 📘 CSS-Tricks is a valuable resource for CSS techniques, properties, and guides.
• 🔍 Stack Overflow is the ultimate go-to for coding solutions and troubleshooting.

Q & A

What is the main purpose of the video?

The main purpose of the video is to introduce and explain various tools and websites that are useful for web development, which the presenter has found helpful over the years.

What are the two hosting services mentioned in the video for deploying websites?

The two hosting services mentioned are Netlify, used for frontend applications, and Heroku, used for backend APIs.

What makes Netlify stand out for deploying web pages?

Netlify's biggest advantage is its simplicity, allowing for a page to be deployed with a single click within seconds.

Why is Heroku the preferred choice for deploying backend APIs according to the video?

Heroku is the preferred choice because it has been the only completely free software the presenter found for deploying backend APIs.

What are some websites recommended in the video for finding royalty-free images and videos?

The video recommends Unsplash, Pixels for images, Coverr for stock free video footage, and Draw.com for illustrations.

How does Google Fonts make it easy to integrate fonts into a website?

Google Fonts allows users to select a font style, and then provides an embed link that can be copied into the HTML and CSS of a website to apply the font.

What are the recommended sources for icons in web development according to the video?

The video recommends Flaticon.com and Font Awesome for icons, and also mentions the use of animated icons to enhance a website's appearance.

What is the role of Mem.dev in web development learning?

Mem.dev helps web developers practice and retain the knowledge they have already learned by allowing them to add code snippets and specify what they want to remember.

Can you describe the purpose of Figma and Zeppelin in the context of web development?

Figma is used for sketching simple components or creating mockups of entire applications, while Zeppelin is an alternative tool that focuses on sharing, organizing, and collaborating on designs with developers in mind.

What are the three most popular freelancing sites mentioned in the video?

The three most popular freelancing sites mentioned are Upwork, Freelancer, and Fiverr.

What is the purpose of the website 'Awwwards.com' as described in the video?

Awwwards.com is a site where one can explore the best looking and most awarded websites in the world, which can spark imagination and provide design inspiration for developers.

What are the two websites recommended for improving logical thinking and problem-solving skills in web development?

The two websites recommended are LeetCode and Codewars, which offer exercises ranging from easy to hard to improve logical thinking and knowledge of various programming concepts.

What is the utility of 'Email.js' as mentioned in the video?

Email.js allows for sending emails directly from JavaScript without any server code needed, which is extremely useful for tasks like creating a contact form on a portfolio website.

What does 'Can I use' do and how is it beneficial for web developers?

'Can I use' checks whether the syntax a developer is using is supported across all devices and browsers, helping to ensure compatibility and avoid potential issues.

What is the role of 'Image Compressor' in web development as described in the video?

Image Compressor is a tool that helps increase the load speed of a website by compressing images, which are often the most significant factor slowing down a website.

What makes 'CSS-Tricks' a valuable resource for web developers?

CSS-Tricks is a valuable resource for exploring new and interesting ways to deal with CSS, offering guides and tutorials on CSS properties and techniques.

Why is 'Stack Overflow' mentioned in the video as a go-to resource for developers?

Stack Overflow is mentioned as a go-to resource because it is a platform where developers can find solutions to a wide range of programming problems by searching for them.