You want to try learning web programming, but don’t know where to start?

You’ve probably tried searching for courses on google, but there are too many resources and most of them contain lots of information that makes you overload. 


web programming

You only need the most basic knowledge of web programming – a document that provides general explanations and helps you to drive development. 

The article will only provide technology knowledge in 2018 in the field of web programming at the most basic level if you want to try it in this area. If you are new to programming, this is the article for you! 

The article will include the following: 

  • Basic knowledge in web programming.
  • An overview of programming languages ​​and frameworks.
  • Useful resources.

That’s all what a toddler starts to need to develop a career in this area.

Part 1: We will start with the basics first:

  • What is web programming : explain what actually happens when you download a web page in your browser.
  • HTML, CSS and Javascript : the foundation of every website.
  • Useful tools : use editors and Git
  • What is front-end and back-end.

Part 2: Next, learn about front-end skills


web programming
  • Responsive design : make sure your website looks great even on computers, tablets or phones
  • Grunt, Gulp and WebPack : use build tools support
  • Introducing the frameworks of Javascript : React, Vue and Angular

Part 3: Back-end skills


web programming
  • Overall on the back-end languages is often used
  • Introduction to databases and database languages
  • Basically on how to set up a website on the server

Link: reference


List of online courses, tutorials and useful books. 
Before going through all the knowledge on the website, start with yourself first!

What is the ultimate goal when learning your programming?


In the book of 7 habits of successful people, Stephen Rovov has affirmed to be successful, you must start with “the end in mind” first.

Besides the reason you start learning programming, what do you want to aim for after you finish studying?

What is your ultimate goal?

Are you looking for a fun hobby? a career change? Or is it simply a flexible job that can help you arrange closer times with your family?

The way you approach web programming should be based on your goals.

When reading this article, keep in mind your goals in mind and let them decide: what language you should learn, even how you learn it.

Part 1: Background knowledge


I will start with an obvious first thing: The focus of web programming is building websites

A website can be as simple as a static or complicated website like today’s web applications. If you can see something in a web page on your browser, that is definitely related to web programming.

Here is a simple explanation of how websites operate:

  1. Websites are essentially just a collection of files stored on computers called servers.
  2. Servers / Servers are computers used to “host” a website, which is to store websites’ files. The servers are connected to the giant World Wide Web or the Internet.
  3. Browsers / Browsers are software that runs on your computer. They download websites files via internet connection. Your computer is treated as a client and connected to the server


3 Components make up every website


As mentioned above, websites are a collection of files, mainly HTML, CSS, Javascript files. Let’s find out everything in detail.

HTML or HyperTextMarkup Language


HTML is the foundation of every website. It is an important file downloaded by your browser when you visit a website.

You can completely create a website very simply with HTML without any other files. It will be pretty bland, but HTML is the minimum you need for a website to be called a website.

(If you are interested in the basic knowledge of HTML, you can read this blog / video tutorial)

CSS or Cascading Style Sheets


Without CSS, your website will be as bland as a text written in Word.

With CSS, you can add colors, adjust fonts and rearrange the layout of your site to your liking. You can even add motion effects using advanced CSS techniques.

Javascript


Javascript is a programming language that allows you to interact with components on the website and change them.

If CSS is decorated for HTML, Javascript adds interactivity and makes your website more vivid.

You can use Javascript to scroll to the top of the page when clicking on a button, or make a photo slideshow with navigation buttons to view images.

To work with HTML, CSS and Javascript, you need to use another software, the editor.

Which editor should you use?


This is a very common question, especially for those who are just beginning to learn programming. The answer is that the editor best suited to you will depend heavily on the language you choose to program.

If you work primarily with HTML, CSS, Javascript, you can program with Windows Notepad or TextEdit on the Mac if you want. But that doesn’t seem very professional.

Editors like Sublime or VS Code have a lot of features that make your programming work easier. They allow you to align multiple lines, highlight the lines of code in the appropriate programming language.


web programming

For back-end languages ​​(we’ll learn more in the next section), you’ll need more powerful editors called IDE (integrated development environment). The IDE helps you debug and compiles the code right in the editor.

Here are a few popular editors:


web programming

