Tekraze Web development

The Absolute Beginners Guide for Learning Web Development in 2018

Spread the love
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares

Are you trying to learn web development, but not sure where to start?

You’ve probably already tried looking on Google for how to learn, and there are a lot of resources out there. But many of them include way too much information about that.

Right now, all you need is the basics of web development — a general explanation with some direction on where to go next.

If you’re a beginner coder, this guide is for you!

Here is what this guide covers:-

  • An explanation of the basic areas in web development,
  • An overview of programming languages and frameworks,
  • And recommended resources to help you learn.

Part 1: We’ll start out with the basics:

  • What web development is: explaining what’s actually happening when you load a website in your browser.
  • HTML, CSS, and JavaScript: the foundation of every website.
  • Helpful tools: using code editors and Git
  • What’s front-end and back-end?

Part 2: Then we’ll get into more intermediate front-end skills:

  • Responsive design: making sure your website looks good on computers, tablets, and phones.
  • Grunt, Gulp, and WebPack: using build tools to do some work for you!
  • An introduction to JavaScript front-end frameworks: React, Vue, and Angular

Part 3: Followed by back-end skills:

  • An overview of the most commonly used back-end languages and how they stack up.
  • A quick intro to databases and what database languages you should learn.
  • The basics of setting up a website on a server.

You can even try writing down your goal, and putting it someplace where you will see it everyday, like your bathroom mirror or next to your computer.

As you go through this article, keep your goal in mind, and let that determine what decisions you make: which languages to learn, even how you choose to learn.

With that said, let’s get started with the basics!

Part 1: The basics

  • This might seem obvious, but I’m going to say it anyway:
  • At its core, web development is all about building websites.
  • A website may be a simple one page site, or it could be an incredibly complex web application.
  • If you can view it on the web in a browser, it has to do with web development.

Here is a simple explanation of how websites on the internet work:

  1. Websites are basically a bunch of files stored on computers called servers.
  2. Servers are computers that are used to host websites, meaning that they store the website files. These servers are connected to the giant network called the World Wide Web (to use 90’s lingo), or the Internet.
  3. Browsers are programs that you run on your computer. They load the website files via your internet connection. Your computer is also known as the client, which connects to the server.

The 3 components that make up every website

As mentioned above, websites are made up of files, mainly HTML, CSS, and JavaScript files.

Let’s take a closer look at each of them:

HTML or HyperText Markup Language

HTML is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website.

You can actually make a very very basic website just using HTML and no other types of files.

It won’t look very interesting, but that’s the minimum that you need for a website to be a website.

CSS or Cascading Style Sheets

Without CSS, a website will look as aesthetically pleasing as a Word document.

With CSS, you can add colors of all kinds, compelling fonts, and layout the website in pretty much any way you please.

You can even add animations and draw shapes using more advanced CSS.

JavaScript

JavaScript is a programming language that allows you to interact with elements on the website and to manipulate them.

While CSS adds style to HTML, JavaScript adds interactivity and makes a website more dynamic.

For example, you can use JavaScript to scroll to the top of the page when you click a button, or to build a slideshow with buttons to navigate through the images.

To work with HTML, CSS and JavaScript files, you’ll need to use a program on your computer called a code editor.

Which brings us to the next point:

Which code editor should you use?

This is a very common question, especially if you’re just starting out.

The best code editor for you will be highly dependent on what kind of code you’re writing.

If you’re doing mainly HTML, CSS, and JavaScript, you could code in Windows Notepad or TextEdit for Macs if you wanted to.

But what would the fun be in that?

Code editor programs like Sublime or VS Code come with a lot of features that just make coding easier.

They allow you to indent multiple lines of text right or left, and can highlight the text in different ways depending on what language the file is in.

For back-end languages (we’ll get into those in a later section) you’ll need a more powerful code editor called an IDE (Integrated Development Environment). IDEs have features that allow you to debug and compile (process) your code.

Here are some popular code editors:

VS Code: This lightweight version of Visual Studio, Microsoft’s main IDE, is only a few years old but it’s gotten incredibly popular, due to its speed, ease of use, and powerful features.

AtomCreated by GitHub and advertised as a “hackable text editor,” Atom is a well-loved editor. One of its main strengths is its customizability. You can install packages and themes that will add features to the program.

Sublime: A hugely popular program that has been around for a while. Like Atom, you can install packages and themes, and it also has quick performance. Unlike the other two editors, a Sublime license costs $70 (but it is free to try).

