GETTING STARTED WITH WEB DEVELOPMENT

This content originally appeared on DEV Community and was authored by MFONIDO MARK

A lot of persons have asked me via DM’s, or direct on how they can get started with web development and what’s the best method to use, and where they can get resources, so by the end of this article, we shall have an understanding of the basics of web development, what skills you need to know, and where to find them.

OUTLINE

1: What is web development: How websites work, front-end vs back-end, code editor‌‌
2: Basic front-end: HTML, CSS, and JavaScript‌‌
3: Tools: Package managers, build tools, version control‌‌
4a: Additional front-end: Sass, responsive design, JavaScript frameworks‌‌
4b: Basic back-end: Server and database management, programming language

NOTE:

In this roadmap, I recommend following Steps 1, 2, and 3 in order. Then, depending on whether you want to focus on more front-end or back-end, you can do steps 4a or 4b in any order.

I think it’s a good idea for front-end web developers to know at least a bit of back-end, and vice versa. At the very least, knowing the basics of both will help you figure out if you like front-end or back-end better?

1. WHAT IS WEB DEVELOPMENT?

Before we get into talking about actual coding and programming languages, let’s first look at some general information on what web development is: how websites work, the difference between front and back-end, and using a code editor.
Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.

HOW DO WEBSITES WORK?

All websites, at their most basic, are just a bunch of files that are stored on a computer called a server. This server is connected to the internet. You can then load that website through a browser (like Chrome, Firefox, or Safari) on your computer or your phone. Your browser is also called the client in this situation.
So, every time that you’re on the internet, you (the client) are getting and loading data (like car or cat pics) from the server, as well as submitting data back to the server (load more car or cat pics!) This back and forth between the client and the server is the basis of the internet.

WHAT IS THE DIFFERENCE BETWEEN FRONT-END AND BACK-END?

The terms “front end,” “back end,” and “full-stack” web developer describe what part of the client/server relationship you’re working with.

“Front end” means that you’re dealing mainly with the client-side. It’s called the “front end” because it’s what you can see in the browser. Conversely, the “back end” is the part of the website that you can’t see, but it handles a lot of the logic and functionality that is necessary for everything to work. One way you can think about this is that front-end web development is like the “front of house” part of a restaurant. It’s the section where customers come to see and experience the restaurant– the interior decor, seating, and of course, eating the food.

On the other hand, back-end web development is like the “back of house” part of the restaurant. It’s where deliveries and inventory are managed, and the process to create the food all happens. There’s a lot of things behind the scenes that the customers won’t see, but they will experience (and hopefully enjoy) the end product– a delicious meal!

USING A CODE EDITOR.

When you build a website, the most essential tool that you will use is your code editor or IDE (Integrated Development Environment). This tool allows you to write the markup and code that will make up the website. There are quite a few good options out there, but currently, the most popular code editor is VS Code. VS Code is a more lightweight version of Visual Studio, Microsoft’s main IDE. It’s fast, free, easy to use, and you can customize it with themes and extensions. Other code editors are Sublime Text, Atom, and Vim.

2. BASIC FRONT-END

The front-end of a website is made up of three types of files: HTML, CSS, and JavaScript. These files are what is loaded in the browser, on the client-side. Let’s take a closer look at each one of them.

HTML

HTML, or HyperText Markup Language, is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. The HTML file contains all the content on the page, and it uses tags to denote different types of content. For example, you can use tags to create headline titles, paragraphs, bulleted lists, images, and so on. HTML tags by themselves do have some styles attached, but they are pretty basic, like what you would see in a Word document. The HTML is used to build the structure of any website, and the current version of HTML being used currently is HTML5.

CSS

CSS, or Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy. You can add colours, custom fonts, and layout the elements of your website however you want them to look. You can even create animations and shapes with CSS!
There is a lot of depth to CSS, and sometimes people tend to gloss over it so they can move on to things like JavaScript. However, I can’t overestimate the importance of understanding how to convert a design into a website layout using CSS. If you want to specialize in the front-end, it’s essential to have really solid CSS skills. And CSS helps you build responsive websites, webpages that look great on all screen sizes and multiple devices at the same time. the current version of CSS in use now is CSS3.

