A Guide to make you Understand Web Development
Tags: beginners, webdev, productivity
Published: 2023-01-19 21:22:10

---
cover_image : https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i23u8yndddg7haigqbhw.png
title: A Guide to make you Understand Web Development
published: true
date: 2022-12-22 19:42:19 UTC
tags: #beginner #webdev #productivity
canonical_url: https://idisepraise.hashnode.dev/web-development-101
---

If you picked web development as a career choice and you are wondering what it is all about, then this write-up is for you.

## What is Web Development?

The first website was created by Tim Berners-Lee in 1989. He is known as the father of the Web. The basic function of a website is to share information among people. Early websites were static and even lacked the appealing appearance and feel of websites made today.

Web development is the process that involves creating websites on the internet. It can be a simple **static** (flat or stationary) page to **dynamic** and complex web applications. Web development is building and maintaining a website to ensure it looks good and works well. There are different aspects of web development but it is largely divided into **Front-end development** and **Back-end development.**

## Front-end Development

Front-end development involves the visual aspects of a website(client side). A **Front-end developer** builds the things a user sees and interacts with on a website.

### **Objectives of a Front-end Developer**

Nowadays, Front-end developer jobs are more technical than before as webpages are more complex and dynamic today. However, the common task of a Front-end developer includes:

- Bringing design concepts to life.

- Building responsive webpages - webpages that work across different devices' screen sizes.

- Ensuring User Interface (UI) and User Experience (UX) logic works smoothly.

### **Technologies and Tools of a**  **Front-end Developer**

Some of the basic tools you will use to build web pages include:

1. **HTML** - HyperText Markup Language is the code that is used to structure a webpage and its content. it is the framework of a website, it involves the combination of different _tags_ to form the structure of a webpage. You will understand all about tags when you start learning. Think of HTML as the bone is to our body, so is HTML to a website.

2. **CSS** - Cascading Style Sheets is used for styling an HTML document. it is used for adding style (e.g fonts, colors, spacing) to web pages. It involves a combination of different _CSS_ _properties_ to style a webpage. You will understand properties better once you start learning. Think of CSS as the muscles and skin is to our body, so is CSS to a website.

3. **JavaScript** - This is the most popular programming language and a core technology of the web. it is used to do things you can't do with _HTML_ and _CSS_. Think of it as the brain and nerves is to our body, so is JavaScript to a website. JavaScript makes a website interactive and functional e.g showing or hiding content with the click of a button, collecting and storing data after submitting a form, and handling communication with the website servers. There are so many other things you can do with _JavaScript_, you will understand better when you start learning.

### Frameworks in Front-end Development

Front-end development technologies are constantly evolving, so as a developer, you must be aware of how the field is changing. Some advantages of using frameworks are:

- Scalability

- Time-saving

- Robustness

- Integrations

- Security

Some examples of Front-end frameworks are:

| 

**CSS frameworks**

 | 

**JavaScript frameworks**

 |
| 

TailwindCSS, Bootstrap

 | 

React.js, Vue, Angular, Next.js

 |

The above frameworks will speed up your workflow no doubt however as a beginner, you should postpone learning frameworks and stick to learning the basics at first. Frameworks come and go but the basics will stay forever.

You can only master a language if you know the basics of that language. After you are well versed in the basics, learning any framework will be quite easy.

### Learn Front-end Development

There are many sources with poor tutorials promising you to master X language in a short period. Do not opt for such tutorials. Learning anything takes a while so take your time to filter out such tutorials.

You should opt for tutorials that will cover core topics of a language extensively. Also, don't rush your learning process, if you do, you'll find yourself going back to re-learn some things you missed.

Find out if you learn by reading or watching tutorials, you can even use both methods. I'm not a big fan of rigid learning timeframes as we are all different people so we learn things at different paces. Use whatever timeframe that works for you however, you shouldn't spend much time learning _HTML_ & _CSS_ as they are easy to learn and knowing only just the two won't give you an edge in the competitive job market. _JavaScript_ is where things get serious and it is different from _HTML_ & _CSS_. So prepare your mind to expect something different and take your time to understand it.

