MUST USE Websites & Tools for Web Developers

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

Channel: JavaScript Mastery

Views: 150,809

Rating: 4.9880433 out of 5

Keywords: web development, web developer, webdev, webdev resources, web development resources, best resources to learn web development, best free resources to learn web development, learn web development, learn web dev, learn web development for beginners, how to learn web development, free web development resources

Id: 9CEW3Tmx2tg

Length: 12min 41sec (761 seconds)

Published: Sat Feb 13 2021