MUST USE Websites & Tools for Web Developers
Summary
TLDRThis 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
🛠️ 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.
🎨 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.
📚 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.
Mindmap
Keywords
💡JavaScript Mastery
💡Hosting and Deployment
💡Royalty-Free Images
💡Stock Video Footage
💡Illustrations
💡Icons and Fonts
💡Freelancing
💡Mock-up Tools
💡Learning Resources
💡Project Design Ideas
💡Problem Solving Skills
💡General Tools
💡Stack Overflow
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
5.0 / 5 (0 votes)