9 Practical tips for beginner web developers
Tags: beginners, webdev
Published: 2019-12-09 18:46:53

This is a list of 9 practical tips for beginner developers by a developer who was a beginner once as well.

This post is actually a repost of my [original one](https://nikitahl.com/practical-tips-for-beginner-web-developers/) I've made a while ago on my blog.

These days there is plenty of information around to start a career as a developer. In this article I just want to share tips from my own experience that I found useful when I was learning.

I hope that someone might find it useful and learn something new.

1. [Coding courses/school](#coding-coursesschool);
2. [Online coding courses/school](#online-coding-coursesschool);
3. [Resources/study materials](#resourcesstudy-materials);
4. [Code editors](#code-editors);
5. [Command line/Terminal](#command-lineterminal);
6. [Online tools/services](#online-toolsservices);
7. [Browser Dev Tools](browser-dev-tools);
8. [Local server](#local-server);
9. [Social Media](#social-media).


## Coding courses/school
In my opinion, this is the best way to start. I've enrolled at a local coding school after learning by myself for some time.

The main advantage over all other methods is that you get a real life experience and mentoring from the teachers.

You can ask a question any time during a seminar, engage in the discussion, learn from and share experience with other students.

The teachers will not only tell you basic stuff but will also give valuable tips and pieces of advice how to improve yourself, share their own experience, tell stories from real life.

Overall, if you have the possibility I strongly recommend you to start by taking a real-life course on development.

## Online coding courses/school
During my learning period, I've also been taking a few online courses. Actually, I do this to this date.

The cool part about it is that unlike the real-life coding courses/school, which most probably will have fixed study hours and location, you can attend it at any time and from anywhere your comfortable with.

Also, you can rewatch the video or go through an exercise over time.

Online courses tend to constantly update study material, so you'll always be up to date to new technologies and practices.

Most of these online courses have online communities where students share experience and ask questions.

## Resources/study materials
If you're not taking courses/school of any kind, there are plenty of ways to get information online. Today you can find literally tons of information on almost any topic.

From my own experience what I use and can recommend is:
* [MDN](https://developer.mozilla.org/) - all time favorite and ultimate resource I refer up to this day (they have tutotials for beginners);
* [Can I use](https://caniuse.com/) - mostly for checking browser compatibility;
* [StackOverflow](https://stackoverflow.com/) - ask/search question for custom cases, but be aware that some answers may not be suitable or quite accurate for your case.

Resources I don't use on a daily basis, but is worth mentioning:
* [htmlreference.io](https://htmlreference.io/) - a list of all the HTML tags and attributes;
* [cssreference.io](https://cssreference.io/) - a list of all the CSS properties;
* [ECMAScript 6 Features](http://es6-features.org) - ES6 features and examples;
* [youmightnotneedjquery](http://youmightnotneedjquery.com/) - consider using Vanilla JS over jQuery when possible.

And lastly the Youtube. For a quick explanation or a tutorial, Youtube is the perfect spot. Lots of interesting and useful videos out there.

## Code editors
You'll be writing a lot of code, so a proper code editor is a must. The code editor can make a big difference when you're writing a code. It will ease your life as a developer by helping easily navigate and edit code.

I've tried quite a few, each one of them has its own pros and cons. But I'm not going to make a comparison now, as this article isn't about that. I'm just going to list my favorite ones (all of them are FREE).

* [Atom](https://atom.io/);
* [Sublime text](https://www.sublimetext.com/);
* [Visual Studio Code](https://code.visualstudio.com/);
* [Brackets](http://brackets.io/).

There are plenty of articles comparing code editors, and I encourage you to read them, but I suggest try them out as many as you can, and in time you'll find your favorite.

## Command line/Terminal
Along with the web development technologies the command line experience is a must for a modern developer.

A lot of work will be dependant on the command line (e.g. [git](https://git-scm.com/)), as well as some technologies require you to have a command line knowledge.

If you're not familiar with the command line just yet, don't be intimidated, it's not that hard. Take your time and just practice, read tutorials and watch a few video explanations, its plenty out there.

There will be roughly only up to 10 commands that you'll have to memorize. For everything else there's Google. ;)

## Online tools/services
Services like [Github](https://github.com) and [Codepen](https://codepen.io) does not only help you on your journey of becoming a web developer but also can serve as your own business card or a portfolio if you wish.

With the help of such services you can:
* share your own code and projects with people;
* see other people's code and projects (and learn from them);
* collaborate with other developers;
* engage in discussions;
* get your code reviewed;
* get inspired;
* inspire others;
* improve your creativity;
* contribute to the **Open Source** community.

Getting a *Github* account is a good start, you can:
* understand what is [version control](https://en.wikipedia.org/wiki/Version_control);
* learn more about the command line;
* get familiar with one of the most popular service for developers.

## Browser Dev Tools
Being a web developer is not only about writing code or working with the command line. But also debugging! That said you should be proficient with browser's Dev Tool or Developer Tools.

You can start by opening a Dev Tools in your browser and just begin clicking and exploring.

With Dev Tools you can:
* Inspect and edit DOM elements;
* Inspect and edit element styles;
* View messages and run JavaScript from the Console;
* Debug JavaScript;
* View and debug network activity.

And that's just some of the thing you can do there's much more.

Each browser's Dev Tools has its own traits, but for the most part, they're all the same.
My favorite browser to work with is Chrome. They have an awesome Dev Tools *imho* which they constantly update and maintain, as well as they have a complete documentation on [Dev Tools](https://developers.google.com/web/tools/chrome-devtools/).

## Local server
It's a common practice to test your code locally right in the browser. But I strongly advise you to install a local server for testing purposes.

You'll get an experience of how your code actually works in an environment close to real one.
You'll need a local server:
* for testing purposes;
* to make AJAX calls;
* if you're planning to learn any of the server-side languages.

A couple of the most popular local servers:
* [MAMP](https://www.mamp.info/en/) (Mac and Widows);
* [XAMPP](https://www.apachefriends.org/) (Mac, Windows, Linux).

## Social Media
Being a developer also means that you constantly have to learn and improve yourself. That is why the final tip is - get a Twitter account and follow developers, software companies/blogs/groups/communities. It's an easy way to always be up to date with current technologies and trends.

Never stop learning.