JAVASCRIPT

JavaScript is a multi-paradigm programming language that was designed to run in the browser. It is a prototype-based, multi-paradigm, imperative, and functional programming style. Using JavaScript, you can make your website dynamic, meaning it will respond to different inputs from the user or other sources.
For example, you can build a “Back to Top” button that when the user clicks it, they’ll scroll back up to the top of the page. Or you can build a weather widget that will display today’s weather based on the user’s location in the world.
Especially if you want to develop your skills later on with a JavaScript framework like React, you’ll understand more if you take the time to learn regular vanilla JavaScript first. It’s a really fun language to learn, and there’s so much you can do with it!

WHERE TO LEARN HTML, CSS, AND JAVASCRIPT(JS)?

A lot of persons do ask me what the best place to learn to code, and what is the best method of learning how to code. To me I prefer videos to books, it's just a matter of preference, but in all to get better at writing codes, you have to write the codes yourself, give at least 2 hours every day for practice and you will be amazed the result you will get in 4 to 7 months.
Here are some resources that will be of help to you.

FREE CODE CAMP

One of my favourite places to recommend is freeCodeCamp. It’s an online coding Bootcamp that is non-profit and completely free! I love this option because if you’re a beginner and not completely sure if coding is for you, it’s a low-pressure, risk-free way to see if you like it. One downside to freeCodeCamp is that while they do have an incredible curriculum with a built-in coding environment, they don’t have structured videos as part of it.

TEAM TREEHOUSE

Team Treehouse is a premium online learning platform that is video-based and has multiple tracks that you can follow. They even have an online Tech Degree program which is like an online Bootcamp that you can complete in 4-5 months.
Unfortunately, Treehouse isn’t free, but they do have different monthly or yearly plans depending on your budget. They have a free 7-day trial so you can see if you like it, and I can also give you a deal where you can get $100 off of 1 year of their Basic Plan. If you’re fairly certain you want to get into web development, Team Treehouse is a great place to learn.

WES BOS

Wes Bos has free courses on learning Flexbox, CSS Grid, and JavaScript that are excellent. I just went through his CSS Grid course, and it was really thorough and also fun. Wes is a great teacher!

UDEMY

Udemy is an online learning platform with a lot of great courses as well. One in particular that you might like is The Advanced CSS and Sass course by Jonas Schmedtmann– this paid course covers CSS grid, flexbox, responsive design, and other CSS topics!

YOUTUBE

There are also a ton of free video resources on YouTube:
Traversy Media, probably the biggest web development channel out there, has an HTML Crash Course and CSS Crash Course.
DesignCourse, a channel focused on web design and front-end, has an HTML & CSS tutorial for as well.
And freeCodeCamp has their own YouTube channel, with videos like a Learn JavaScript course and other in-depth courses.

BOOKS AND ARTICLES ON WEB DEVELOPMENT

If you’re more of a reading person, I would highly recommend the following:

1. The incredibly popular Jon Duckett books, on HTML & CSS, and JavaScript & jQuery. They are beautifully designed, really well-written, and have lots of photos and images to help teach the material.
2. Eloquent JavaScript And last but not least, some websites that have great articles and other resources are:
3. Mozilla Developer Network
4. CSS Tricks
5. Smashing Magazine

3. TOOLS

Let’s get into some other front-end technologies now. As we mentioned, HTML, CSS, and JavaScript are the basic building blocks of front-end web development. In addition to them, there are a few other tools that you’ll want to learn.

PACKAGE MANAGERS

Package managers are online collections of software, much of it open source. Each piece of software, called a package, is available for you to install and use in your own projects.
You can think about them like plugins– instead of writing everything from scratch, you can use helpful utilities that other people have written already.
The most popular package manager is called npm, or Node Package Manager, but you can also use another manager called Yarn. Both are good options to know and use, although it’s probably best to start out with npm.
If you’re curious to learn more, you can read this article on the basics of using npm.

