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.

Outlines

00:00

🛠️ Essential Tools for Web Development

This paragraph introduces a collection of useful tools and websites for web developers, curated from years of experience. It emphasizes the free and non-ad nature of these resources. The speaker shares hosting services like Netlify for frontend and Heroku for backend APIs, highlighting their ease of use and cost-effectiveness. Also covered are royalty-free image and video sources such as Unsplash, Pixels, Coverr, and Draw.com, which provide high-quality media for web projects without the need for payment.

05:00

🎨 Design Resources and Learning Platforms

The second paragraph focuses on enhancing web development skills through design resources and learning platforms. It recommends Google Fonts and Flaticon for fonts and icons, and Font Awesome for a wide array of icons. Animated icons are also suggested for adding flair to websites. For learning and knowledge retention, Free Code Camp and The Odin Project are highlighted for their comprehensive curriculums, while mem.dev is introduced as a tool for practicing and retaining coding knowledge. Additionally, mock-up tools like Figma and Zeppelin are mentioned for designing and collaborating on web application interfaces.

10:00

📚 Freelancing Opportunities and Design Inspiration

This paragraph discusses opportunities for web developers to earn income through freelancing platforms such as Upwork, Freelancer, and Fiverr, which cater to different project sizes and durations. It also suggests websites like Awwwards.com and Dribbble.com for designers and developers to draw inspiration from award-winning and creative web designs. Furthermore, it touches on platforms like LeetCode, Codewars, and Exercism for improving coding skills and logical thinking through various exercises and challenges.

🛑 General Web Development Utilities

The final paragraph covers general utilities that are frequently used in web development. It introduces email.js for sending emails directly from JavaScript without server-side code, caniuse.com for checking browser compatibility of CSS and HTML features, and imagecompressor.com for optimizing image sizes to improve website load times. CSS-Tricks is highlighted as a valuable resource for CSS techniques and properties, while Stack Overflow is acknowledged as an indispensable community for developers seeking solutions to coding problems.

Keywords

💡JavaScript Mastery

JavaScript Mastery refers to the advanced knowledge and skills in programming with JavaScript, a popular language for web development. In the video's context, it represents the goal of the tutorial series, aiming to provide tools and resources that can help developers improve their JavaScript skills and create better web applications.

💡Hosting and Deployment

Hosting and Deployment are processes that involve making a website accessible on the internet. In the video, the speaker mentions using Netlify for frontend applications and Heroku for backend APIs, indicating the importance of these services in making web projects live and accessible to others.

💡Royalty-Free Images

Royalty-Free Images are stock photos or videos that can be used without paying royalties for each use. The video emphasizes websites like Unsplash and Pixels for finding such images, which are vital for creating visually appealing websites without infringing on copyrights.

💡Stock Video Footage

Stock Video Footage refers to pre-recorded video clips that can be incorporated into various projects without the need for original production. The video mentions Coverr as a source for high-quality, free-to-use video footage, which can enhance the media content of a website.

💡Illustrations

Illustrations are visual representations used to decorate or explain content on a website. The speaker mentions Draw.com as a resource for professional-looking illustrations that can be utilized to improve the aesthetic appeal of web applications.

💡Icons and Fonts

Icons and Fonts are essential elements of web design that contribute to the visual language and readability of a website. Google Fonts and Flaticon.com are highlighted as resources for finding free fonts and icons, respectively, which are crucial for creating a cohesive and attractive design.

💡Freelancing

Freelancing is a form of self-employment where individuals offer their services to clients on a project-by-project basis. The video mentions platforms like Upwork, Freelancer, and Fiverr, which are popular for web developers to find freelance work and monetize their skills.

💡Mock-up Tools

Mock-up Tools are software applications used to create visual representations of a product's design before it is fully developed. Figma and Zeppelin are mentioned in the video as tools that help in sketching and organizing designs, which are essential for planning the look and feel of web applications.

💡Learning Resources

Learning Resources are platforms or materials that facilitate the acquisition of knowledge or skills. Free Code Camp and The Odin Project are highlighted as valuable resources for web development education, offering structured curricula for beginners to advanced learners.

💡Project Design Ideas

Project Design Ideas refer to the creative concepts and visual inspirations that guide the design process of a project. Awards.com and Dribbble.com are presented as sources for finding award-winning and inspiring website designs, which can spark one's imagination and improve the design quality of web projects.

💡Problem Solving Skills

Problem Solving Skills are the abilities to analyze issues and find solutions effectively. The video mentions websites like LeetCode, Exercism, and Codewars as platforms for enhancing these skills through coding exercises and challenges, which are beneficial for both personal development and technical interview preparation.

💡General Tools

General Tools are utilities that developers use frequently for various tasks in web development. Email.js, caniuse.com, Image Compressor, and CSS-Tricks are cited in the video as examples of such tools, which help with functionalities like sending emails, checking browser compatibility, compressing images, and learning CSS techniques.

💡Stack Overflow

