Guión Completo del Curso de HTML y CSS (SASS)

 

¡Hola amig@s!

¿Cómo están? Espero que se encuentren muy bien.

Quiero compartirles que el Curso de HTML y CSS, con SASS ya está completo y disponible.

Fue un largo camino pero ya al fin está listo, este es un curso de 20 horas, con 115 lecciones en total . Quiero compartirles el guión del curso, el objetivo es tener a la disposición mi primer curso formal en línea para seguir reforzando todos los conocimientos básicos de Desarrollo Web Front End.

Les agradezco mucho su paciencia, viene más y nuevo contenido en mi canal de YouTube.

Tengan un excelente día

Irina


Módulo 1: Introducción del Curso

  • Bienvenid@

  • ¿Cómo funciona una página web?

  • ¿Qué es HTML y CSS?

  • Prepara tu computadora

Módulo 2: Lo Básico de HTML

  • Introducción del Módulo

  • Crear un archivo HTML

  • Estructura básica de HTML

  • Configuración de Live Server

  • Meta Tags

  • Cabecera y Párrafos

  • Enlaces e Imágenes

  • Listas y Tablas

  • Formas y Entradas

  • Block e Inline

  • Div, Span, Class y ID

  • Entidades de HTML

  • Etiquetas Semánticas de HTML 5 y Reto

Módulo 3: Lo Básico de CSS

  • Introducción del Módulo

  • Implementando CSS

  • Selectores Básicos de CSS

  • Introducción a Dev Tools de Google Chrome

  • Tipografías (Fonts) en CSS

  • Color

  • Background y Borders

  • Box Model, Margin y Padding

  • Float y Aligment

  • Estilo de Enlace y Butón

  • Estilo de Menu

  • Display: Inline, Block e Inline-Block

  • Regla Important

  • Posicionamiento CSS

  • Ejercicio CSS

Módulo 4: Proyecto – Mayo Business

  • Introducción del Proyecto

  • Maquetación del Sitio

  • Inicio y Footer

  • Página Acerca De

  • Página de Contacto

Módulo 5: Sitio Responsivo y Uso de Unidades

  • ¿Qué es Diseño Responsivo?

  • Media Queries

  • Unidades em y rem

  • Unidades vh y vw

  • Hacer Sitio Responsivo

Módulo 6: Aprendiendo Flex Box

  • ¿Qué es Flex Box?

  • Lo Básico de Flex

  • Propiedades de Flex

  • Alignment y Justify en Flex

Módulo 7: Proyecto – Hawaii

  • Introducción del Proyecto

  • Maquetación del Sitio

  • Estilos Principales

  • Menu y Portada

  • Blog

  • Features

  • Acerca y Servicios

  • Galería

  • Contacto

  • Footer

  • Sitio Responsivo

Módulo 8: Publicación de Sitio Web

  • Tipos de Alojamiento (Hosting)

  • Configuración de Alojamiento Compartido

  • Configuración de Correo

  • Publicar tu Sitio Web Vía FTP

Módulo 9: Más Conceptos CSS

  • Selectores Avanzados

  • Pseudo Clases: :nth-child

  • Pseudo Clases: :before y :after

  • Box Shadows

  • Variables CSS

  • Transiciones CSS

  • Propiedad Transform

Módulo 10: Mini Proyectos

  • Hamburger Menu – Introducción…

  • Hamburger Menu – Maquetación

  • Hamburger Menu – Estilos Generales

  • Hamburger Menu – Inicio del Hamburger Menu

  • Hamburger Menu – Animación del Menu

  • Hamburger Menu – Menu Overlay

  • Dropdown Menu – Introducción

  • Dropdown Menu – Maquetación

  • Dropdown Menu – Estilos Generales

  • Dropdown Menu – Estilos de Menú Despegable

Módulo 11: Aprendiendo CSS Grid

  • ¿Qué es CSS Grid?

  • Lo Básico y Columnas en Grid

  • Filas en Grid

  • Span (Abarcar/Colocación) para Columnas y Filas en Grid

  • Auto-Fit y Minmax

  • Grid Template Areas

  • Media Queries en CSS Grid

Módulo 12: Proyecto – Tech Blog

  • Introducción…

  • Maquetación del sitio

  • Estilos principales

  • Navegación e Inicio

  • Implementación de Grid

  • Sección Footer

  • Página de Categoría

  • Página de Artículo

  • Sitio responsivo

Módulo 13: Publicación de Sitio Web con Netlify

  • ¿Cómo funciona Netlify?

  • Subir sitio a Github

  • Publicación de Sitio Web en Netlify

  • Envío de Formulario en Netlify

  • Nombre de Dominio Personalizado

Módulo 14: Aprendiendo SASS

  • ¿Qué es SASS?

  • Configuración del Entorno con node-sass

  • (Otra opción) Configuración de Live Sass Compiler 

  • Variables y Parciales

  • Anidamiento (Nesting) y Estructura

  • Herencia (Inheritance) y Contraste

  • Funciones, Mixins y Más

Módulo 15: Proyecto – Portafolio

  • Introducción…

  • Maquetación del sitio

  • Estilos principales

  • Navegación y Página de Inicio

  • Página de Acerca De

  • Página de Portafolio

  • Página de Contacto

  • Sitio Responsivo

Módulo 16: Qué sigue

  • Otras herramientas útiles

  • ¿Qué sigue?


👩🏻‍🏫 Mis Cursos

👨‍💻 Curso Completo de HTML y CSS – Aprende cómo construir sitios web responsivos con el uso de HTML5, CSS3, así como el uso de Flexbox, CSS Grid y el pre-procesador SASS. Este curso es interactivo por lo cuál veremos teoría y también su aplicación con la construcción de varios proyectos de páginas web y un portafolio.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Únete al Quinto Año del Reto #100sitioswebchallenge

Únete al Quinto Año del Reto #100sitioswebchallenge

https://www.youtube.com/watch?v=Pw5nzaXYvJ0 ¡Hola amig@s! Espero que estén teniendo un día excelente. Quiero compartirles que este año marca el quinto aniversario del inicio del reto #100sitioswebchallenge, el cual se trata de ejercitar y poner en práctica nuestros...

Guía Para Aprender Desarrollo Web 2024

Guía Para Aprender Desarrollo Web 2024

Hola amig@s, ¿Cómo están? Espero que muy bien. Hace 5 años que regresé a desarrollo web porque estuve un tiempo inactiva enfocada en otros proyectos de emprendimiento. Y cuando quise retomar la creación de sitios web me sentí un poco pérdida sobre en dónde debería de...