GULP

technically a task runner, has a suite of npm packages that you can use to compile and process your files.

WEBPACK

is a super powerful bundler that can do everything Gulp can do plus more. It’s used a ton in JavaScript environments, particularly with JavaScript Frameworks (which we’ll get to in a bit). One down side of Webpack is that it requires a lot of configuration to get up and running, which can be frustrating.

PARCEL

is a newer bundler like Webpack, but it comes pre-configured out of the box, so you can literally get it going in just a few minutes. And you won’t have to worry as much about configuring everything.

VERSION CONTROL SYSTEM

Version control (also called source control) is a system that keeps track of every code change that you make in your project files. You can even revert to a previous change if you make a mistake. It’s almost like having infinite save points for your project, and let me tell you, it can be a huge lifesaver.
The most popular version control system is an open source system called Git. Using Git, you can store all your files and their change history in collections called repositories.
You may have also heard of GitHub, which is an online hosting company owned by Microsoft where you can store all your Git repositories.
To learn Git and GitHub, GitHub.com has some online guides that explain how to get up and running. Traversy Media also has a YouTube video explaining how Git works.

4A: ADDITIONAL FRONTEND

Once you have the basics of front-end down, there are some more intermediate skills that you will want to learn. I recommend that you look at the following: Sass, responsive design, and a JavaScript framework.

SASS

Sass is an extension of CSS that makes writing styles more intuitive and modular. It’s a really powerful tool. With Sass, you can split up your styles into multiple files for better organization, create variables to store colors and fonts, and use mixins and placeholders to easily reuse styles.
Even if you just utilize some of the basic features, like nesting, you will be able to write your styles more quickly and with less headache.

RESPONSIVE DESIGN

Responsive design ensures that your styles will look good on all devices–desktops, tablets, and mobile phones. The core practices of responsive design include using flexible sizing for elements, as well as utilizing media queries to target styles for specific devices and widths.
For example, instead of setting your content to be a static 400px wide, you can use a media query and set the content to be 50% width on desktop and 100% on mobile.
Building your websites with responsive CSS is a must these days, as mobile traffic is outpacing desktop traffic in many cases.

JAVASCRIPT FRAMEWORKS

Once you have the basics of vanilla JavaScript down, you may want to learn one of the JavaScript frameworks (especially if you want to be a full-stack JavaScript developer).
These frameworks come with pre-built structures and components that allow you to build apps more quickly than if you started from scratch.
Currently, you have three main choices: React, Angular, and Vue.

REACT

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality If you’re interested in a premium React course, both Tyler McGinnins and Wes Bos have great courses.

VUE

Vue.js (commonly referred to as Vue; pronounced /vjuː/, like "view") is an open-source model–view–viewmodel front-end JavaScript framework for building user interfaces and single-page applications.It was created by Evan You, and is maintained by him and the rest of the active core team members.

ANGULAR

Angular (commonly referred to as "Angular 2+" or "Angular CLI") is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Angular is used as the frontend of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular itself (or AngularJS), and Node.js server runtime environment.

NOW THE BIG QUESTION "WHICH FRAMEWORK SHOULD I LEARN OR WHICH IS THE BEST?

You might be wondering now, “Ok, well, which framework is the best?”
The truth is, they are all good. In web development, there’s almost never a single choice that is 100% the best choice for every person and every situation.
Your choice will most likely be determined by your job, or simply by which one you enjoy using the most. If your end goal is to land a job, try researching which framework seems to be the most common in potential job listings.
Don’t worry too much about which framework to choose. It’s more important that you learn and understand the concepts behind them. Also, once you learn one framework it will be easier to learn other ones (similar to programming languages).

4B: BASIC BACK-END

The back-end, or the server-side of web development, is made up of three main components: the server, a server-side programming language, and the database.

THE SERVER