I’d recommend trying some or all of these editors out, for comparison’s sake. Then pick one and stick to it, learning its features and shortcut keys.

Version control

Now you have your code editor, and you’re starting to write code.

However what happens if you make a mistake in your code, and pressing Ctrl-Z to undo a million times isn’t working for you? What do you do?

The answer, is version control!

Version control is like having save points for your code files.

If you think you might be about to make some code changes that could break everything, you can create a new save point (called a commit).

Then if you do break your website, you can revert your code back to the state it was in before.

It can be a lifesaver if you ever make a mistake that you desperately need to undo.

Version control sounds great! How does it work?

Using a version control system (VCS) involves storing your code files and the entire history of changes in what’s called a repository.

Usually you will use one repository per website or project.

Then you store your repository online in what’s known as a central repository, and also keep a version on your computer in a local repository.

As you make changes on your computer, you can create commits and then push them up to the central repository.

This process allows you to have multiple people working on the same set of code, even changing the same files.

Git is the most popular VCS right now

The main version control system nowadays is Git. Its main competitor is Subversion (SVN), an older system.

But the vast majority of coding bootcamps and tutorials will use Git, so that’s what I’d recommend that you learn.

Now, as we move into explaining the actual languages and frameworks that are used, we’ll be using terms that you’ve probably come across already: front end and back end.

The front end is all about how the website looks, visually.

The front end (or client-side) refers to what is loaded by the user’s browser, also called the client.

This would be the HTML and CSS that we started out talking about. JavaScript was originally just a front-end language, but nowadays you can use JavaScript as your server-side, or back-end, language also.

Front-end work deals heavily with making the website look good.

In addition, it also involves making the site behave in a way that makes sense to the user (also called UX or user experience).

If you enjoy tweaking your CSS to make sure the site is pixel perfect, and adding subtle JavaScript animations that help the user along, then you will likely enjoy front-end development.

The back end is all about functionality and making sure everything works.

  • While the front end is about the appearance and visual behavior of the website, the back end is about getting everything to work behind the scenes.
  • If you’re working in back-end development, you’ll be doing tasks like handling requests to the server and database.
  • Some examples of back-end work would be saving the data when someone fills out a form on the contact page, or retrieving data to display blog posts in a specific category that the user has requested.
  • Back-end work also may involve setting up the website on a server, handling deployment, and setting up SQL databases.

If the idea of setting up all the functional parts of a website sounds fun to you, you may enjoy back-end work!

Front end, back end, or full stack?

In web development, you can focus on just the front end, or just the back end. Or you can deal in both, which is called full stack development.

What you choose to focus on should mainly depend on two things:

  • Your personal preference: Not everyone likes both front and back end.
  • Job availability: Browse your local job listings and get involved with local coding meetups to get a feel for what types of jobs there are.

It’s worth mentioning that if you enjoy both front and back end, being a full stack developer will make you more marketable.

It makes sense — the more technologies you can work with, the more tasks you will be able to perform.

Stack Overflow reported in their 2017 survey of users that 63.7% identified as full-stack, 24.4% as back-end, and 11.9% as front-end developers:

Part 2: Making your front-end skills shine

Once you’ve gotten the basics of HTML, CSS, and JavaScript down, you can start getting into more advanced skills in the front-end.

This section will go through practices and tools that will help you build more marketable skills as a web developer.

Responsive design is a must in this mobile-friendly world

When websites were first around, there was only one way to view them: on your computer.

Smartphones and mobile data didn’t really exist yet. When making a website you only had to worry about how it looked on your computer.

Now, according to Statcounter.com, more people are using their phones than their desktop computers to browse the internet.

 

So we need to make sure that all our websites work and look good on everything from the biggest monitor to the smallest phone.

This practice is what’s known as responsive design. It’s called that because the design can “respond” to any device that is viewing it.

You can test how responsive a website is by manually changing the width of your browser window and seeing how the design looks at large and small widths.

Building a truly responsive website involves a lot of planning in the design phase to consider how everything will look on all devices. And in the web development stage, it involves using media queries to control which CSS properties are being used at specific widths.

Frameworks can help you build a responsive website quickly

As you might imagine, coding all the CSS of a responsive website takes a lot of work.

If you can’t spare a lot of extra time, you might try using a responsive framework like Bootstrap.

The beauty of these frameworks is that they come pre-packaged with custom CSS and JavaScript. They’ve done a lot of work for you by pre-styling elements like headlines and buttons.