Stack Overflow is a popular question-and-answer community for programmers where users can find solutions to coding problems. In the video, it is mentioned as a go-to resource for developers when they are stuck, highlighting its importance in the problem-solving process.

Highlights

Introduction to incredibly useful tools and websites for JavaScript development.

All tools listed are free to use and not advertisements.

Hosting and deployment with Netlify for frontend applications and Heroku for backend APIs.

Netlify's advantage is its simplicity with one-click deployment.

Heroku is a completely free software for deploying backend APIs.

Royalty-free images and videos from Unsplash, Pixels, and Coverr for high-quality media on websites.

On Draw.com, find professional illustrations for commercial use.

Google Fonts for a wide selection of free fonts and easy integration into websites.

Flaticon and Font Awesome for a vast collection of icons and animated icons.

Free Code Camp and The Odin Project for comprehensive web development curriculum.

Mem.dev for practicing and retaining web development knowledge.

Figma and Zeppelin for creating and collaborating on application mock-ups.

Freelancing opportunities on Upwork, Freelancer, and Fiverr for various project sizes.

Awwwards.com and Dribbble.com for design inspiration from top websites and creative designs.

LeetCode, Exercism, and Codewars for improving logical thinking and problem-solving skills.

Email.js for sending emails directly from JavaScript without server-side code.

Can I use... for checking browser compatibility of CSS and HTML features.

Image Compressor for optimizing images to improve website load speed.

CSS-Tricks for in-depth guides on CSS properties and techniques.

Stack Overflow as a go-to resource for solving coding problems.

Transcripts

and welcome to another javascript

mastery video

today we are going to go over incredibly

useful tools

and websites that i have gathered over

years being in the development field

i'm going to give you access to all of

them right now in this short video

because i wished somebody gave them to

me while i was just starting

i just wanted to say that none of the

tools listed on here are ads

and absolutely all of them are

completely free to use

we are going to cover websites in

categories such as hosting

and deployment mock-up tools project

design ideas

exercises and algorithms freelancing and

much

more with that said let's dive right in

first on the list we have hosting and

deployment

you created a website it works well on

your computer but to show it to your

friends or potential employers

you need to deploy it for that we use

hosting services

over the years i've exchanged a lot of

different hosting tools

but the only two i'm using right now are

netlify

and heroku netlify for frontend

applications

and heroku for backend apis netlify's

biggest advantage is simplicity

you can deploy a page with a single

click within seconds

and so far heroku has been only

completely free software

i found for deploying backend apis so

i'm definitely

sticking with it moving on to

royalty-free images

and video every good landing page needs

quality stock images and video

modern internet is no longer text based

it's all about the media

best websites for finding images are

unsplash

and pixels let's see how they look

if you go to unsplash.com in here you

can search for any topic

let's say that you're making a beer

brewery so in there you can just type

beer

and you should get a lot of nice stock

pictures of

beer now let's check pixels let's say

that we're building a coffee shop

website

in here we have coffee shop you type it

out and let's see what kind of pictures

do we get

as you can see this immediately looks

great and you can use these photos

absolutely for free on your websites

moving on i'd like to show you cover

that co

it has amazing stock free video footage

as you can see in here we have a nice

drone video

but if you just scroll down we can get

anything let's search

ariel as you can see

videos on here definitely look great we

have

empty streets in mexico city we have

beaches

everything that you can use absolutely

for free and the last website in this

section is going to be on draw.com

if you visit this website you're going

to see maybe familiar illustrations

these illustrations are used on

commercial level applications and so far

i've seen them on many huge websites as

you can see these look good

and they look professional anything you

want you can find it here

no matter what type of the application

you're building

moving on to the next section we're

going to talk about icons and fonts

every website needs a good looking font

and some icons

for fonts there's only one site that i

couldn't recommend enough

and that's google fonts take a look at

this

in here you can find absolutely any free

font you're looking for

and also connecting it to your website

is incredibly simple

as you can see we have a lot of fonts

here let's take monster ad

if you click it the only thing you have

to do is select the style

for example we're going to do light 300

and immediately

you click on embed and there you have it

you just copy this link in your html

and then copy this in your css and

you're good to go the font is applied

for icons there is flaticon.com and font

awesome

let's check them out as you can see in

flat icon you can find

absolutely any icon you're looking for

for example let's try with social media

you have to include social media icons

on a lot of websites

as you can see we get facebook instagram

youtube twitter but if you search for

one of these

individually you're going to get many

more styles for the same social media

network

then we have font awesome font awesome

has been the go-to place for icons for

web developers for

years now they have almost any icon you

can think of

take a look

and the last website on our list are

animated icons i've recently started

using them and they add just a bit more

flavor to your website

as you can see we have add button here

why just have it as a single plus if you

can have it moving

as you can see adding the cloud adding

the folders all of them actually move

and are animated and you can easily add

them to your website

that's great moving on to learning

for generally improving your web

development knowledge or learning new

things

check out the following websites first

on the list is free code camp

i'm sure you've heard of it they created

a phenomenal curriculum that allows you

to start with no knowledge at all

if you're just starting with web

