1. Welcome
With the Front-end Development Beginner Growth Program V1, you’ll gain experience writing HTML, CSS, and JavaScript code, learn how to save your code with Git commands, and use Node.js to serve your website.
The following is an outline of the content involved in the project:
- An overview of the
- HTML
- CSS
- HTML and CSS
- JavaScript
- HTML,CSS and JavaScript
- Ajax
- Use third-party libraries
- Git and Bash
- Node.js
- To deploy the App
As the beginning chapter of the Front-end Development Beginner Growth Plan V1, I’ll introduce you to the basics of becoming a Web developer.
Let’s get started.
2. What will we learn
In summary, we will learn the basics needed to create a website.
2.1 Glossary
One of the first difficulties in learning programming may be that you need to understand the terminology used in programming development.
This project is mainly for Web front-end development, so we really need to know what some words mean.
Examples include hyperlinks, cascading style sheets, functions, scopes, and so on.
However, some terms can be ignored at the beginning of learning, such as Monad.
The point is that we will learn several languages.
It is important to note that the language used in creating a website does not have to be a programming language, it may just be a computer language, such as our HTML and CSS.
We will definitely learn about these two guys later, and they are often referred to as markup languages and style languages.
2.2 The process of creating a website
We will use the analogy of building a house to discuss and illustrate the process of creating a website.
This introduces the three languages involved in creating websites and their respective roles.
2.2.1 structures,
To build a house, you need to use tools (such as text editors, browsers, terminals).
With tools, we need some materials to build the house, like rectangular square bricks and long bars of steel, and we need to put these things together to build the structure of the house.
Square bricks, steel bars are HTML (Hypertext Markup Language).
HTML will be used to build our entire house infrastructure.
A house made only of square bricks and steel would look very shabby, with no color and no decorations.
This means that HTML – only websites don’t look good.
2.2.2 decorate
In order to make the house look good, we need to design a decoration plan, the decoration plan is some rules, such as: this square brick here, the inside of the wall is light blue, where should the window be installed, here should be a vase.
The rules also involve judgment, such as switching to a two-by-four brick if the space doesn’t fit a four-by-eight square.
This design solution is CSS (Cascading style sheets) in our website.
CSS is a set of rules that define the style of an HTML element that meets certain conditions.
For example, we can use CSS to make a sentence in an article blue.
2.2.3 Smart home
Now we have a reasonably built and beautiful looking house.
It looks good, but in order to make the house more comfortable to live in, we need to install some tools in the house.
Like a smart home device.
When we enter, the lights automatically turn on, the air conditioner automatically turns on to cool down, and the kitchen automatically starts cooking.
By installing these tools, we’re essentially adding behavior to the house, which is JavaScript.
As with the smart home, JavaScript is not required for our web pages.
Some web pages don’t need JavaScript at all because they only need to display content without actual interaction.
We need to mention one HTML thing here, which is the jump to the page, we just need to use the link, this is HTML content, we don’t need JavaScript.
2.2.4 Online shopping and take-out
Well, now we can live in a smart home.
Here we can imagine a common behavior: shopping online or ordering takeout.
It’s raining cats and dogs, and I really need a cup of coffee right now.
At this point, we can contact the coffee shop outside and ask them to make a cup for us and send it to us.
The coffee shop here is like our server.
A coffee shop can serve many different customers as long as the coffee shop makes the coffee according to the customer’s request (request) and then delivers it to each customer according to the customer’s address (response).
In addition, we know that there are many different brands of coffee shops in real life, such as Starbucks and Luckin.
There are also convenience stores like FamilyMart where you can buy coffee.
The different coffee shop brands are like the various languages used to write server programs, such as Java, Python, and Go.
The important thing to know here is that JavaScript can also be used to build our back end, which is our Node.js.
There is no doubt that Node.js has become an important part of our Web front-end development.
2.2.5 The house is built
HTML is the structure of the house. It contains all the text, as well as various related static resources (such as images, audio, video, etc.).
CSS is the house after the completion of the decoration design scheme. It contains all the content of style rules, such as specifying sizes, colors, fonts, and so on.
HTML and CSS describe content and the style rules that apply to it.
JavaScript is the smart home of the house, but it doesn’t have to be. With JavaScript we can have predefined behaviors in the house, and even change HTML and CSS to respond to user behavior.
The coffee shop outside is like a back-end server in our product.
We make our request to the coffee shop, and the coffee shop will respond to our request and deliver the coffee as requested.
Now, the house is built.
But don’t forget, building a house first requires tools.
3. The tool
3.1 an overview of the
Currently, I use macOS, but most of the tools I suggest are cross-platform, which means they work on other systems like Windows or Linux.
Every developer has a very strong personal opinion about the toolset they use, so if you ask someone for their opinion, they’ll usually tell you that they used the tool for some reason, blah, blah, blah.
My advice is to keep an open mind, because you need to find something that works for you.
At the same time, I don’t want you to be too rebellious, but there’s always a reason when people are using this tool to do the same thing.
You should try it first, see why it’s popular, and then decide if you want to make a long-term investment in it.
3.2 browser
For front-end development, the first tool you need to install should be a browser.
You may not realize it, but developer tools are built into the browser.
These tools can help you understand code, debug it (find errors), and even experiment with it directly on a running website.
For browsers, my choices are Chrome, Firefox, Safari, and Edge, which are all browsers with powerful developer tools.
If you’re already using one of these, you can continue to use them, but if you haven’t, it’s recommended that you try Chrome first.
3.3 the editor
Which editor is best? This is a contentious issue.
There are a lot of opinions that can interfere with your choice, but I think it all depends on what you want to do with the editor and whether it’s right for you.
The editor in question includes both a text editor and an IDE.
IDE (Integrated Development Environment), in short, offers more complete development functionality than a text editor.
Many text editors today offer capabilities beyond plain text editing, so a more accurate term for a text editor is now a code editor.
For Web front-end development, I choose Visual Studio Code (abbreviated VSCode or Code).
It is an open source, cross-platform text editor from Microsoft.
It’s really good, it has a lot of convenience and powerful features, and the community is thriving at the moment.
VSCode has a great balance between a text editor and an IDE.
If you want more power and complete functionality, you can also choose an IDE.
WebStorm is probably the best IDE for Web front-end development today.
Two more editors need special mention: vi and Emacs.
Their feature is that when we master them, we can program using only the keyboard without the mouse.
But they have a steep learning curve, so the advice here is to watch.
If you are interested and have the time, then study them (study Vi first).
3.4 the terminal
In this course, you will work with terminals (the terminal emulator we will mention below).
Yes, the one that opens with a black background and a blinking cursor.
The first thing to stress is that it’s not as hard to understand as it looks.
Before you touch a Terminal, you need to understand two concepts: the shell and the Terminal Emulator.
The terminal emulator is really just a window in the operating system and does not execute or understand any of the instructions we give it.
What executes our instructions is actually a Shell inside the terminal emulator.
There are many kinds of shells, the most common being the Bash Shell.
Terminal emulators and shells are mainly responsible for dealing with operating systems, so different operating systems provide different terminal emulators and shells.
If the above is starting to confuse you, then stop, because they are not the main content right now, and we will learn more about them later.
For terminal emulators, it doesn’t matter which one we use.
- For macOS, I personally recommend iTerm2.
- For Windows, I recommend trying Hyper or Cmder, one fun and one powerful. Maybe you can try Windows Terminal, but I haven’t used it much and I don’t know what the experience is.
- For Linux, use the default.
As for which Shell to use, I currently use ZSH and fish is said to be good, but I haven’t tried it yet.
If you’re just getting started, I recommend using Bash Shell first, which is usually the default Shell provided by terminal emulators.
3. Recommended learning resources
If I’m looking for anything to do with HTML, CSS, or JavaScript, my first choice is definitely Mozilla’s MDN documentation.
For libraries or frameworks such as Bootstrap, React, Vue, Angular, etc., visit their GitHub pages or official documentation to learn about them.
4. Tips for successful programming
4.1 Start learning
First, don’t listen to too many sounds before you start studying.
When you want to learn programming, for example, you’re told you need to be good at math and good at English.
The question here is, can’t we improve in math and English while learning to program?
In reality, there are already many successful developers who are not proficient in math and English, such as me.
I’ve also seen many non-computer majors make it into programming and succeed.
So if you want to learn to program, don’t let your preconceived notions hold you back.
Just start learning.
4.2 Solve the problem and move on
Keep in mind that learning to program is not easy, even difficult.
Just like learning a foreign language at the beginning, it is not easy to communicate with others from touch to use.
We have to learn enough to understand what programming is all about.
It’s easy to get frustrated, especially if you feel like you’ve learned a lot but still don’t have a clue.
All you can do is keep trying. Solve problems and then continue until you can complete a complete project.
4.3 Using search Engines
We should use search engines more.
I can safely say that all programmers in the world are constantly using search engines to find the information they need.
Using a search engine to solve a problem is not cheating on a test, it’s using a skill.
Yes, in the process of learning, you need to learn how to use search engines to solve problems.
Skills are acquired through repeated imitation and deliberate practice.
Programming is a skill.
4.4 Imitation and practice
Learning to program takes imitation and practice.
The importance of practice should not be overemphasized here, as you can see and hear advice about it everywhere.
What I’m trying to say here is, don’t always feel too burdened to use copy and paste.
When you have a problem, check out StackOverflow.
By reading other people’s solutions, analyzing them, and copying and pasting the answers we think can solve the problems, our program runs successfully.
And then understand how it works, which is not always a bad idea.
Learning to program does require constant hands-on practice, but there is so much to learn these days that everyone’s time is scarce.
In addition to imitation and practice, we also become better and better by constantly solving problems.
4.5 Don’t try to understand everything at once
When you study a certain knowledge point, you always want to fully understand what is happening.
Sometimes that’s not a good thing because it’s hard to strike a balance here.
The way I look at it is, if you have enough time, sometimes you really just need to know that it’s there to make it work, and then you can look at it when you need to dig into it or when you have some free time.
We have a limited amount of time to learn, so you need to remind yourself that there is more to learn. If you want to dig deeper, then we can always find time later.
5. To summarize
Again, learning to program is hard and requires a lot of effort.
I hope you found this course helpful.
This is the first part of our primary growth plan, which is relatively easy.
If you’re ready, let’s move on.
I wish you success!
Front-end Development Primary Growth Plan V1 is being continuously updated.
rushuni
2021.02.09
