Cómo aprender a desarrollar un front-end web completo
¿La primera etapa?
Aprenda HTML: el lenguaje de marcado de hipertexto (HTML para abreviar) es el esqueleto de una página web. Ya sea una página web estática o una página web dinámica, el código HTML finalmente se devuelve al navegador, y el navegador interpreta y representa el código HTML y lo presenta al usuario. Por lo tanto, debes dominar la estructura básica y las etiquetas y atributos comunes de HTML. Puntos técnicos: inicio rápido de HTML, texto, imágenes, enlaces, tablas, listas, formularios y marcos: diseño de sitio web para PC, diseño de página de aplicación web HTML5. ?
¿La segunda etapa?
Aprende CSS: CSS es la abreviatura del inglés Cascading Style Sheet, que se llama Cascading Style Sheet. Es un lenguaje de diseño de estilo que realmente puede separar la expresión y el contenido de una página web. En comparación con el HTML tradicional, sus estilos se pueden reutilizar, lo que mejora enormemente nuestra velocidad de desarrollo y reduce los costos de mantenimiento. Puntos técnicos: sintaxis básica de CSS, modelo de marco y fondo, formato de texto, tabla, visualización y posicionamiento, animación, transición, conversión 2D/3D, optimización de CSS y nuevos elementos y atributos de HTML5, elementos de mejora de campos de formulario, selectores de CSS3, relacionados estilos de caracteres y fuentes, procesamiento de desplazamiento y deformación CSS3, animación de transición y transformación 2D CSS3, animación de fotogramas clave y transformación 3D CSS3, modelo de caja elástica, consultas de medios, etc. También puedes "decorar" aún más el edificio para que parezca más "lujoso". ?
¿La tercera etapa?
Aprenda Javascript y jQuery: Javascript: sintaxis básica, json, magic Array, clases comunes de Javascript, habilidades de depuración de JS: adquisición de nodos, operación de elementos, creación de nodos, eventos y burbujas, casos de proyectos; : Iteración implícita, selector, cómo JQuery implementa efectos en JSDom, JQuery EasyUI, cabe señalar que la biblioteca DOM, la biblioteca AJAX, la biblioteca prototipo y la biblioteca Hereda. ), objetos mutables y activos, cadenas de alcance, cierres y varias bibliotecas en la biblioteca de herramientas JavaScript. ?
¿La cuarta etapa?
Comprenda el protocolo HTTP, Ajax avanzado y desarrollo back-end: explique en detalle el protocolo HTTP(s), Ajax avanzado, dominio cruzado y retraso, conceptos básicos de PHP, conceptos básicos de MySQL, principios de los componentes del lado del servidor , Solicitudes HTTP (GET, POST, PUT, DELETE, etc.), respuesta HTTP, principio de cookies, principio de sesión, protocolo Restful, definición de interfaz, datos simulados, Restful, depuración de front-end, seguridad de front-end (XSS, CSRF, Inyección JS), ingeniería front-end y aplicación modular: Gulp, Webpack, NPM, Git/SVN, CommonJS, AMD, CMD, ¿modularidad ES6?
¿La quinta etapa?
En este momento podemos utilizar las técnicas que hemos aprendido para abrir la puerta a un nuevo mundo y hacer desarrollo de proyectos y funciones: El tacto debe tener puntos claros: conocimientos básicos de lienzo, dibujo de rectángulos, arcos, segmentos de línea, etc. Curvas, degradados e imágenes, ejemplos de dibujo de gráficos de lienzo, almacenamiento local, almacenamiento de sesión y caché sin conexión, animate.css, Yo/Mui, touch.js, zepto.js, swiper.
Escena WeChat: uso de WeUI y Swiper animate en proyectos de escena WeChat, diseños de página comunes, interacciones y animaciones comunes; desarrollo de aplicaciones web con Vue.js: conceptos básicos de vue.js, modularización, componentes de un solo archivo, enrutamiento, comunicación con servidores, ¿Gestión de estado, pruebas unitarias, lanzamiento de producción?
¿La sexta etapa?
Híbrido, reactivo: cree proyectos, cree instancias y cree pequeños programas, marcos de páginas, componentes, API y herramientas; introduzca React Native, programas de arquitectura BS, ejecución y carga asincrónicas, y son compatibles con los comunes. estándares y escalabilidad tecnologías mixtas: Cordova/Phone gap, cliente integrado (iOS, Android), interfaz de cuenta de servicio WeChat (JSSDK)?