Skip to content

adharamonzon/ejercicios-modulo-1-HTML-y-CSS

Repository files navigation

ejercicios-modulo-1-HTML-y-CSS

Curso Intensivo Adalab

Este repositorio engloba los ejercicios del módulo 1 de Adalab, de HTML y CSS desde 0 y la EVALUACIÓN INTERMEDIA

Evaluación intermedia

Ejercicio sencillos, de posicionamiento, flexbox, sintaxis.

Tema 1. Intro a la web

como funciona internet, conceptos básicos, cómo organizar los proyectos por carpetas

Tema 2. Mi primera página web

Etiquetas nuevas de HTML, como crear distintos tipos de secciones (header, main, footer, nav, aside, etc), enlazar contenido, como darle carga semántica, accesibilidad, tablas CSS, selectores de css (distintos tipos de selectores: propio elemento, clase e id), pseudoclase como selector, herencia. CASCADA: importancia, especificidad y orden, colores y fondos

Tema 3. Modelo de caja y herramientas

Modelo de cajas y DevTools (inspector). Modelo de caja: display block, inline e inline-block. Más etiquetas HTML. Dimensiones, box-sizing, overflow, alineamiento. Live server (code), enlazar fuentes.

Tema 4. Flexbox

Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tema 5. Posicionamiento

Principales modos de presentación de los elementos HTML: inline, inline-block y block. Modos de posicionamiento: static, relative, absolute, fixed. Transform: ajustes al elemento respecto a sí mismo. Translate, Scale, Rotate.

Tema 6. Diseño responsive

Diseño flexible, Media Queries. Imágenes, media y topografía flexibles. Mobile first.

Tema 7. Publicando nuestra web

Gestión de versiones para el proyecto, git y git-hub. (ejercicios prácticos)

Tema 8. Control de versiones

Uso de git (iniciar repositorios en git-hub) (ejercicios prácticos)

Tema 9. Automatización de tareas

Gulp, Node, npm, adalab web stater kit

Tema 10. SASS

Preprocesador CSS, permite el acceso a funcionalidades que no tiene CSS y tras el procesado generar un CSS válido. Variables, anidado, referenciado al selector madre, BEM, mediaqueries. Imports Mixins y funciones

Tema 11. Formularios

Formularios, action="" y method="" label (for="") / input de texto (name="" id="" placeholder="" value="") atributos: required, disabled type="" text, number, password, tel, etc opciones: checkbox, radio y selec (option) otros campos área de texto, fieldset, legend, reset (restaurar valores por defecto)

Tema 12. Grid y Bootstrap

CSS Grid. Bootstrap. Librería de grid y componentes gráficos.

Tema 13. Animaciones

Transiciones entre dos estados de un elemento. (ej. :hover). Cómo construir una transicíon. Animaciones: dejan variar los valores de las propiedades CSS en el tiempo. Para ello se define la secuencia de estados y cómo se controla la animación.

Tema 14. Accesibilidad y sistemas de diseño

Accesibilidad web, para dispositivos de lectura (etiquetas semánticas html), formularios sólo usando el teclado. Textos alternativos. Pautas para mejorar la accesibilidad. Estructura de carpetas, variables, componentes.