Websites & tools you should know for your first Front-End Web project
Table of Contents
I’m not a front-end developer. Most of my tasks are Java or SQL based, but sometimes I need to prepare simple website to test all the functionality — and let’s face it, they are ugly. Fortunately I’m trying to catch up with it lately, so I’ve prepared a short list of websites and tools that I’ve found the most useful.
Basics #
Sublime Text, Visual Studio Code — Before creating any website first we need to decide which IDE to use. Of course, if you want to be true hardcore developer, you can use old-fashioned notepad, but there are other ways to make life harder. I’ve picked above two ones, chiefly because they are free and their instant code suggestion works really great. Also both of them are really lightweight. I’ve also used Eclipse IDE for front end, but it doesn’t contain many nice feature like these two.
W3 Schools — This page contains tutorials and sample codes for almost every aspect of web development (HTML, CSS, JavaScript, etc.). And a good thing it’s presented in a very clear way. Probably each front-end developer knew this page.
MDN web docs — Content of this page mostly overlaps the content from previous website. The main difference that it is presented in more descriptive way, which in some cases might be more helpful than short answers from W3 Schools.
YouTube Tutorial — Sometimes it’s better to hear and see live coding rather than read kilometers of text. YouTube is full of tutorials, and you probably find something for you. I’ve provided a link to the playlist that covers most of topics, like HTML, CSS, JavaScript or even deployment over Github that are great for a start.
JSFidle — This one is an online sandbox, where you can write your HTML, CSS and JavaScript code and test it online. Moreover you can share it with other people to cooperate or discuss.
CSS #
CSS Tricks — Another tutorial/guide website, but this time mainly focused on CSS. Cool thing about this page is that it contains the Almanac of all CSS Selectors and Properties, which can be used when defining own style in CSS file. More over it contains a bunch of great guides and code snippets.
Bootstrap 4— I would say that’s the most popular CSS (and JS) library currently. Chiefly because it’s very easy to use and with a little steps your website can look like a pro. Yet, I think the biggest advantage of this library is its grid layout system that allows to make responsive pages really quick. When you decide to use this library make sure which version do you choose, because there were some major changes between Bootstrap 3 and Bootstrap 4 in the syntax.
Flexbox —Aside from Bootstraps’ grid layout there is another responsive layout system that grow in popularity — Flexbox. It allows to resize items depending only on the main container dimensions, which in turn will depend on the screen size. In Bootstrap we usually provide fixed size of the inner images. At first Flexbox might be a little bit to powerful, but luckily there is a great game to learn it — Flexbox Froggy.
JavaScript #
jQuery — This one is a JavaScript library that main goal is to reduce a volume of a JavaScript code. It wraps most of JavaScript functionality in shorter way, so it reduce its amount.
User Interface #
Paletton — For me, one of the most challenging tasks in web design is to create a basic color palette for the entire web site. The idea is to create a page that not only covers all expected features but also it will be eye-pleasing. And this can be achieved with selection of appropriate color set. With Paletton this task is really simple, because we can choose only one color that fits us and other complementary colors (up to 3) will be proposed by the page.
Color Calculator— Very similar website to the previous one, sometimes I used it instead of Paletton, due to more simple UI.
Font Awesome- This one is very popular set of vector general purpose icons. Moreover it contains lots of brand icons that can be used for free and be used without any paid license.
Google Fonts — Sometimes when you want to create memorable website it’s good to use non-default fonts, which can be provided by Google Fonts. And the best thing — it’s free of charge.
uiGradients — When I think about color gradients I usually have in mind those from MS Office 98, which was ugly enough to never use them. Fortunately it has changed and we have this website with a list that contains some nice looking color gradients ready to be used in our websites.
I’m aware that this post doesn’t list all the best websites that are available on the internet. It’s rather my personal list that I used the most frequently. If you have any other worth mentioned, please let me know. Thanks!