Practical guide for Web development 2019 Part 1

Introduction

I do Welcome each and every one of us to year 2019, I decided to put some practical guide for web development for 2019, the necessary tools needed and how to move from a front-end developer to a full stack developer this guide is maiming for people who are interested in web development or about to start a career in web development. This is part 1, it contain information needed to be a front end developer.

What is in this guide?

This guide is a step by step guide to all of the major technologies that are involve in becoming a front-end developer in 2019. I will discuss about what is needed for this role, types of frameworks which I think will be of great help if you want to pursue a career in web design and development. It not necessary to learn all of this technologies to be a web developer, this guide simply lay out options in categorize way to help you find your path.

A. Basic tools for web development

Your basic tools are basically what you need to build a web page below are listed basic tools to get started with

1.Text editor or ide: For text editor and IDE there are various big options in the market. I commonly see developers use VScode, Sublime text and Atom. Atom is quite good but it kind of fading away due to its performance issue and it not even a light weight application.
Recommended ( VScode)

2. Web browser: After writing your codes you will probably need a browser to display your web pages, also you need to know that browsers are not just there to display webpages, they also serve as tools for debugging as far as web browser is concern the popular one are chrome, Firefox and safari or Edge.
Recommend (Chrome)

3. Design & mockup (UI/UX design)
This categories of tools are not actually necessary but it kind of important if you want to be a front end developer, it help you to design your web layout before you start kicking out to write your codes. For years Photoshop has been one of the best tools for this categories but other tools like adobe XD, sketch, figma are also spring up.
Recommend (Adobe XD) it own by the popular adobe it was one of the trending UI/UX tools for 2018 and it is geared more for making UI than Photoshop it has a clean interface and very easy to learn which you can probably learn under 2 weeks.

B. Building blocks

The first two web technologies you will be learning are HTML and CSS which are the fundamental and building block of the web. Every webpage you see on the web has HTML and CSS implemented in some way. You also need to know that HTML and CSS are not programming language they are mockup languages. What to learn include: Semantic HTML5 elements, Basic CSS (positioning box model etc.), Flexbox & CSS Grid, CSS Variables (optional).

Responsive web layout: Responsive layout is no longer a luxury or an optional development it now a necessity because the growth of mobile device is high and people visit the internet mostly on mobile platform then on a laptop, so responsive web design is compulsory. Guide for achieving these are: Set viewport ,Fluid widths, Use media queries and Rem over px (I see a lot of developers use px but for font size I recommend rem over px ).

C. Basic deployment

Then you need to learn how to deploy static website to web servers and for the end user to be able to access it. You basically need to know the following
1. Register a domain name: (there are various domain name register service out there you can try out our own indigenous companies whogohost, hostcabal etc and also on the foreign side namecheap or godaddy ).
2. Web hosting: there are various hosting types which are shared host, virtual private server cloud hosting you can also check out the one listed above they also offer good and cheap hosting service

D. Programming of the web

You will probably want to learn a programming language for the web, JavaScript will be your first language to learn and you will need to learn JavaScript without any framework. I usually advice people to learn the core language before bouncing on frameworks. So you will need to learn Datatypes, functions conditions loops operators, array, objects etc., DOM manipulation (which is the most important), Json and how to fetch API

So when you learn all the following HTML CSS and JavaScript you can practicaly call yourself an average frontend web developer, so with this skill you will be able to Build UI layouts, build static websites and add dynamic functionality with JavaScript (modals, slideshows, etc.) Deploy and maintain websites. With this it is possible to find an entry level job, but base on competition you are likely going to need to learn and know more. with this you can try out freelancing and set up some basic gig and it will help you to get more experience along the line. I will also write an article on the freelancing soon and they are better site than fiverr and upwork to make cool money online.

E. Frontend Frameworks

What to do next now depends on what you want to do, there are so many choices to make after this which involve learning HTML/CSS frameworks, Frontend JS Framework (angular, react etc.) and Server side languages and database (PHP, nodes etc.) Frameworks makes coders life or job very easier to construct and also great for prototyping. There are many types of HTML/CSS frameworks, but you only need to know one out of the following
1. Bootstrap 4 (owned by twitter)
2. Materialize (owned by Google)
3. Bulma

From the listed above I will recommend bootstrap it simple, light, super fast and very easy to learn. moreover, different organization might require you to learn others if you want to work for them but I majorly recommend those 3 listed above but knowing one is enough.
As you progress more in learning other framework you will also need to learn basic command lines, Git(for version control), NPM (for installing packages).

It becoming a necessity to learn a JS frontend framework because it becoming very popular in the industry, more interactive and interesting UI component, modular frontend code and also good for teams. The three most common use in the industries are
1. React- most popular in the industries (owned by Facebook)
2. Vue (ease to use and really gaining traction)
3. Angular (angular owned but fading a bit due to lack of community support it mostly used in enterprise)

But from the three listed above you will only need to know one but I will recommend react it hot-cake in the market and there is a lot of support for this language and the native version of this app is now use to build mobile applications that can be used for android and Ios(apple) application and also create great web application. But you can also try out any of the 3 and feel free to use any of them.I might say angular is fading because of it losing popularity but it also a great language to learn.

So I will stop here for now it becoming lengthy and prepare the part 2 of this article which will focus more on server side of web development which we know as backend thanks for taking your time to read

You can follow me on twiter @steve_darey and I will follow you back as soon as possible and also Contact for enquires contact on my signature have a lovely weekend.


part 2 here https://www.nairaland.com/4951385/practical-guide-web-development-2019

nice one , weldone Sir

Seun, lalasticlala can't this thread make fp

ayorinde217:
nice one , weldone Sir

thank you very much

Abeg wetin be the file size of the adobe xd??

GreatAchiever1:
Abeg wetin be the file size of the adobe xd??

250mb and it free

Xcore91:
250mb and it free

Nice... where can i get it?

GreatAchiever1:

Nice... where can i get it?

if you are in Lagos you can just buy the CD or go to adobe website and download it

Thanks for this write up
Waiting for part2

Can I begin with windows 8
Windows 10 is just way high to maintain.

kenlisa:
Thanks for this write up
Waiting for part2

Can I begin with windows 8
Windows 10 is just way high to maintain.

Theres already a part2
https://www.nairaland.com/4951385/practical-guide-web-development-2019

..

100 days of coding on web design is kicking soon on nairaland stay tuned


So if your are interested you can apply here using this google form [url]https://docs.google.com/forms/d/e/1FAIpQLSfd63XSmX82kG-RA40oq73pZ9p2P3vlzbmcZjqZvaGy7Nxnqw/viewform?usp=sf_link [/url] the selection will be selective not every one will be picked, also the form expires on the 5th of April