Este es el inicio de tu carrera como Desarrollador Web, empezarás aprendiendo HTML y CSS para la
creación de
contenidos, en el nivel 2 aprenderás de componentes y en 3 sobre layouts.
Setup
Google Chrome
Chrome va a ser el navegador que utilizaremos en el curso por su extenso soporte de nuevos
estándares y
herramientas de desarrollo avanzadas y de amigable uso.
Visual Studio Code
Visual Studio Code es el editor de texto más popular y potente del mercado actualmente, su
fácil uso y la
capacidad de extenderlo por medio de plugins lo hace el complemento perfecto para cualquier
programador sin
importar el lenguaje en el que se desemvuelva.
Figma
Figma es una la herramienta más popular en la actualidad para entregar diseños a los
desarrolladores para su
implementación por su fácil uso porque puede ser usado directamente desde el navegador.
GitHub
Así como en Facebook te encuentran tus amigos, en Github te encuentran otras programadoras y
programadores de
todo el mundo, en vez de subir fotos de tus viajes aquí subes tu código y puedes elegir
hacerlo “open
source” o
guardarlo de manera privada, Github será esencial para almacenar tu futuro portafolio.
“Este es el inicio de tu carrera como Desarrollador Web”
Leonidas Esteban
Conceptos esenciales del Desarrollo Web
Qué es HTML
Hyper Text Markup Language o Lenguaje de marcas Hipertexto. Es el componente más básico de la
web. Define el
significado y la estructura del contenido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Etiquetas
Las etiquetas HTML van a ayudarnos a brindar una estructura y semántica al contenido de
nuestro website y
cada
una tiene características y usos diferentes aunque visualmente den un resultado similar.
Muchas etiquetas son fácil de diferencias como los headings o las imágenes y otras diferentes
como header,
footer, section o div, aquí es donde la semántica será la respuesta y si sabemos un poco de
inglés también
podremos darnos una pequeña idea de su uso pero en este curso vamos a usar las más
importantes y que serán
parte
de tu día a día como Software Developer.
DOM
El Document Object Model es una estructura de árbol que representará todos nuestros proyectos
web como si un
árbol genealógico fuera: padres, hijos, hermanos con niveles infinitos. cuando entendemos
esta anidación
podemos
identificar dependencias, herencias en css y que tan complejo es nuestro proyecto.
Semántica
La semántica le brinda sentido a cada elemento existen en un sitio web, algunos elementos
será meramente
decorativos y no deben significar nada pero otros serán títulos y deberán estar en diferente
jerarquías o
alguna
secciones serán más relevantes que otras, esto ayudará a los motores de búsqueda como Google
o Duck Duck Go
a
diferenciar tu contenido, categorizar y será la herramientas más valiosa para estar en los
primeros
resultados
de búsqueda SEO. También ayudará a la accesibilidad de tu sitio web, para que personas con
habilidades
diferentes puedan entender cada contenido.
Atributos
Los atributos le dan características extra a las etiquetas para complementar información y
son pre
programadas
por el navegador, algunos atributos funcionan en todas las etiquetas de la misma forma como
‘class’ pero
otros
atributos funcionan en solo alguna etiquetas como src
CSS
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de
estilos utilizado para
describir la presentación de documentos HTML
Modelo de caja
El modelo de caja está compuesto por:
Chrome va a ser el navegador que utilizaremos en el curso por su extenso soporte de nuevos
estándares y
herramientas de desarrollo avanzadas y de amigable uso.
- Tamaño del contenido / ancho y alto
- Padding / Relleno
- Border / Bordes
- Margin / Márgenes
Configuración por defecto
- direction: ltr (left to right)
- writing-mode: horizontal-tb (top to bottom)
- text-orientation: mixed
Propiedades físicas para el modelo de caja:
- width / height
- margin / margin-top | margin-right | margin-bottom | margin-left
- border / border-top | border-right | border-bottom | border-left
- padding / padding-top | padding-right | padding-bottom | padding-left
Propiedades lógicas para el modelo de caja:
- inline-size / block-size
- margin-block | margin-inline | margin-block-start | margin-block-end |
margin-inline-start |
margin-inline-end
- border-block | border-inline | border-block-start | border-block-end |
border-inline-start |
border-inline-end
- padding-block | padding-inline | padding-block-start | padding-block-end |
padding-inline-start |
padding-inline-end
User Agent Styles
Todos los elementos de html se ven diferentes gracias a esta hoja de estilos. Ayuda a que tu
documento tenga
mayor legibilidad, por coherencia está predefinido. Mantener estos estilos permite que los
sitios que
existen
desde el principio de los tiempos no se rompan.
A través de css nosotros reemplazamos los estilos predefinidos.
Unidades Relativas
El tamaño relativo te ayuda a adaptar tu página a los distintos dispositivos (celular,
tablet, laptop, pc).
Por ejemplo, si todos los tamaños de fuentes, anchuras, alturas son relativos podemos
cambiar su valor base
(raíz dada por herencia).
Warning con provocar scroll horizontal en móviles.
Si queremos que un elemento ocupe una porción del ancho disponible en todo el área visible
del
navegador, se le llama viewport (vw - viewport width).
Todas las unidades existentes en CSS, existen por una razón. No busques solamente
encapsularte sólo la que
entiendes, no te quedes con absolutos como la mejor forma, las múltiples formas de utilizar
las unidades
hacen
más ricas la forma en que interpretamos las interfaces