development then this is the place to go

as you can see you can choose whether

you want to work with html

javascript front-end libraries data

visualization

and much more second one on our list of

learning tools is the odin project

they are offering a completely free full

stack curriculum

that is supported by passionate open

source community

if you click on that you can see that

they have full stack ruby on rails

full stack javascript and front-end only

you can immediately start learning

on the odin project third tool on our

list is called mem.dev

previous two tools were used for

learning or acquiring the knowledge

memdab actually helps you keep it we are

all humans we all forget

so mem that allows you to practice on

the things that you already learned

to make sure that you never forget them

you can add snippets of code

specify what you want to remember and

then you can keep

practicing it the more you practice

the more fluent web developer you're

going to become and therefore

you're more likely to ace that job

interview or even get a raise

the next category on our list are

mock-up tools

having a proper idea of how the

application is going to look and feel is

crucial to actually building it

if you need to sketch simple components

for a website

or create mock-up tools of entire

application

figma has you covered as you can see you

can build

absolutely anything you can build whole

workflows for applications

using their mockup tools another great

tool and an alternative to figma

is called zeppelin as you can see one of

the best features of zeppelin

is that it is a better way to share

organize and collaborate on designs

built with developers in mind so in here

both designers

and developers can work hand in hand

provide each other assets

and actually build great looking

well-designed websites you're now

confident in your website building

skills

and want to start making some money off

of it try

these three most popular freelancing

sites

first one on our list is upwork second

one is freelancer and third one

is fiverr upwork is great for

contracting work

meaning not just one-time simple

websites but rather

working for months on bigger projects

the same thing can be said for

freelancer

on freelancer you can also find some

bigger projects you can work on for

months on the other hand on fiverr

you're most likely going to build

short small one-time projects like

landing pages for coffee shops

companies portfolios for different

creators and stuff like that

another great tool to use let's talk

about project design ideas

you've got the functionality of the

application figured out but your design

looks like let's be honest we are

not designers we are developers

and our design skills are not that great

for that reason

i often spark my imagination by

exploring the best looking websites in

the world

at awards.com as you can see in here we

have the best looking and most awarded

websites in the whole world

you can click on the website in here you

get all the ratings that the website

received

and then you can click visit site to see

it in action

okay let's scroll a bit to see how this

website works

as you can see some phenomenal

animations are happening there

everything looks nice and tidy and

modern take a look how this cards nicely

slided in

and i can click on them to actually open

by looking at the best rated websites in

the world

you're definitely going to get some

imagination for building your own

another great site is called dribble.com

whatever kind of website you're building

you can find the designs for it there

we are now on dribble.com and let's say

that we want to search for a coffee shop

website design

i'm going to say coffee shop there and

now let's type web design

as you can see we have amazing looking

designs for example this one here

or even one of this ones

if you want to test your knowledge or

improve your logical thinking

and problem solving skills these

websites are for you

lead code exorcism and codewars

starting off with lead code they are the

best platform to enhance your skills

expand your knowledge and prepare you

for your technical interviews

they have a lot of sorting algorithms

and things of these sorts so they are

more aimed towards low-level languages

such as c

although if you just want to improve

your logical thinking they're going to

be good for web development as well

more web development friendly are code

wars

and exorcism exorcism has a lot of

exercises ranging from

easy to hard ones these exercises are

going to improve

not only your logical thinking but also

your knowledge of functions

array methods object methods and string

methods

and finally to finish this off these are

some general tools that i found myself

using

really often we have email js

can i use dot com image compressor dot

com

and csstricks.com email.js

allows you to send emails directly from

javascript without

any server code needed extremely useful

if you're building a portfolio

and want to have a contact form but

don't want to create a whole backend

only for that

then you can use email.js the second one

on our list is called can i use

can i use checks whether the syntax

you're using is supported on all devices

and browsers for example let's say that

you want to use flexbox

let's check if it's supported everywhere

as you can see

most of it is green that means that 99

of browsers support flexbox out of the

box

moving on we have image compressor.com

when you're deploying your website and

you want to increase the speed of the

load of the website

the thing that slows it down the most

are images

so before deployment take all of the

images that your website uses

drag and drop them here and they are

going to be compressed and then you can

use the compressed versions to increase

the low speed of your website

moving on we have css tricks amazing

websites for exploring

new and interesting ways to deal with

css you can find things such as how to

build this amazing card right here

but also you can search for literally

anything for example flexbox

and it's going to give you amazing

guides for all css properties

for example if we take a look at the

flexbox this is by far

the best resource to learn it in here

you have all the properties

what does it mean and how to use it and

finally i could not end this video

without mentioning stack or flow

we really don't need an explanation for

it and whenever you're stuck you can

just google something and you're most

likely going to find the solution on

stack overflow

fun fact many people never visited

official stackoverflow's landing page

such as this one

we always go straight to a solution once

we google a question

and that would be it if you found this

video useful

make sure to subscribe to javascript

master youtube channel for more quality

videos and

projects and for all of you sticking to

the end of this video

have an amazing day