VS Code : The lighter version of Visual Studio, a Microsoft IDE. VS Code was born a few years ago but it has become popular because of its speed, ease of use, powerful features. VS Code is my favorite choice, so maybe I’m a bit biased when it comes to this editor.


web programming

Atom : created by GitHub and advertised as an editor that can “hackable”. Atom is a pretty beloved editor. One of its strengths is customization. You can install packages and interfaces that allow you to add features to the editor.


web programming

Sublime : A super famous editor that is older than VS Code or Atom. Like Atom, you can install packages and interfaces. Sublime is also very fast. Unlike the two editors above, you have to spend $ 70 to buy Sublime copyright but can try it for free.

I recommend that you try out some of the previous editors and then choose the editor that best suits you. Then stick with it and learn how to use keyboard shortcuts and proficiency.

Version control – Version management


After selecting the appropriate editor, you start writing code.

However, you accidentally caused an error in your lines of code, and despite how many times you have Ctrl-Z, your code still fails, what will you do in this case?

The answer is to use version control!

The version control is like having saved points (you remember when playing games that often have landmarks that when your character dies, can you play the game from that landmark without starting over? is save points!) in your code file.

If you think what you are about to do can ruin everything in your code file, you can create a new save point (called a commit). Then if you miss the site, you can return your code to its previous state before it has been corrupted by the version control.

Version control is a great life buoy if you miss an error and want to return to the original state.

But how does it work?

Using a version management system (VCS) means you have stored the code files and their entire change history in a repository called a repository.

Usually you will use a repository for each website or project

Then, store your repository online in a place called central repository , and keep a version of it on your computer in the local repository.Whenever you change something in the code files on your computer, you can create a commit and push it to central repository.

This process helps many people work on a code file and change multiple files simultaneously.

Git is the most popular version management system today

The current version management system is Git. One of its competitors is Subversion, an older system. But most tutorials and code camps today use Git, so I recommend learning how to use it.

References

Now we will dive into the languages ​​and frameworks used, and to get started let’s go through two common terms: front-end and back-end.

Frontend is all you see on a website


The front-end (also called the client side) is all that is downloaded on the user’s browser (client). It could be HTML and CSS, which we mentioned above. Initially Javascript was only used as a front-end language, but today you can use it for both back-end.

Front-end determines whether your website will be beautiful or ugly or bad.

In other words, it is related to whether your website works for users (this is called UX – User Experience, ie user experience).

If you are interested in changing CSS to make sure your site is perfect for every pixel, or adding JavaScript effects also makes you sit in front of your computer all day, you may be passionate about pursuing the programming front-end.

And the backend makes sure everything on your website works stably – it is all the features of a website.

While the front-end is the site’s appearance, the backend is what stands behind to make sure your website works with all the useful features.

If you are doing back-end programming, you must have done the work involved in processing requests to servers and databases.

Some examples of backend jobs might be storing data when users fill out forms on the contact page, or taking data to display articles in a specific category that the user requires. . The work of back-end can also include installing the website on the server, handling deploying issues / deploying the site on the server and installing the SQL database.

If you see the deployment of functional components of an interesting site, you are perfectly suited to the back-end array.

Put them together


The front-end and back-end names stemming from the front-end are the things you see in the browser and the back-end are things you don’t see, but they help handle tasks in the web and ensure The front-end part works stably.

You can consider the front-end to be a corporation’s store, which customers often see and use. Back-end are manufacturing and distribution centers that help shops operate effectively.

In web programming both front-end and back-end are equally important.

Front end, back end, or full stack?


In web programming , you can just focus on each front-end or back-end. Or you can do both, this job is called full stack programming.

What you choose will depend mainly on two things:

  • Your personal preference : not everyone likes both front and back end
  • Work: refer to your local job list and take part in programmers’ meetings to get a general view of career fields.

Note that if you are passionate about both front end and back end, becoming a full stack programmer will help you have more career opportunities. It makes sense, the more technology you know, the easier it is to get a job.

Stack Overflow reported that in their 2017 user statistics, there were 63.7% full stack programmers, 24.4% back end programmers, and 11.9% were front end programmers.


web programming

However, this also depends heavily on companies. Some companies take advantage of full stack programmers, some are divided into back and front end. Others even divided their front-end programmers into design. These developers will design and build front-end parts for the application.