The Basics Of Web Development

Introduction

Coding and program development are all the craze now. While it used to be computer and mobile applications that dominated the tech space, now, in the interest of accessibility and cross-platform support, developers have increasingly turned towards developing the webpage.

These large strides have opened up the ability for technology to optimize workflows and bridge communication gaps. However, to the layperson, it’s not quite so easy to understand what these key innovations in the space of programming are doing and how they work. If you’re interested in becoming a web developer you do not know anything about coding languages, so how do you even begin?

The internet is full of guides on how to write the first few steps of code, but beyond that, it’s difficult to find concrete advice on how to progress. What you need as an absolute beginner is knowing the foundations of web development. For that, you’ll need a web development diploma.

Here are the first few steps you can take to begin your web developer journey.

Steps to Learn Web Development Basics

1. Understand the different players of web development – front-end and back-end
2. Pick up the three basic languages – HTML, CSS, JavaScript
3. Learn different tools – package managers, build tools, and version control
4. Additional know-hows:
   a. Front-end – Sass, Responsive design, Version Control
   b. Back-end – Server, Programming language, Database

As a beginner, it might be daunting to look at all these foreign-sounding words. It is important to take it one step at a time and learn one language at a time. Find out which part of web development you are interested in and start learning the languages in that segment.

It is also important that front-end developers know a bit of the back-end and the same is true and vice versa.

What is Web Development?

What are A Front-end and A Back-end?

To put it simply, imagine a website is a restaurant. As the diner, you will be met with the wait staff, and enjoy the decor and atmosphere of the restaurant. This is what front-end developers are responsible for, the user experience.

The back-end is like the back of the house, where the comings and goings are unseen by the diners, like taking inventory, recipe development, and other tasks to help the front of the house (front-end) receive customers.

Now that you can visualize the difference between front-end and back-end, let’s talk about what they are responsible for in web development.

All websites are stored on what is called a server. The server connects to the internet and is loaded as a website onto a client, which are the browsers you use, eg: Chrome, Safari, Firefox.

When you are on the internet through the browser of your choice, the client (browser) is having a back and forth with the server to tell it to load more of what you are looking at/doing on the client, eg: looking for collars for your furry friend. This is the basis of how the internet works to bring you content.

Using A Code Editor

The interface that you will be using to develop your website will be your code editor, or Integrated Development Environment (IDE). This is where you will be writing the code and markups that make up the foundations of your website.

There are a few code editors out there, VS Code for example is Microsoft’s main IDE. You can check out others such as Vim, Atom, and Sublime Text.

Front-end

The three languages that make up the basis of front-end development are HTML, CSS, and JavaScript.

1. HTML

HTML (HyperText Markup Language) is the basis for all websites. It is the main file that is loaded onto your screen when you access a website.

It can be used to denote many things on the website, such as title texts, paragraphs, bulleted lists, images, and videos. As a language, HTML is pretty basic and cannot do much in terms of design.

2. CSS

This is where CSS (Cascading Style Sheet) comes into play. It allows you to input codes to improve the design of your HTML layout. It even allows you to create shapes and animations with simple reactions.

3. JavaScript

To make your website more dynamic and exciting, JavaScript is your go-to. It can react differently to unique prompts and actions done by the user.

An example of simple JavaScript usage is the “Back to Top” action. Or even the floating weather widget that will hang around the screen showing the weather around the world.

Where to Learn HTML, CSS, and JavaScript

There are many good resources out there to learn these languages. One that I would recommend is “freeCodeCamp”.

It is completely free to use and a non-profit. However, the main drawback of it is that there are no instructional videos to guide you. But it is a low-pressure and risk-free way to begin your coding journey.

“Zero to Mastery Academy” is one of the best courses on Udemy. By paying a fee either monthly or annually, you get access to every single tutorial on the ZTM database. His academy covers languages like JavaScript, Python, and React among many others.

If videos are your preferred method of learning, here are a few that I find beneficial –

1. Wes Bos

If you want to learn CSS Gridbox, JavaScript, and Flexbox, Wes Bos has you covered.

2. Udemy

Udemy’s expansive courses cover most of the languages you might need.

3. DevProjects

Once you have a firm grasp on the basics and you want to try your hand at actual projects, DevProjects is your go-to. You can submit solutions and receive feedback from other developers through this platform.

4. YouTube

Of course, there is YouTube. There are a plethora of channels that teach coding for free here. Traversy Media and DesignCourse, which are great for HTML and CSS courses. FreeCodeCamp even has its own series on JavaScript for beginners.

Back-end

1. C#

This is a language developed by Microsoft and is used for game development and even for making mobile apps.

2. Java

Not to be confused with JavaScript, it is used to build Android apps.

3. Python

The Python language is recently growing rapidly in popularity due to its function for data science and machine learning. It is also simpler for beginners to pick up as their first back-end programming language.

4. Ruby

Ruby is another easy-to-pick-up language. There is a framework called “Ruby on Rails” to help you build web apps.

Conclusion

Learning to code may be a complex task when you look at it broadly. But, if you are able to narrow down an area of interest for you, and pick out a particular language that will suit your learning desires, you will be able to pick up coding in no time.

Remember to not jump around the languages while you are learning, and focus on one so that you are fluent in that before trying out others. Good luck, and happy coding.