They also come with JavaScript components (essentially little plugins) like modal pop-up windows and navigation bars.

Since you’re using something that’s already been tested, it will make building your website a lot easier. The only caveat is that you shouldn’t become too dependent on frameworks.

There’s no substitute for knowing how to build a responsive website from scratch.

Sass will save you time and headaches when writing CSS

Once you’ve gotten the basics of CSS down, I would start to learn Sass, because it is simply awesome.

It’s even in the name! Sass stands for “Syntactically Awesome Style Sheets.” And it’s described on its website as “an extension of CSS.”

It makes writing your CSS styles much easier, more intuitive, and faster.

Don’t get me wrong, CSS is great. But as you get into it, you’ll realize that regular vanilla CSS can get quite tedious. And, if you aren’t super organized in how you write your styles, your CSS styles can quickly become frustratingly tangled.

What Sass does is give you more power and control.

Here are a couple examples of how Sass will make your life easier:

  • Mixins: Instead of copying and pasting the CSS code for certain elements a million times, you can use mixins. They allow you to write a set of styles for an element just once, and reuse as many times as you want.
  • Nesting: Instead of writing all the parent classes of a specific style, you can nest all the children inside the parent’s styles. This also cuts down on a lot of duplicate work.

Some examples of JavaScript front-end frameworks are ReactVue, and Angular.

A library is a set of pre-made tools that you add to your own structure.

In comparison, a library is a collection of individual components that you can take and plug in to your own system.

This is the main difference between frameworks and libraries:

While frameworks are pre-made structures, libraries aren’t a structure in themselves. They provide additional functionality for existing systems.

The big three in JavaScript frameworks: Angular, React, and Vue

 

Part 3: Let’s get into the back-end

Which language should you learn first?

There are a ton of back-end languages. Many of them have been around for quite a while, some even before the internet existed!

This can make it difficult to choose which language to start out with. To narrow down your choices, I’d recommend applying the following principles to your decision:

  • Choose a language that is learnable: it has a reasonable learning curve, is well-documented, and/or has a good online support system.
  • Choose a language that is relevant to your eventual career goals.
  • Choose a language that is enjoyable. Learning web development is hard enough — there’s no point in forcing yourself to learn a language that you really don’t like.

One important thing to keep in mind is that you don’t have to learn every language.

In fact, if you’re a beginner I would strongly recommend that you focus on one language first.

All programming languages share some common principles.

For example, you can write a “for” loop in JavaScript, PHP, C# and Python.

Once you’ve picked up the fundamental principles of programming in your first language, it will be easier to transfer those concepts into other languages.

I hope this takes off a little pressure from choosing your first back-end language to learn

Let’s take a look at some of the most popular back-end languages.

Java:

Java is a stable language that is very widely used and has been around a long time.

C# (C Sharp)

C# was created by Microsoft to be a competitor to Java. You can see that C# peaked on Stack Overflow’s Trends in 2009 and has been on the decline ever since.

Node.js

As mentioned earlier, JavaScript has been the most commonly used language reported by Stack Overflow users for the past five years.

A lot of this has to do with Node.js, which topped their list of frameworks and libraries used the most in 2017.

Python

Python first came onto the scene in 1991 and is a frequent “first language” for many programming students.

Due to its readability and use of English keywords, it’s generally considered an easy language to learn.

There are a couple of Python frameworks that you can use:

  • Django (pre-built features, more bells and whistles), and
  • Flask (more minimal and flexible).

PHP

PHP is a language that a lot of people love to hate.

However, despite the number of Quora questions asking if PHP is dead, the fact remains that PHP is the most widely used back-end language today.

Content management systems (CMSs) are a major reason for the large market share of PHP. The top three CMSs — WordPress, Joomla, and Drupal — are all built with PHP.

WordPress itself has the lion’s share of the CMS market, making up 29.5% of all websites.

If you like working with it, WordPress development may be a good area of focus for customizing websites and building plugins or themes.

In addition to content management systems, PHP has some frameworks that make development easier and quicker. Laravel, a framework that came out in 2011, is currently the most popular one.

Rest of topics we will discuss in our post.

I really hope you found this article helpful!Feel free to leave a comment below with any thoughts or feedback.If you’re learning web development right now, I’d also love to hear about:

  • What your ultimate goal is, and
  • The #1 problem you’ve encountered while learning.

 

Leave a comment

Your email address will not be published. Required fields are marked *