Some learning platforms to help you learn the basics of Front-end development include:

- [Coding Addict](https://www.youtube.com/c/CodingAddict/playlists) - John Smilga is a great instructor, I started my learning with his videos. He has awesome playlists with step-by-step tutorials on different topics.

- [Scrimba](https://scrimba.com/) - This is an online video learning platform with lots of extensive tutorials.

- [Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw) - This is another great instructor. I love his CSS tutorials.

- [MDN](https://developer.mozilla.org/en-US/) - This is a site that provides information on web development technologies.

- [W3schools](https://www.w3schools.com/) -This is also a site like **MDN**.

## Back-end Development

Back-end development handles the non-visual aspects of a website(server side). A **Back-end developer** works behind the scenes **and** builds everything you can't see on a website.

### **Objectives of a Back-end developer**

The common task of a Back-end developer includes:

- Understanding the aim of the website and coming up with an effective solution.

- Creating effective software solutions that enable smooth communication between the website server and the client side.

- Building and managing Application Programming Interfaces(APIs).

- Creating website architecture and database system.

- Creating an effective payment process configuration.

### **Technologies and Tools of a**  **Back-end Developer**

Back-end development is not as visual as Front-end development, so you can only understand some things here when you start learning. Some of the basic tools you can use in Back-end include:

1. PHP - PHP is a server scripting language that can be used to create dynamic and interactive Web pages.

2. Python - Python is well-known among individuals for its compatibility with advanced technologies such as Machine Learning, Internet of Things (IoT), Data Science, and so on, it is also widely used and well-suited for Back-end web development.

3. JavaScript - Don't be surprised to see JavaScript as a Back-end language as well. This is possible with Node.js. Node.js is a cross-platform open-source runtime environment for executing JavaScript code outside of a browser. It's important to remember that Node.js is not a framework or a programming language. Most people believe it is a framework or a programming language. We frequently use Node.js to create back-end services such as APIs, Web Apps, and Mobile Apps.

### Frameworks in Back-end Development

Using frameworks is advantageous in Front-end development, and it is advantageous in Back-end development as well. That being said, you should not begin your learning with frameworks, but rather master the basics before moving on to frameworks, as I previously stated. Some examples of Back-end frameworks are:

- Django

- Laravel

- Express.js

- Ruby on Rails

### Learn Back-end Development

As I mentioned in the Front-end section, you should start with the extensive courses. It will benefit you in the long run. Also, use a learning timeframe that works for you.

Some learning platforms to help you learn the basics of Back-end development include:

- [Freecodecamp](https://www.freecodecamp.org/)

- [MDN](https://developer.mozilla.org/en-US/)

- [W3schools](https://www.w3schools.com/)

- [Youtube](http://youtube.com/)

P.S. You may choose not to follow the learning platforms I have suggested as there are many other extensive resources out there, so find whatever works for you.

## Full-stack development

A full-stack developer can develop both Front-end and Back-end software. To be a competent full-stack developer is no small feat as you need to be proficient in both Front-end and Back-end languages and frameworks, as well as in server, network and hosting environments. You should have spent many years working in different roles to become a full-stack developer.

So take your time, pick a niche, learn, grow and in no time, you'll have all the experience of a full-stack developer.

## Conclusion

Learning to code is simply equipping yourself with the knowledge required to solve software problems. Some problems you encounter may have already been solved by someone else and there are numerous resources available to assist you along the way.

Don't think of it as something magical or impossible. Its abundance of symbols and words should not scare you; tools will assist you in writing the majority of those words and symbols. You don't have to be great at math, and it doesn't mean your sleep pattern will be disrupted or you'll have to be "crazy" to understand it.

> Coding is a thing of practice, not a thing of intelligence. There are no tricks, hacks, or shortcuts. Only lots of practice can help you improve.