It took some time for pure Xiaobai to learn front-end development, and it took some time to find learning materials. The subsequent configuration environment also took a lot of detours. Here, I will sort out the learning materials of the past few days and make a simple summary.
1. Preliminary understanding of vue
Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications.
2. Basic knowledge required before learning vue
2.1HTML
Reference link: Introduction to html
HTML is a language used to describe web pages.
- HTML stands for Hypertext Markup Language: HyperText Markup Language
- HTML is not a programming language, but a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
- HTML documents contain HTML tags and text content
- HTML documents are also called web pages
2.2CSS
Reference link: Introduction to css
CSS refers to cascading style sheets (Cascading Style Sheets).
- Styles define how HTML elements are displayed
- Styles are usually stored in stylesheets
- Adding styles to HTML 4.0 is to solve the problem of separation of content and presentation
- External style sheets can greatly improve work efficiency
- External style sheets are usually stored in CSS files
- Multiple style definitions can be cascaded into one
2.3 JavaScript
Reference link: Introduction to js
JavaScript is a scripting language.
- JavaScript is a lightweight programming language
- JavaScript is programming code that can be inserted into HTML pages
- JavaScript inserted into an HTML page can be executed by all modern browsers
2.4 Relationship between HTML, CSS, JavaScript and Vue
A webpage is mainly composed of three parts: Structure, Presentation and Behavior:
- HTML - structure, determines the structure and content ("what") of a web page
- CSS - Presentation (Style), sets the presentation style ("what it looks like") of a web page
- JavaScript (JS) - Behavior, controls the behavior of the web page ("what to do")
3. Hands-on web development
Reference link: Learning web development
After a brief understanding of the front-end Three Musketeers, you need to practice to increase your understanding. You can follow the above link to simply do a web development.
It is recommended to install vscode as a development software, which is easy to use.
images store the called pictures,
.html files are the main content of web development,
styles are css, which are used to modify the web,
scripts are javascript, and control the web.
The final web display result is shown in the figure below.
The above can simply have a preliminary understanding of the front end, and the above four links are very useful in my personal opinion.
Summary:
html learning link
css learning link
js learning link
learning web development