[indiahosting]

Up

0

Down

::

Steps to learn web development basics:

Learn the basics of how websites work, front-end vs back-end, and using a code editor
Learn basic HTML, CSS, and JavaScript
Learn tools: package managers, build tools, version control
Learn Sass, responsive design, JavaScript frameworks
Learn back-end basics: servers and databases, programming languages
I recommend doing 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 personally 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, learning the basics of both will help you figure out if you like front-end or back-end web development better

Now, let’s jump right into the first step!

1: What is web development?

Before we get into actual coding, let’s first take a 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.

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 cat pics) from the server, as well as submitting data back to the server (load moar cat pics!) This back and forth between the client and the server is the basis of the internet.

Anything that you can access in your browser is something that a web developer built. Some examples are small business websites and blogs on the simpler side, all the way up to very complex web apps like Airbnb, Facebook, and Twitter.

What’s 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 really 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!

Fun illustrations aside, both front and back end web development serve different but very important functions.

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.

If you’re just getting started, though, I’d recommend checking out VS Code, which you can download from their website.

Now that we’ve covered some of the broader concepts in what web development is, let’s get into more of the details– starting with the front end.

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.

CSS

CSS, or Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy. You can add colors, 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 front-end, it’s essential to have really solid CSS skills.

JavaScript

JavaScript is a programming language that was designed to run in the browser. 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!

ICS Tutorial

Topic