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
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
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
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
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
UI Development and the one responsible for this process has a title
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
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
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!
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).
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
2.2 Learning Front-End Development
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 :
- 30 Days to Learn HTML & CSS (Full Course)
- W3Schools | HTML
- W3Schools | CSS
- W3Schools | Bootstrap
- W3Schools | Angular Js
- Bootstrap | Official website
- W3Schools | SQL Server
- W3Schools | PHP
- W3Schools | ASP.NET
Paid resources :