Kick off your career as web developer

As a new web developer, you may asking how or from I can start and kick off my career as web developer ?

in this topic I will try to demonstrate what is main fields of web development and the main skills you should have and how you can learn it.

1 Main components of a website

Business Analysis
Web Design
UI Development
Front-End Development
Back-End Development
Databases

1.1 Business Analysis

The first step of any website is to analyse the requirements we have from the client and determine what exactly this website expected to do, and what is final output expected by the client.

then converting this inputs to something called wireframes which is look like the following shape

wireframe template

when working on a business analysis you don’t have to learn additional skills to create a wireframe there are many tools that do it for you with a drag and drop!
the most popular tools for wire-framing is Balsamiq

1.2 Web Design

After we have a wireframe we now good to go to the next step which designing the pages and create the graphical identity of the web including colors, images, fonts and layout
this usually done using Photoshop

the output of this step should be a set of images represent the web pages , if we take the previous image as an example of wireframes so the design may look like
design template

Note: the design may change the layout of the wireframe, the wireframe role is only to show which contents will be in this page.

1.3 UI Development

Now we have cool design and ready to go forward to implement this design into HTML, CSS, and JavaScript to convert this images to be web pages and can be opened in a web browser in a process called UI Development and the one responsible for this process has a title UI Developer

UI developer use HTML to make the main layout of the page which is stand for “Hyper Text Markup Language” then the UI Developer have to use CSS “Cascading style sheets” to style the pages and add colors, resize element, change fonts, change layout flow, and much more ..

Finally UI developer write JavaScript code to manipulate the HTML elements and make it more dynamic (ex: when click a button it may collapse part of the page or submit a form or open a new page .. etc)

1.4 Front-End Development

Till now all we have is a static website which is doesn’t allow user to do any actions .. even if we have a from and user submit it where this data will go ?! and how we catch this data and save it to a database??

Here is role of the Front-End developer who all his work is almost writing JavaScript code to convert the static web pages into dynamic web pages like in real life

at this step knowing only Javascript is not enough Front-End developer uses also many Javascript Libraries and frameworks like “JQuery, Angular Js, Angular2 Js, Backbone, Ember Js, React Js ..etc”

1.5 Back-End Development

All we have now is a code running in the my web browser but how other people could see the website!

So we need a place to put all our HTML files ,CSS files, JavaScript files, fonts files and images to be public on the internet, This place is called Server and all programing languages used in the server is called Server-Side Languages or Back-end Language and the developer writing server-side code is called Back-End Developer

which is responsible for receiving all requests from the client-side which is the user’s machine and response to this requests with the appropriate response.

there is many of languages and frameworks to do this, for example (JAVA, ASP.NET, PHP, Python, Ruby ..etc).

1.6 Databases

Now user’s web browser (Client-Side) requesting the (Server-Side) and the server response with files or data, But what if he close the website what will happen !! everything will be reseted and all the data will be cleared!

So we need to store this data into a database so we can request the data each time the client request our web server.

Server-Side languages only is able to connect to database to create tables add data and retrieve it, edit it or delete it.

there are many database engines but the most popular are (MySQL, SQL Server, Oracle database, MongoDb).

2 Learning Web Development

the first step to learn web development is to decide which field you like to start with , I will try to assume you already decided then select one of the following to read

2.1 Learning UI Development

You have to start with HTML, CSS, HTML5, CSS3, Javascript, Bootstrap(a UI framework based on CSS3 and JavaScript) respectively.

2.2 Learning Front-End Development

You have to start with HTML, Javascript, jQuery(a library based on JavaScript) respectively.
then learn one or more Javascript framework (Angular Js, Angular2 Js, React Js, Backbone Js, Ember Js).. I recommend to learn Angular and Angular2.

2.3 Learning Back-End Development

I recommend to start with open sources languages such like PHP then learn one or more frameworks based on PHP like (Laravel, Codeigniter).
Also it’s very important to learn a (CMS) Content Management System like WordPress which is a framework handling content insertion and updating very quickly and it is the perfect choice to build a blog website.
and finally and urgently you have to a learn at least one database engine which in this case recommended to be MySQL.

Or on other hand you can learn C# then go with ASP.NET as back-end framework based on C# then learn SQL server as a database.

3 Resources to learn

Free resources :

Paid resources :