Maquetación y desarrollo web de sitios web. Desarrollo web de nivel avanzado - curso 1990 frotar. de Stepik, formación 131 lecciones, Fecha: 1 de diciembre de 2023.
Miscelánea / / December 04, 2023
¡Hola!
Mi nombre es Dima. ¡Y te invito a sumergirte en las profundidades de la creación y el diseño de sitios web!
Este curso es para aquellos que ya conocen los conceptos básicos, pero quieren pasar de un buen nivel de creación de sitios web a uno excelente.
El curso es para aquellos que conocen los conceptos básicos de HTML y CSS, pero saben que todavía hay muchas técnicas, técnicas de desarrollo y tecnologías que utilizan los verdaderos desarrolladores profesionales.
Si esto te suena familiar, entonces este curso es para ti)
Da vida a tus sitios web con animaciones modernas mediante CSS
Empezaremos introduciendo dinámicas en nuestros sitios, es decir, haremos animación. Aprenderemos a animar botones, textos y encabezados usando CSS puro, aprenderemos a crear animaciones de tarjetas, crear un menú de navegación dinámico, y todo esto sin una sola línea de código JS, solo CSS puro.
Este curso contiene las mejores prácticas en diseño responsivo.
Aprenderá nuevas formas y trucos para diseñar sus sitios de manera responsiva, utilizará nuevas técnicas para definir y escribir consultas de medios y aprenderá a adapte todos los elementos de la página cambiando solo una propiedad CSS para que su sitio se vea mejor que nunca en cualquier dispositivo móvil dispositivo
Conozca todas las complejidades y ventajas de los preprocesadores modernos
Aprenderá cómo acelerar la creación de su sitio web varias veces utilizando todas las capacidades del preprocesador SASS, como mixins, variables y funciones.
Conceptos básicos esenciales para usar NPM
Además, los paquetes NPM con los complementos necesarios para todo desarrollador profesional nos brindarán la oportunidad de crear y optimizar sitios web de forma más rápida y eficiente que nunca.
El sistema de control de versiones Git te ayudará en tu desarrollo
Además, aprenderá los conceptos básicos necesarios para trabajar con el sistema de control de versiones git para que siempre tenga la capacidad de volver a la versión correcta de su sitio, sin importar cuánto se equivocó la última vez actualizar el sitio)
Estás creando 2 sitios web modernos para tu cartera.
Este curso se basa en la práctica y se divide en pequeñas lecciones en vídeo en las que crearemos paso a paso 2 grandes proyectos modernos basados en el sistema flotante, para que pueda admitir proyectos antiguos y, por supuesto, en el sistema GRID CSS, que le permite crear diseños de increíble complejidad.
Y por supuesto, no te avergonzarás de mostrar estos proyectos a tus clientes potenciales o futuros empleadores.
¡Siempre estoy en contacto!
Y ten por seguro que no te quedarás solo, porque después de cada pequeña lección tendrás la oportunidad de comparar tu código con el mío o simplemente hacer una pregunta, las respuestas no suelen tardar en llegar.
¡Garantía de devolución del dinero!
Y si aún tienes dudas, este curso brinda la oportunidad de devolver el dinero gastado en él si no te gusta en un plazo de 30 días.
Únase a mí y juntos aprenderemos cómo crear sitios web profesionales y modernos.
¡Te veo en clases!
9
cursosLlevo creando cursos online originales desde 2016. Doy clases profesionales trabajando con editores gráficos de Adobe, enseño diseño y desarrollo web.
¡Hola! ¡Mi nombre es Dima! No quiero alardear, pero tengo que hacerlo) He enseñado a más de 5.000 estudiantes en todo el mundo en mis cursos en línea patentados. ¡Más de 2000 reseñas reales con una calificación promedio de 4,83 sobre 5,00! Doy clases de diseño web, desarrollo web y el software necesario (Photoshop Illustrator, Figma). Mi experiencia docente consta de 5 años de tutoría independiente, además de enseñar a través de escuelas y cursos en línea, en plataformas globales de educación a distancia. Los alumnos de mis cursos notan mis mejores cualidades en la forma en que presento el material sin abarrotar, de una manera divertida e interesante.
Preparación / Repetición / Primeras animaciones
1. ¡Hola!) Descargar materiales para el curso.
2. Instalar y configurar el software necesario.
3. Nueva ruta de clip de propiedad. Comenzamos a crear la primera sección del sitio.
4. Si la aplicación scout no te funciona
5. Práctica: Crea tu forma usando Clip-path
6. Alinear elementos verticalmente usando posicionamiento absoluto
7. Conozca @KeyFrames. Creemos la primera animación.
8. Visibilidad de la cara posterior y creación de botones mediante pseudoclases
9. Animar un botón usando pseudoelementos
10. Modo de relleno de animación. Iniciar una animación desde un punto específico.
11. 3 principios del desarrollo web
12. Utilice REM en lugar de PX
Git y GitHub
1. ¿De qué se trata este bloque?
2. Comandos básicos en la terminal.
3. Cómo editar archivos a través de la terminal
4. Instalar el sistema git en nuestra computadora
5. Cómo ejecutar git en un proyecto específico
6. Creando el primer compromiso
7. Enviar un proyecto a GitHub
8. Si tienes un error al enviar tu proyecto a GitHub
9. Error de inicio de sesión al intentar enviar un proyecto a GitHub
10. Práctica: Crea tu propio repositorio
11. Cómo eliminar un repositorio de GitHub
12. Cómo descargar repositorios desde GitHub
13. Emulamos el trabajo de 2 desarrolladores en un repositorio
14. Cómo mostrar información sobre confirmaciones en la terminal. registro de git
15. que son las sucursales
16. Cómo crear y navegar por ramas.
17. Cerramos el hueco del inicio del mini curso con las notaciones -u y -M
18. Error de confirmación no guardada durante el pago
19. Cómo enviar los cambios creados a una nueva rama
20. Cómo enviar múltiples confirmaciones a una nueva rama
21. ¿Cuál es la condición de cabeza separada? CABEZA independiente
22. Cómo restaurar un archivo específico de una confirmación anterior
23. Git log avanzado y git show
24. Cómo fusionar ramas usando Git merge. Método de avance rápido
25. Cómo eliminar ramas
26. Cómo eliminar archivos de directorio del estado sin seguimiento
27. Restablecimiento de Git: difícil. Cómo revertir un compromiso
28. Segunda forma de encontrar una confirmación atascada usando ORIG_HEAD
29. Restablecimiento de Git: suave
30. Git commit: modifica el comentario de una confirmación anterior
31. Restablecimiento de Git: mixto
32. Diferencia entre git reset y git recovery
33. Introducción a git diff. Imprimiendo la diferencia de varios commits a la consola
34. Ejemplo práctico de uso de git diff
35. Cómo mostrar el diagrama de rama en la terminal. Registro de Git: gráfico
36. Fusionamos ramas usando git merge. Método "Verdadera Fusión"
37. Cómo retroceder después de una fusión
38. Cómo copiar una confirmación específica usando git cherry-pick
39. Fusionar ramas con git rebase
40. ¿Cuál es mejor git rebase o git merge?
41. Cómo utilizar el archivo .gitignore
42. Palabra final
Diseño avanzado: CSS/SASS
1. ¿De qué se trata este bloque?
2. Cómo funcionan las variables SASS
3. Cómo funcionan los mixins
4. Cómo agregar argumentos a mixins
5. ¿Qué son las plantillas SASS?
6. Cómo funcionan las funciones SASS
7. Organizar archivos SASS para un proyecto grande
8. 3 formas de posicionar elementos
9. ¿Cómo funciona el flotador?
10. Creando nuestro propio sistema de grilla
11. Aplicar un degradado al texto. clip de fondo
12. Cómo crear símbolos usando HTML
13. Animando y terminando la segunda sección.
14. Cómo crear tus propias fuentes de iconos
15. Usamos la propiedad de perspectiva para reflejar la perspectiva de los elementos.
16. Cómo funciona el modo de fusión en CSS
17. Terminando la sección con tarjetas.
18. Cómo redondear texto usando la propiedad de forma exterior
19. Cómo funcionan los filtros CSS
20. Cómo agregar un video a una página
21. Conociendo la etiqueta del formulario y su contenido
22. Animando la forma
23. Cómo crear tu propio botón de opción usando CSS
24. Crear un pie de página de un sitio web
25. Crear un menú de navegación usando CSS puro, parte 1
26. Configurar transiciones de velocidad de animación usando cúbico-bezier
27. animando una hamburguesa
Diseño adaptativo
1. ¿De qué se trata este bloque?
2. Cómo crear sitios web responsivos
3. Creando un mixin con reglas de medios
4. Adaptación del proyecto parte 1
5. Adaptación del proyecto parte 2
6. Adaptación del proyecto parte 3
7. ¿Qué son las imágenes responsivas?
8. Cómo adaptar imágenes en HTML
9. Adaptemos imágenes HTML en nuestro proyecto.
10. Adaptación de imágenes CSS
11. Algunas ediciones finales del sitio
Administrador de paquetes de nodo
1. ¿De qué se trata este bloque?
2. ¿Qué es node.js y npm?
3. Preparando el primer paquete npm para su uso
4. Lanzando el primer paquete npm
5. Usando gulp en nuestro proyecto
6. Cómo abrir un sitio web en un teléfono móvil
Introducción a CSS GRID
1. ¿De qué se trata este bloque?
2. Preparación
3. Cómo crear una plantilla de cuadrícula. Plantilla de cuadrícula
4. Cómo funcionan las unidades fr
5. Cómo mover un elemento a otra celda
6. Colocar varios elementos en una celda
7. Práctica: Crea un diseño de sitio web
8. Ejemplo de profesor. Crear un diseño
9. Cómo cambiar el nombre de cada línea en una cuadrícula
10. Cómo crear una plantilla de cuadrícula usando un esquema de nombres
11. ¿Qué son las grillas explícitas e implícitas?
12. Cómo alinear elementos dentro de las celdas
13. Cómo alinear una cuadrícula dentro de un contenedor
14. Contenido mínimo-máximo
15. Autocompletar y Autoajustar. Tamaños de celda según el contenido
16. Conclusión. Jardín de rejilla
Proyecto GRID CSS
1. ¿De qué se trata este bloque?
2. Preparación
3. Crear una plantilla de cuadrícula parte 1
4. Crear una plantilla de cuadrícula parte 2
5. Cómo funcionan los sprites SVG
6. Estamos terminando la segunda sección del sitio.
7. Creando la sección "Banner", parte 1
8. Creando la sección "Banner", parte 2
9. Creando una sección con tarjetas
10. Creando una galería
11. Creando un pie de página
12. Hacer "hamburguesa"
13. Creando encabezado parte 1
14. Creando encabezado parte 2
15. Adaptamos el sitio
¡Hasta luego!
1. ¡Adiós!
Obtenga su certificado
1. Prueba para obtener un certificado de finalización del curso.