Antes de conversar con una amiga, ella y yo dijimos que los dos pasantes de su empresa fueron reclutados en el mismo nivel, pero que han cambiado muchas cosas en un mes. Uno de los pasantes está progresando rápidamente, mientras que el otro avanza lentamente y Situación laboral. Ella también está empeorando. Posteriormente, analizó que la principal brecha está en el interés. El interés es feliz cuando se estudia y se trabaja, y por supuesto el progreso también es rápido. Es lo mismo para todos aprender el front-end. Es especialmente importante entender este campo y cultivar el interés en aprender, lo que significa qué tan lejos puede llegar en el front-end road.
El camino debe recorrerse paso a paso, y la comida debe comerse bocado a bocado. Ahora permítanme ordenar la ruta de aprendizaje para todos.
Etapa primaria
1. Introducción a Photoshop
Conocimientos básicos de procesamiento de imágenes, conocimientos básicos de procesamiento de imágenes, resolución, modo de color de imagen y formatos de archivo de imagen de uso común.
2. Principios básicos de Internet
Los principios básicos de Internet, el concepto de servidores, navegadores y solicitudes HTTP.
3.HTML
Introducción a las herramientas de programación, introducción a HTML. Etiquetas semánticas HTML, etiquetas p y etiquetas de la serie h.
4. Conceptos básicos y habilidades avanzadas de CSS Introducción a CSS, selector.
Atributos de texto, atributos de color.
5. Proyecto de producción de sitios web estáticos
El concepto de optimización de motores de búsqueda, habilidades comunes de SEO de páginas y aprender a crear páginas con estilo.
icono de fuente iconfont. Algunas técnicas CSS avanzadas comunes, como margen negativo, técnica de engarzado, puerta corredera, técnica de columna autoportante. Conozca sitios web de diseño más complejo, banners, fondos grandes y otros métodos populares de producción de sitios web.
Etapa intermedia
6. Conceptos básicos de JavaScript
Declaraciones, orden de ejecución, estructura léxica, identificadores, palabras clave, variables, constantes, declaraciones de alerta y consola de consola. Valores y variables, números, texto, booleano, nulo e indefinido. Expresiones y operadores, una descripción general de los operadores.
7. Programación DOM de JavaScript
Descripción general de eventos y procesamiento de eventos, evento y nombre de evento, eventos comunes, llamada al controlador de eventos, modelo de evento DOM, flujo de evento, objeto de evento, eventos de registro y eliminación. Atributos, métodos y eventos comunes y datos de salida de objetos de documento.
8. Efectos especiales de la página JQuery
Objeto jQuery y objeto DOM, selector jQ, operación CSS, establecer y obtener HTML, texto y valor.
9. JavaScript avanzado
Espacio de nombres, expansión de objetos, arreglo, mecanismo introducido por los frameworks convencionales-domReady, manejo sin conflictos. Módulo de idioma, extensión y reparación de cadenas, extensión y reparación de matrices, extensión y reparación de valores numéricos, extensión y reparación de funciones, extensión y reparación de fechas, rastreo del navegador y detección de funciones, juicio del navegador, detección de soporte de eventos y detección de soporte de estilo. Fábricas de clases, soporte de JavaScript para clases y realización de varias fábricas de clases.
10. HTML5 y CSS3
Descripción general de HTML5, nuevas características de HTML5, organización de HTML5, composición de HTML5, características de páginas HTML5, base HTML, atributos globales de HTML5, otras funciones de HTML5, clasificación de elementos HTML5. Formulario HTML5 real, nuevo tipo de entrada de entrada.
11. Web para móviles y páginas adaptables
Viewport, zoom, resolución, resolución física, relación de píxeles del dispositivo, dppx y dpi, meta viewport. Diseño de porcentaje, diseño de flujo, nuevo modelo de caja de flujo CSS3.
12.JavaScript orientado a objetos
Cree objetos, consulte y establezca propiedades, elimine propiedades, detecte propiedades, enumere propiedades, captadores y definidores de propiedades, propiedades de propiedades, tres propiedades de objetos, objetos serializados y métodos de objeto. Clases y módulos, clases y prototipos, clases y constructores, extensiones de clase, clases y tipos, subclases. Prototipo, creación de instancias y prototipo, instanciación de objetos, evaluación de objetos por constructor, herencia y cadena de prototipos, constructor y objeto prototipo, constructor, objeto prototipo, atributo [[Prototipo]], uso de objeto prototipo en constructor, cambio de objetos prototipo, objetos prototipo de construido -en objetos.
13. Conocimiento del servidor e introducción a PHP
La diferencia entre el lenguaje de back-end y el lenguaje de front-end. Conozca las ventajas de PHP, el lenguaje PHP, las nuevas funcionalidades de PHP 5, la tendencia de desarrollo de PHP y los campos de aplicación de PHP.
14.Ajax
Descripción general de Ajax y experiencia inicial de Ajax, introducción a la tecnología Ajax, explicación detallada de los objetos XMLHttpRequest, carga dinámica y visualización de datos, descripción general de los objetos XMLHttpRequest, métodos, atributos, envío de solicitudes, solicitudes GET y POST, ciclos de tiempo de ejecución, uso de respuestas JSON, y encapsulación de paquetes de utilidades Ajax.
15.Lonas y juegos para móviles
Dibujo de lienzo, conocimientos básicos, comprensión del sistema de coordenadas del lienzo, obtención del contexto del entorno del lienzo, comprensión de la ruta, API de operación de la ruta, dibujo de líneas, dibujo de rectángulos, dibujo de arcos, dibujo de curvas Bezier, atributos de línea, colores de línea, relleno, estado de dibujo.
Posteriormente, la etapa avanzada estará involucrada El proceso de aprendizaje de front-end es un proceso que cambia gradualmente de "difícil" a "simple", y luego de "simple" a "difícil". La primera mitad es el proceso de comenzar y la segunda mitad es el proceso de convertirse en una gran vaca. En resumen, solo hay ocho palabras en la parte delantera del aprendizaje: dirección clara e interés dominado.
Por fin
El aprendizaje inicial es un largo camino. Lo que tenemos que aprender no es solo la tecnología superficial, sino también la capa inferior para comprender los siguientes principios. Solo así podemos mejorar nuestra competitividad. En el mundo altamente competitivo de hoy.
Un viaje de mil millas comienza con un solo paso, espero que ustedes y yo nos animemos mutuamente.
Los tres dorados y los cuatro plateados llegarán pronto. Aquí hay algunas preguntas de la entrevista que recopilé después del trabajo, incluyendo HTML, CSS, JavaScript, servidor y red, Vue, navegador, react, etc., por un total de 657 páginas PDF.
Versión HTML
- ¿Cuál es la diferencia entre título y alt en la imagen?
- ¿Cuáles son las nuevas características de Html5 y qué elementos se han eliminado?
- ¿Cómo gestiona y carga el navegador los recursos de almacenamiento fuera de línea de Html5?
- ¿Cuáles son los elementos de la línea? ¿Cuáles son los elementos a nivel de bloque? ¿Cuáles son los elementos vacíos?
- ¿Cuál es la diferencia entre establecer el ancho y la altura del lienzo en la etiqueta y establecer el ancho y la altura en el estilo?
- ¿Cómo gestiona y carga el navegador los recursos de almacenamiento sin conexión de HTML5?
Artículos CSS
- La diferencia entre enlace e @import en CSS:
- Las similitudes y diferencias entre posición absoluta y fija:
- ¿Cuál es el uso de BFC?
- Varias formas de limpiar los flotadores
- Css3 nuevo pseudo-clase-pseudo-elemento
- Modelo de caja IE, modelo de caja W3C
- ¿Cuándo se mostrará: inline-block no muestra el espacio?
- ¿El elemento en línea se convierte en un elemento a nivel de bloque después de flotar: izquierda?
JavaScript
- Las diversas posiciones de js, como clientHeight, scrollHeight, offsetHeight y la diferencia entre scrollTop, offsetTop, clientTop?
- Implementación de la función de arrastrar y soltar js
- Cargar de forma asincrónica el método js
- js anti-vibración
- Cierres que no se pueden eludir
- Hable sobre su comprensión de la cadena de alcance
- ¿Prototipo de JavaScript, cadena de prototipos? ¿Cuáles son las características?
- Explique qué es la delegación de eventos / delegación de eventos
- ¿Cómo implementa Javascript la herencia?
Vista
- El papel del valor clave en vue
- ¿Por qué los datos en un componente de Vue deben ser una función?
- ¿Cuál es la característica de estado de vuex?
- Presenta el sistema de respuesta de Vue
- La diferencia entre calculado y reloj
- Presenta el ciclo de vida de Vue
- Por qué los datos de los componentes deben ser una función
- ¿Cómo se comunican los componentes?
Reaccionar
- Al presentar Redux, ¿cuáles son los principales problemas a resolver? ¿Qué es el flujo de datos? ¿Cómo administrar múltiples componentes usando el mismo estado?
- React-Redux está conectado al componente react
- ¿Qué es el middleware Redux? Acepta varios parámetros
- Cómo el middleware de solicitudes redux maneja la concurrencia
- Cómo configurar React-Router
- Módulos cargados dinámicamente para enrutamiento
- Reaccionar el ciclo de vida y su propia comprensión, y los cambios de V16 en el ciclo de vida.
- ¿Por qué usar dom virtual?
Navegador
- Comunicación de tabla cruzada
- Arquitectura del navegador
- Bucle de eventos en el navegador
- El proceso desde la URL de entrada hasta la visualización
- Redibujar y redistribuir
- almacenamiento
- Trabajador web
- Mecanismo de recolección de basura V8
- Pérdida de memoria
- Optimización del reflujo y repintado
- ¿Cómo reducir el redibujado y el reflujo?
- Se ingresa una página desde la URL para que la página se cargue y se muestre, ¿qué sucedió en el proceso?
- Resumen de la diferencia entre localStorage y sessionStorage y cookie