As we mentioned at the very beginning, the server is the computer where all the website files, the database, and other components are stored.
Traditional servers run on operating systems such as Linux or Windows. They’re considered “centralized” because everything–the website files, back-end code, and data are stored together on the server.
Nowadays there are also serverless architectures, which is a more decentralized type of setup. This type of application splits up those components and leverages third party vendors to handle each of them.
Despite the name, though, you still do need some kind of server, to at least store your website files. Some examples of serverless providers are AWS (Amazon Web Services) or Netlify.
Serverless setups are popular because they are fast, cheap, and you don’t need to worry about server maintenance. They’re great for simple static websites that don’t require a traditional server-side language. However, for very complex applications the traditional server setup might be a better option.
To learn more about serverless setups, Netlify has an informative blog post that takes you through all the steps to setup a static website with deployment.

BACKEND PROGRAMMING LANGUAGE

On the server, you need to use a programming language to write the functions and logic for your application. The server then compiles your code and conveys the result back to the client.
Popular programming languages for the web include PHP, Python, Ruby, C# and Java. There is also a form of server-side JavaScript– Node.js, which is a run-time environment that can run JavaScript code on the server.

LET'S CHECK OUT A LIST OF THE MOST COMMONLY USED PROGRAMMING LANGUAGES FOR BACKEND WEB DEVELOPMENT

C

C# was developed as Microsoft’s competitor to Java. It’s used to make web apps with the .NET framework, game development, and can even be used to create mobile apps.

JAVA

Java is one of the most popular programming languages, and is used in web apps as well as to build Android apps.

NODE.JS

Node.js is a very popular technology (according to Stack Overflow’s 2019 developer survey). One thing to note: it isn’t technically a server-side language– it’s a form of JavaScript that runs on the server using the Express.js framework.

PHP

PHP is the language that powers WordPress, so this might be a good choice if you think you will be working with small business websites, as many of them use WordPress. You can also build web apps with the Laravel framework.

PYTHON

Python is growing in popularity, especially as it is used in data science and machine learning. It’s also considered to be good, as its syntax is simpler than some other languages. If you want to build web apps, you can use the Django or Flask frameworks.

RUBY

Ruby is another language that has a syntax considered to be fun to learn. You can build web apps with the framework Ruby on Rails.

NOTE

Just like with the JavaScript frameworks, there’s no #1 best programming language. Your choice should be based on either your personal interest and preference, as well as potential jobs– so do a little research on which might be a good choice for you.

DATABASE

Databases, as the name implies, are where you store information for your website. Most databases use a language called SQL (pronounced “sequel”) which stands for “Structured Query Language.”
In the database, data is stored in tables, with rows sort of like complex Excel documents. Then you can write queries in SQL in order to create, read, update, and delete data.
The database is run on the server, using servers like Microsoft SQL Server on Windows servers, and MySQL for Linux.
There are also NoSQL databases, which store the data in JSON files as opposed to the traditional tables. One type of NoSQL database is MongoDB, which is often used with React, Angular, and Vue applications.
Some examples of how data is utilized on websites are:
If you have a contact form on your website, you could build the form so that every time someone submits the form, their data is saved onto your database.
You can also user logins on the database, and write logic in the server-side language to handle checking and authenticating the logins.

CONCLUSION

A few tips that I have if you are going the self-taught route:

1. Don’t try to learn everything at once. Pick one skill to learn at a time.
2. Don’t jump around from tutorial to tutorial. As you’re learning, it’s ok to check out different resources to see which one you like best. But again, pick one and try to go all the way through it.
3. Know that learning web development is a long-term journey. Despite the stories you may have read of people going from zero to landing a web dev job in 3 months, I would aim more at 1 to 2 years to become job ready, if you’re starting from the beginning.
4. Just watching a video course or reading a book won’t automatically make you an expert. Learning the material is just the first step. Building actual websites and projects (even just demo ones for yourself) will help you to really cement your learning.

REFERENCES

https://www.freecodecamp.org/news/beginners-roadmap-web-development/
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web
Credit:
Jessica Chan

This content originally appeared on DEV Community and was authored by MFONIDO MARK