2019 Web Developer Practical Guide (Front-End)

2018 is almost over and this year we saw a lot of new trends in web development, but today we are going to talk about a full practical guide for web development in 2019.

So if someone is new to web development and want guidance on how to start web development, this blog will really help you. 
I'm doing web development for almost a year, did a bunch of front end and back end projects. At the beginning when I just started web dev, I faced a lot of problems. I faced those problems because of the lack of guidance. So in this blog, I tried to give a proper overview of what to learn at the first in web dev and also what will be the latest trends in web devs in 2019. 


1. Basic Software and Tools 

So for starting web dev first, we need some software and tools. They include code editor, web browser, design and mockup, and 3rd party terminals.

Here are some of the software and tools I will recommend to use if you want to start web dev.

• Code Editor -> VSCode, Atom, Sublime Text
• Web Browser -> Chrome, Firefox
• Design & Mock up -> Adobe XD, Photoshop, Figma
• 3rd Party Terminal -> Git bash, WSL

2. HTML5 and CSS3

The basic building block for web dev is HTML and CSS, so you've to know basic HTML and CSS for web dev. 

There's a bunch of tags in HTML but don't worry, you don't have to learn all the tags in HTML. You need to learn the essential ones, which you've to use for building websites.

On the other hand, CSS is used for styling your web page. So it is important to learn CSS as well. First, you need to learn the basic CSS (Positioning, Box models, Class, ID etc. ). Then you need to learn CSS Grid, CSS Flexbox and also CSS Variables. 

3. Make Your Website Responsive

So if you learned and practice basic HTML and CSS you can now build some static websites easily. But in this day of age, it is necessary to build a website which is responsive. Responsive means a website which will have no problem running in small, medium and large screen. 

So to do that we can set the viewport to our codes, we can add media queries in the CSS section, we can use % and 'rem' over 'px' in CSS.



4. Vanilla JavaScript

After all those HTML and CSS now we will be getting into more programming side. JavaScript is no doubt the most famous programming language in the world. At first, it used only to make your website dynamic but now it is used for a lot more than that.

Currently, many desktop and server programs use JS. Node.js is the best know for backend programming right now. Also, databases like, MongoDB and CouchDB also use JS as their programming language.

So you can imagine how important JavaScript is for web dev. But at the beginning, you need to just know the basic data types of JS, functions, loops, conditional operations, different operators etc.

Then you need to learn DOM Manipulations and Events. These things are really important in learning JavaScript.

In 2019 you also need to learn JSON, Fetch API and ES6+.

5. HTML5/CSS3 Framework

HTML/CSS frameworks are becoming less relevant now but I'll still suggest you learn at least one framework at the beginning. They will make your web dev life a bit easier, I can ensure that. So here are three frameworks which will come really handy for newbies-

• Bootstrap
• Materialize CSS
• Bulma

From these three I will suggest you learn Bootstrap first. It is a very famous HTML, CSS and JS framework for developing responsive and mobile-first websites. It is also free and open source. It also has a big community so you can get bootstrap related help easily.

6. JavaScript Frameworks

It is becoming a necessity to learn at least one JS framework for every front-end web developers. Here I'm giving a list of three frameworks of JS, they are-

• React
• Angular
• Vue JS

From this three I'll suggest you learn at least one framework at first. JS frameworks are really popular in industries. Frameworks are more interactive and user-friendly. 



7. Git and Tooling

Git is absolutely necessary for all web developers. Git is used for version control.
The famous command line for this is Git-Bash. It is used for creating a new repository in GitHub. You can store a variety of projects in GitHub repositories, including open source projects and company based projects.

• For installing packages you can use 'NPM' or 'Yarn'
• For module bundling, you can use 'Webpack' or 'Parcel'
• For task runners, you can use 'Gulp' or 'Grunt'

8. Basic Deployment

After creating a website using all the above tools and software, you need to deploy that website. For that, you need a domain and shared hosting.

• You can register a domain name from 'namecheap.com'(https://www.namecheap.com/) or 'Google domains'
• You can buy hosting from 'Inmotion.com' (https://www.inmotionhosting.com/home-p), 'Hostgator.com', 'Bluehost.com'
• For FTP and SFTP file upload you can use 'Filezilla'.

Well, this concludes my 2019 Web Developer Practical Guide (Front-End). I tried to make it as simple as possible but really effective. Those who want to start web dev, I hope this blog will help you.