Primer mes, HTML+CSS
Horario de la semana 1:
Es el primer paso para comprender la entrada front-end. Debe aprender a instalar y usar complementos IDE, dominar la aplicación de la gramática H5 y las etiquetas básicas, y puede crear páginas simples esta semana después de aprender.
- 1. Comprender el desarrollo de la industria front-end
- 2. Comprender la importancia de HTML5 para las páginas web
- 3. Aprenda etiquetas/atributos comunes y construya estructuras
- 4. Lista maestra desordenada/lista ordenada/lista personalizada
- 5. Aprenda etiquetas/atributos de formulario y cree estructuras de formulario comunes
- 6. Domine las reglas de anidamiento de etiquetas/uso de elementos en línea/elementos de bloque
- 7. Aprender el uso de las herramientas de desarrollo de VSCode y ser capaz de crear páginas web sencillas
Recursos de aprendizaje:
Curso: Front-end HTML5+CSS3+Mobile Web Complete Course
Programación de la segunda semana:
CSS3 es el "esteticista" de las páginas web. Esta semana comenzaré a aprender estilos CSS3, dominar la estructura gramatical, los selectores, los modelos de cajas, la configuración de estilos de texto y fuentes, y ser capaz de desarrollar estilos simples para páginas web.
- 1. Domina la sintaxis básica y el uso de CSS3
- 2. Domine varios tipos de selectores/atributos de estilo de CSS3 para un desarrollo rápido
- 3. Aprende atributos comunes como texto y fuentes
- 4. Explicar el conocimiento básico del modelo de caja y comprender los principios en profundidad.
- 5. Domine la configuración y conversión de elementos en línea y elementos a nivel de bloque
Recursos de aprendizaje:
Curso: Front-end HTML5+CSS3+Mobile Web Complete Course
Horario de la semana 3:
El desarrollo de estilo simple no es suficiente, dominando la flotación, el posicionamiento, el borde, el estilo de fondo y la conversión 2D y 3D, así como las habilidades de diseño. Puede dibujar gráficos especiales y desarrollar efectos de página web más hermosos.
- 1. El conocimiento central de la flotación y el posicionamiento se puede utilizar de manera flexible para realizar el diseño de las páginas web.
- 2. Métodos de diseño comunes para resolver problemas de diseño comunes
- 3. Cómo dibujar gráficos especiales como bordes redondeados/marcos de sombras/bordes de imágenes
- 4. Domine la distorsión/cambio/rotación de elementos y decore HTML más libremente
- 5. Diferencias entre especificaciones BFC y navegadores
Horario de la semana 4:
CSS3 también puede lograr efectos dinámicos geniales en la página web. Combinado con el proyecto "Travel Network" en línea de nivel empresarial, y aplicando de manera integral el conocimiento aprendido antes, se completa el diseño de la página de inicio de Qyer y el desarrollo de efectos especiales de animación CSS3.
- 1. Gran proyecto: en combinación con H5/CSS3, complete el desarrollo del diseño de la página de inicio de PC Little Rabbit Fairy
- 2. Domina diferentes estructuras y técnicas de diseño
- 3. Domina el uso de la transición y el efecto de relajación, y realiza pequeños casos comunes
- 4. Use efectos de animación para lograr efectos de animación geniales
Resumen del horario de clases del primer mes:
¡El horario de clases detallado de un mes, combinado con el arreglo de tiempo del mapa mental para el aprendizaje!
| Catálogo de cursos | detalles |
|---|---|
| Conocimiento de HTML | 1. Sintaxis básica de HTML2 . Etiquetas de composición tipográfica de HTML3. Ruta absoluta y ruta relativa 4. Etiquetas multimedia de HTML5. Etiquetas de enlace de HTML6. Casos: casos de reclutamiento, casos de palabras candentes de hoy |
| Conceptos básicos de HTML | 1. Etiquetas de lista en HTML 2. Etiquetas de tabla en HTML 3. Etiquetas de serie de formularios en HTML 4. Etiquetas de diseño semántico en HTML 5. Entidades de caracteres en HTML 6. Casos: caso de formulario de información de estudiante, caso de formulario de registro de miembro |
| Selector básico CSS + estilo de texto de fuente | 1. Método de introducción de CSS 2. Etiqueta CSS, clase, ID, selector de comodín 3. Estilos relacionados con fuentes CSS 4. Estilos relacionados con texto CSS 5. Habilidades de centrado horizontal CSS 6. Uso de herramientas de depuración de Chrome 7. Casos: página web de noticias estuche, estuche centrador de tarjetas |
| Selector de CSS avanzado + atributos relacionados con el fondo + modo de visualización de elementos + tres características principales | 1. Descendiente, descendiente, unión, selector de intersección de CSS 2. Sintaxis básica de Emmet 3. Selector de pseudoclase flotante 4. Propiedades de CSS relacionadas con el fondo 5. Tres modos de visualización de elementos comunes 6. Tres características principales de CSS: Herencia 7. Tres características principales de CSS: cascada 8. Caso: colorido caso de navegación |
| Modelo de caja CSS | 1. Las tres características principales de CSS: prioridad 2. El método de cálculo de superposición de peso de CSS 3. Los componentes del modelo de caja 4. Las funciones y la implementación del código del borde, margen interior y margen exterior del modelo de caja 5. Colapso fenómeno de los márgenes exteriores 6. Caso: caso de navegación Sina, caso de lista de noticias web |
| flotador css | 1. Selector de pseudoclase estructural CSS 2. Uso básico de pseudoelementos 3. Reglas de disposición del flujo estándar 4. Características y uso de flotante 5. Métodos comunes para borrar flotante 6. Casos: caso de diseño de Xiaomi, caso de navegación de página web |
| Posicionamiento CSS + Decoración | 1. Las características y el uso del posicionamiento 2. Alineación vertical 3. Las esquinas redondeadas de los bordes completan el efecto del círculo perfecto y el botón de cápsula 4. El elemento muestra el efecto de cambio de ocultación 5. CSS completa el efecto del triángulo 6. Selector de pseudoclase de enlace CSS 7. Selector de pseudoclase CSS Focus 8. Selector de atributo CSS 9. Caso: caso del módulo de tarjeta icono activo, caso de centrado de código bidimensional de navegación |
| Prediseño de proyecto fresco de conejito + construcción de proyecto | 1. El uso de sprites 2. Atributos de tamaño de imagen de fondo CSS 3. Texto y efectos de sombra de texto 4. Tres etiquetas principales de SEO 5. Construcción de la estructura del proyecto y estilos públicos básicos 6. Combate real: Realice el módulo de encabezado de "Little Rabbit Fresh Project " desarrollar |
| Xiaotuxian encabezado+pie de página+contenido principal | 1. Combate real: Realice el desarrollo del módulo de cabecera del "Proyecto Little Rabbit Xianer" 2. Combate real: Realice el desarrollo del módulo de entrada xtx en la entrada del sitio web del "Proyecto Little Rabbit Xianer" 3. Combate real: Realice el "Proyecto Little Rabbit Xianer" Rabbit Xianer Project" panel de cosas buenas frescas xtx -desarrollo de módulos de nuevos productos |
| CSS3 Avanzado | 1. Transformación de plano 2. Transformación de espacio 3. Animación |
| Modelo de diseño flexible | 1. Uso del modelo de diseño Flex 2. Proyecto: Xiaotuxianer-Mobile 3. Proyecto: Xiaotuxianer-PC |
| Solución de Adaptación Web Móvil | 1. Rem uso básico 2. Rem + adaptación media query 3. Rem + adaptación flexible 4. Principio de adaptación Rem 5. Proyecto: parque de atracciones 6. Uso básico vw/vh 7. Principio de adaptación vw/vh 8. Proyecto: Estación B |
| Sensible | 1. Uso básico de consulta de medios 2. Consulta de medios para lograr efectos de página web receptivos 3. Uso básico del marco Bootstrap 4. Sistema de cuadrícula del marco Bootstrap 5. Proyecto: Tencent Full Terminal |
Segundo mes, JavaScript
Horario de la semana 5
JS es el primer paso en la programación web. Esta semana, comencé a aprender el lenguaje de programación JS y dominé la estructura gramatical básica, la declaración de variables y las reglas de nomenclatura, los tipos de datos, las expresiones y los operadores. Después de aprender esta semana, puedo escribir código JS.
- 1. Domina la sintaxis básica de JS
- 2. Dominar el mecanismo de declaración y promoción de variables JS
- 3. Operaciones y expresiones del operador Master JS
- 4. Aprenda el uso de tipos de datos básicos y tipos de datos complejos
- 5. Comprensión profunda de la conversión y detección de tipos de datos
Horario de la semana 6
Continúe estudiando el lenguaje de programación JS en profundidad esta semana, domine las declaraciones de ramificación condicional, las declaraciones de bucle y las matrices, y después de aprender el contenido de esta semana, puede usar código conciso para lograr funciones poderosas.
- 1. Domine el uso de instrucciones de ramificación condicional como if, if elseif y switch
- 2. Domine el uso de sentencias de bucle for, while, do while
- 3. Domine el uso básico y los métodos comunes de las matrices
- 4. Características y aplicaciones de las sentencias break y continue
- 5. Usa el conocimiento de matrices para aprender algoritmos básicos
- 6. Use una lógica simple para implementar una lógica de negocios compleja
Horario de la semana 7
Si desea lograr efectos dinámicos más deslumbrantes, es muy importante manipular los elementos de la página web. Al dominar la programación de funciones, las operaciones DOM, los eventos y los objetos BOM, puede lograr los típicos efectos de activación e interacción dinámica.
- 1. Master operaciones DOM y eventos DOM
- 2. Domine los conceptos básicos de funciones y aplicaciones avanzadas de funciones
- 3. Domine el modelo de objetos del navegador BOM y "diálogo" con el navegador
- 4. Encapsulación de funciones maestras para mejorar la calidad de la codificación
Horario de la semana 8:
La orientación a objetos es una idea muy importante en el desarrollo. Esta semana comenzaremos a utilizar el pensamiento orientado a objetos para el desarrollo de programas, escribir código de alta calidad y resolver problemas de colaboración de programación de nivel empresarial.
- 1. Aprende las reglas y el uso de este
- 2. Dominar el concepto de constructor y su creación, llamado y uso
- 3. Comprender la relación y aplicación de prototipos y cadenas de prototipos
- 4. Cierre y aplicación del alcance
- 5. Familiarizado con el pensamiento orientado a objetos para la programación DOM
- 6. Domine el método de programación modular JS y escriba código de alta calidad
- 7. Domine las habilidades de desarrollo modular y resuelva problemas de colaboración de programación a nivel empresarial
- 8. El caso de la serpiente codiciosa
Horario de la semana 9:
En la novena semana, puede usar el proyecto de comercio electrónico para completar un desarrollo práctico, de 0 a 1 para completar una página web de turismo de efectos múltiples con animación CSS3 y efectos especiales JS. Domine los métodos comunes de desarrollo de páginas web y varios esquemas de implementación de efectos especiales en las empresas.
En el curso anterior, el caso que presentamos fue el desarrollo del sitio web de Jingdong;
- 1. Combinación de H5/CSS3/JS para completar el desarrollo de efectos especiales de página de inicio en el curso de PC
- 2. Análisis de los efectos de animación del proyecto para ayudar a clasificar las ideas más rápido
- 3. Realice los efectos especiales típicos de JS: carrusel de banners, animación de regreso al principio, menú vertical
- 4. Aprenda expresiones regulares y complete la verificación funcional de números de teléfonos móviles comunes, direcciones de correo electrónico, nombres, etc.
- 5. Completar el desarrollo del sitio web de Jingdong
Horario de clase:
| escenario | detalles |
|---|---|
| Sintaxis básica de JavaScript | Variables, tipos de datos, operadores, transferencias de tipos, funciones, objetos, control de procesos, matrices, matemáticas, funciones integradas |
| API web | Entorno de alojamiento, búsqueda de nodos, operación de nodos, relación de nodos, evento, flujo de eventos, delegación de eventos, función intermitente, función de orden superior, pseudoarreglo, entorno de ejecución, función autoejecutable, espacio de nombres, clasificación, función de retraso, regularización, formulario , Propiedades personalizadas, redibujado, reflujo, precarga, recorte perezoso, ciclo de vida; |
| JavaScriptAvanzado | Constructor literal, objeto único, orientado a objetos, prototipo, clase, getter, setter, curry, desestructuración, función de flecha, Object, Array, const, modo estricto, cierre |
El tercer mes, arreglo de estudio ES6.
Para agregar, el conocimiento modular comienza desde el episodio 228 en el enlace anterior, y puede ver el episodio 258 desde el episodio 228 .
Horario de la semana 10:
ES6 es una nueva especificación de sintaxis para JavaScript, que hace que el código sea más estandarizado, altamente legible y fácil de operar. Esta semana comenzará el aprendizaje de ES6, que es un paso necesario para aprender el front-end. Después de dominar el conocimiento relacionado con ES6, puede escribir código de manera más conveniente y mejorar la eficiencia del desarrollo
- 1. Uso y gramática básica de ES6
- 2. Domina el uso y diferenciación de variables y constantes en ES6
- 3. Aprenda los literales de cadena que se pueden incrustar en expresiones: cadenas de plantilla
- 4. Domina las características y aplicaciones de las funciones de flecha
- 5. Domina cómo analizar automáticamente valores en matrices u objetos
- 6. Domina el uso de los valores por defecto de los parámetros
- 7. Comprender la expresión más concisa y flexible de los literales de objetos
Horario de estudio de la semana 11
Esta semana, continuaré aprendiendo los conceptos básicos de ES6. Al estudiar más a fondo las nuevas características introducidas por ES6, comprenderé los nuevos métodos de ES6, dominaré los nuevos tipos de recopilación y tendré una comprensión más profunda del recorrido de datos.
- 1. Aprende de la comparación entre los parámetros restantes y el operador de expansión
- 2. Comprender cómo reducir el uso de lógica u operadores
- 3. Comprender la nueva estructura de datos en ES6
- 4. Comprender los nuevos métodos en ES6
- 5. Comprender el principio de recorrido y aprender nuevos métodos de bucle
- 6. Comprender cómo usar ES6 Promise para la programación asíncrona
- 7. Dominar el uso de la gramática básica de Class
- 8. Domine métodos de herencia de objetos más claros y convenientes e ideas avanzadas orientadas a objetos
Después de escribir aquí, ya no planificaré para usted según la semana, porque todos ingresaron con éxito al front-end después de aprender aquí. Puede organizar el próximo tiempo de estudio usted mismo, solo necesita lo que necesitamos aprender a continuación.
El cuarto mes, Ajax para el aprendizaje avanzado front-end
Habilidades necesarias para la interfaz web Ajax/Git/node.js/mysql/vue.js tutorial detallado
| Lo que hay que aprender en esta etapa. |
|---|
| El papel de Ajax, Ajax nativo, síncrono y asíncrono, protocolo http, encapsulación ajax |
| Historial de git, git y svn, uso básico de git, sucursales, almacenes remotos, conflictos y soluciones de git |
| Inicialización de proyectos, desarrollo de separación de front-end y back-end, uso de herramientas, registro/inicio/salida de usuarios, etc. |
| Introducción a ES6, nueva sintaxis, extensión de objeto incorporada, etc. |
| Instalación del entorno Node.js, cómo usar node.Js para ejecutar el código... Ver el curso para más detalles |
| Sitios web estáticos y dinámicos, uso de módulos http, principio de respuesta a solicitudes, protocolo HTTP, procesamiento de solicitudes de páginas, etc. |
| El concepto de MySQL, adiciones básicas, eliminaciones, modificaciones, etc., y el uso de Node.js para manipular Mysql |
| El concepto de instalación rápida, rápida, enrutamiento de back-end, alojamiento de recursos estáticos, etc.; |
Habilidades necesarias para la interfaz web Ajax/Git/node.js/mysql/vue.js tutorial detallado
| Contenido importante |
|---|
| Conceptos básicos de Git |
| instalar y configurar |
| operación básica |
| GitHub |
| almacén remoto |
| Acceso SSH |
| operación de la sucursal local |
Explique de manera integral y sistemática los conceptos más básicos y más importantes de Node.js, optimice el código del proyecto en función de ideas de desarrollo modular, escriba código eficiente y sólido, y cultive el pensamiento de programación de Node.js.
Habilidades necesarias para la interfaz web Ajax/Git/node.js/mysql/vue.js tutorial detallado
| conceptos básicos de nodos |
|---|
| Configuración del entorno |
| módulo fs |
| módulo de ruta |
| módulo hettp |
| Modular |
| comúnJS |
| Clasificación de módulos |
| Alcance del módulo, uso compartido de miembros, mecanismo de carga |
A continuación, aprenda el uso básico de la base de datos:
Habilidades necesarias para la interfaz web Ajax/Git/node.js/mysql/vue.js tutorial detallado
Quinto mes, marco popular
Luego están los marcos populares:
2021最全最新版VUE2.0+VUE3.0全套教程（中部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
2021最全最新版VUE2.0+VUE3.0全套教程（下部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
| 课程亮点 |
|---|
| 工程化开发，现在市场还是直接引入 vue.js 到 html 页面， 开发中不用这个方式，我们是直接按照工程化的方式进行讲解。 |
| 案例驱动教学，精心设计的 4 大案例，保证每一位学生听得懂、写得出、能实践。 |
| 深入浅出地讲解 Vue2 / Vue3 中的指令、组件、侦听器与计算属性，以及生命周期、数据共享、动态组件、插槽、路由等核心技术点。 |
| 同时，涵盖了 axios 在 Vue 项目中的最佳实践方案；以及 Vant 组件库的主题自定制方案。 |
| 最后一天的 Vue 基础收尾案例，助力学生更加轻松的过渡到 Vue 项目课的学习。 |
Vue 3.0 官方文档(英文) | Vue 3.0 官方文档中文 |
Composition-API手册 | Vuex 4.0 | Vue3 新动态
第六个月、小程序-uni-app
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
6.2 uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
¡El mes pasado! acuerdo de estudio
Esta etapa es para comprender profundamente la idea de la creación de componentes y el desarrollo modular, uno de los tres marcos principales, para cumplir con los requisitos laborales en la contratación empresarial.
TypeScript Básico + Avanzado
Recomendación de tutorial popular de front-end | Aprende TypeScript desde cero en cinco días
Preparación de la entrevista:
Las entrevistas son un paso clave para un empleo exitoso. Esta semana incluye conceptos básicos de diseño, sitios de prueba comunes como JS y ES6, y análisis de preguntas de entrevistas clásicas. Lo llevará a unir conocimientos, dominar habilidades de entrevistas frontales y aprobar entrevistas de habilidades sin problemas.
- 1. H5 semántica/diseño CSS/posicionamiento/estilo gráfico/habilidades de resolución de problemas de entrevista receptiva
- 2. Cinco principios de prototipo y cadena de prototipos y habilidades de resolución de problemas de entrevistas
- 3. Entreviste las habilidades de resolución de problemas para tipos/cálculos/constructores de variables
- 4. Contexto de ejecución de alcance y cierre/esta entrevista habilidades para resolver problemas
- 5. Habilidades de resolución de problemas de entrevistas de objetos integradas asincrónicas y de un solo subproceso/común
- 6. DOM esencia/operación de nodo/entrevista de operación de BOM habilidades de resolución de problemas
- 7. AJAX y habilidades de entrevista de solución de eventos
También se requieren marcos, programas pequeños y contenido relacionado completo para las entrevistas. Esta semana, lo llevaré a clasificar los sitios de prueba comunes y el análisis de las preguntas clásicas de la entrevista, aclarar la metodología para resolver las preguntas de la entrevista y completar el sprint del último centímetro.
- 1. Principio de Vue.js/habilidades de resolución de problemas de la entrevista MVVM
- 2. Ciclo de vida del componente / entrevista de transferencia de valor del componente padre-hijo Habilidades para resolver problemas
- 3. Habilidades de resolución de problemas de entrevistas de lógica pública de carga/caché/extracción asíncronas de componentes
- 4. Reaccionar gramática básica/entrevista de eventos habilidades para resolver problemas
- 5. Ciclo de vida del componente de reacción/entrevista de comunicación del componente padre-hijo habilidades para resolver problemas
- 6. La diferencia entre los componentes de la función React y los componentes de la clase Entreviste las habilidades de resolución de problemas
- 7. Habilidades de resolución de problemas de entrevistas Redux/react-router