¿Qué aprender en la formación front-end?
La primera etapa: aprendizaje de 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.
Aprender HTML es un proceso de memorización y comprensión. Durante el proceso de aprendizaje, puede utilizar la vista "Dividida" de Dreamweaver para facilitar el aprendizaje. Vea los resultados en la vista Diseño, conozca la esencia en la vista Código y aproveche cada vista. Este método de aprendizaje comparativo compensa la aburrida experiencia de simplemente memorizar etiquetas y atributos HTML. ¡Debe ser muy bueno para los principiantes!
Después de aprender HTML, solo sabemos cómo fabricar varias "materias primas". Si queremos construir un edificio, debemos juntar estas "materias primas" de acuerdo con nuestro plan de diseño y embellecerlo con algo de estilo.
Así que entré en la segunda etapa: aprendizaje de CSS.
La formación es para aquellos que tienen las condiciones, y muchos amigos prefieren el autoestudio. Sin embargo, después de todo, el poder del autoestudio es limitado. Para hacerlo mejor para quienes quieran aprender, recomiendo una falda de 6 1 1 delante, 4 28 en el medio y 1 4 detrás. En segundo lugar, hay muchas personas que quieren aprender a comunicarse contigo y también hay expertos que dan clases gratuitas todas las noches. Cualquiera que quiera aprender puede unirse a nosotros, pero solo damos la bienvenida a personas que quieran aprender, no por aprender. Siéntete libre de mirar a tu alrededor, pero no entres.
CSS es la abreviatura de Cascading Style Sheet en inglés, que se llama Cascading Style Sheet. Es un lenguaje de diseño de estilo que realmente puede separar la expresión de una página web del contenido. 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.
Al mismo tiempo, el modelo de caja, el diseño relativo, el diseño absoluto, etc. en CSS pueden lograr un control preciso de la posición y el diseño de cada objeto en la página web a nivel de píxel. A través de esta etapa de aprendizaje, se puede completar con éxito la construcción de "un edificio".
Una vez terminado el edificio, podemos entregárselo a los usuarios, pero si queremos que los usuarios tengan una mejor experiencia, podemos decorar aún más el edificio para que parezca más lujoso.
Para completar esta tarea, hemos entrado en la tercera etapa: aprendizaje de JavaScript.
JavaScript es un lenguaje de scripting ampliamente utilizado en el lado del cliente. Nos proporciona algunas funciones, objetos y operaciones DOM integradas. Con estos contenidos se pueden conseguir algunos efectos especiales, verificación, interacción, etc.
Del lado del cliente, hacemos que nuestra página parezca menos rígida, ¡y los perdedores pueden atacar instantáneamente a Gao Fushuai! ¿Hay alguno?
En este momento, es posible que todavía estés inmerso en la sorpresa que te trae JavaScript, pero tu gerente de proyecto de repente te grita:
“Este efecto no funciona en el navegador XXX. Compatible, por favor inténtalo de nuevo..."
"¿Incompatible?" quedó petrificado al instante. ¿Hay alguno?
“¡Oh, no, eso es una tontería! ¡Me tomó una noche escribir cientos de líneas de código y vomité sangre!”
La compatibilidad y complejidad de JavaScript a veces son realmente diferentes. Nos dio dolor de cabeza, pero por suerte había un "maestro" que nos ayudó a empacarlo.
Luego ingrese a la cuarta etapa: aprendizaje de jQuery.
JQuery es una biblioteca JavaScript ligera, de código abierto y gratuita, compatible con varios navegadores (jQuery2.0 y versiones posteriores han dejado de ser compatibles con los navegadores IE6/7/8). Al mismo tiempo, hay muchos complementos basados en jQuery para elegir, que nos permiten lograr algunos efectos dinámicos ricos de manera más conveniente y rápida, lo que nos ahorra mucho tiempo de desarrollo, mejora la velocidad de desarrollo y incorpora completamente su núcleo de "escritura". "Menos, haz más". ¡Este sentimiento es genial! ¿Hay alguno?
Los "edificios de lujo" están surgiendo aquí, pero construirlos es muy complicado, ¡día tras día, año tras año! ¿No es genial poder modular cada componente de un edificio para que, cuando llegue el momento de construirlo, todo se una como una pila de madera? ¿Se puede lograr? La respuesta es sí.
Esta idea también es aplicable al desarrollo web front-end, por lo que han surgido varios marcos front-end. Aquí recomiendo Bootstrap a todos. Bootstrap es un conjunto de herramientas de código abierto lanzado por Twitter para el desarrollo front-end. Es un marco CSS/HTML que admite diseño responsivo. Fue muy popular una vez que se lanzó y ha sido un proyecto popular de código abierto en GitHub.
Durante el proceso de desarrollo del proyecto, podemos utilizar los estilos CSS, componentes y complementos de JavaScript proporcionados por Bootstrap para completar rápidamente el diseño de la página y la configuración de estilo, y luego ajustar los estilos de forma específica. manera, acortando así en gran medida el proceso de desarrollo basado en el marco. ¡Es genial estar sobre los hombros de gigantes!
Sugerencias de estudio para el front-end web
Finalmente, déjame contarte algunas sugerencias y métodos para aprender el front-end web.
Un problema al que se debe prestar atención en el diseño CSS es que muchos estudiantes carecen de un análisis general del diseño de la página y no pueden comprender la relación anidada entre los cuadros de la página desde una perspectiva macro. ansioso por el éxito, lo que resulta en confusión de elementos en la página. La relación entre ellos es confusa y es fácil que los cuadros se desalineen al flotar. Se recomienda adoptar un enfoque de diseño "de arriba hacia abajo y refinado gradualmente". Primero utilice varios cuadros para dividir la página en su conjunto y luego continúe anidando gradualmente los cuadros dentro de los cuadros.
"Los caballeros nacen diferentes y son buenos haciendo trampa". En el proceso de aprendizaje, necesito explorar más sitios web excelentes, ser bueno analizando y aprendiendo de sus ideas de diseño y métodos de diseño, y obtener múltiples beneficios. -conocimiento facetado para lograr Integrar todo, aprender de los puntos fuertes de cada uno y utilizarlos para mi propio uso.
Al mismo tiempo, debes ser bueno usando Firebug. Por un lado, Firebug puede ayudarnos a depurar nuestras propias páginas durante el proceso de aprendizaje. Por otro lado, podemos utilizar Firebug para ver y analizar fácilmente el código fuente de los sitios web de otras personas. ¡"Robar" también es una habilidad!
Con la llegada del auge de Internet móvil, el desarrollo móvil se está volviendo cada vez más popular y existe una demanda cada vez mayor de diseños y micrositios responsivos. Esta es también una de las direcciones de desarrollo futuras de nuestro frente web. -fin. . Los estudiantes que tienen energía de sobra pueden prestar más atención. Finalmente, ¡deseo que todos puedan encontrar un mundo más amplio en el camino hacia el desarrollo web front-end!