Directory
1. Approaching the front end
1. Introduction to the front end:
① Technology included in the front end
②First experience of web development
2. Installation of vscode and its plug-ins
Vscode installation: Since editing html files requires a powerful editor, the widely acclaimed vscode in the industry has naturally become my first choice. Its exquisite pages and feature-rich open source plug-ins are of great convenience to our programming work.
The following recommends practical extensions for HTML development
3. How to submit code on Gitee
Gitee installation: First of all, in order to facilitate programmers’ code storage on the Internet or for open source viewing, the commonly used code management warehouse in China is Gitee
Show the author’s own gitee platform and explain how to upload the code (this question has troubled me for a long time)
1. Get closer to the front
1. Front-end introduction:
Front-end development is the process of creating front-end interfaces such as WEB pages or APPs to present to users. Through HTML, CSS, JavaScript and various derived technologies, frameworks, and solutions, the user interface interaction of Internet products is realized. (Source: Baidu Encyclopedia)
This season, I will learn HTML5, CSS, and JS languages in Lanxu to edit and design web front-end web development and other work to improve my professional skills.
①Include technology:
HTML is equivalent to a frame, which is a language to describe the structure and content of the page. Each page has its corresponding HTML file, which is the main frame of the page.
css is equivalent to adding static design elements such as color, which is directly embedded or indirectly introduced into the html frame
js achieves dynamic (interactive) effects, and is also directly embedded or introduced into the html framework
②First experience of web development:
Code Showcase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Form self-study</h1>
<form action=" ">
Nickname: <input type="text" placeholder="Please enter a nickname">
<br>
<br>
gender:
<label><input type="radio" name="sex" checked> male</label>
<label><input type="radio" name="sex"> female</label>
<br>
<br>
City:
<select>
<option>Beijing</option>
<option>Guangzhou</option>
<option selected>Shanghai</option>
<option>Changchun</option>
</select>
<br>
<br>
Specialties:
<input type="checkbox">Sing
<input type="checkbox">jump
<input type="checkbox">rap
<input type="checkbox">Basketball
<br>
<br>
self introduction:<br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<br>
<br>
<label><input type="checkbox">I have agreed to the user agreement</label>
<h2>I promise</h2>
<ul>
<li>The information is true and effective</li>
<li>sincere attitude</li>
</ul>
<!-- Two types of buttons: input & amp; & amp; button -->
<input type="submit" value="Sign up now">
<button type="reset">Reset</button>
</form>
<!-- form is a form field. Various buttons in the form work on the form in the form -->
</body>
</html>
Effect display
2. Installation of vscode and its plug-ins
Editing code requires a powerful editor, and vscode, which is widely acclaimed in the industry, has naturally become my first choice. Its exquisite Page, a feature-rich open source plug-in, is of great convenience to our programming work.
It is recommended to download from the official website: https://code.visualstudio.com/
https://code.visualstudio.com/
The following recommends practical extensions for html development
After downloading, the software defaults to English, if you can’t read it? We choose the fourth expansion icon on the left side of the software and search for Chinese
tag not indented? Doesn’t look good? Need a beautification interface: Beautify
Is it troublesome to modify the front and rear tags? Use tags to check extensions: Auto Rename Tag
Forgot to write the closing tag? Use tag closure extension: Auto Close Tag
3. How to submit code on Gitee
First of all, in order to facilitate programmers’ codes to be stored on the Internet or used for open source viewing, the commonly used code management warehouse in China is Gitee
The following is the git installation and application tutorial I recommend https://blog.csdn.net/qq_38403590/article/details/120907444?spm=1001.2014.3001.5506https:// blog.csdn.net/qq_38403590/article/details/120907444?spm=1001.2014.3001.5506
Show the author’s own gitee platform, and explain how to upload the code (this problem has troubled me for a long time). It is completely self-made and self-study, but the installation is a bit troublesome, and this method is still no problem to use
1. The first step: Learned according to the tutorial linked above: before updating the code to gitee
2. The second step: download and submit the function software tortoisegit (just click next to install) https://tortoisegit.org/download/https://tortoisegit. org/download/
3. The third step: select the file to upload and click submit
Then this interface will appear 
Just click Submit
But we haven’t fully uploaded yet, because there is no sync, we need to open Git Bush in the large file such as: (my folder) gitee_ddihan
Enter the synchronization command (note that the orign is set by yourself, and everyone’s name may be different)
git push origin (this depends on the file name you set) master
Then enter the gitee warehouse
A small green dot means the upload is successful, and you can also see the latest uploads below
At present, what I just learned by myself can almost achieve this effect. It should be quite troublesome, but I haven’t asked anyone for advice, so the above is just my humble opinion. I hope to see seniors and friends at the same level to revise and correct me. My lord Grateful!
3.25 update
tmd, it turned out to be so simple, click the button file in the upper right corner of the gitee warehouse, click submit, and then drag and drop the file in, it doesn’t have to be so troublesome, send it! ! !