Este es el inicio de mi carrera como desarrollador Web, empezaré aprendiendo HTML y SCC
para la creación de contenidos, en el nivel 2 aprenderé de componentes y en el 3 sobre
layouts.
Setup
Google Chrome
Chrome va a ser el navegador que utilizaremos en el curso por su extremo 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 mi carrera como "Desarrollador Web"
Arturo C.
Conceptos esenciales del Desarrollo Web
Qué es HTML
Hyper Text Markup Languaje o Lenguaje de Marcas Hipertexto. Es el componente más
básico de la web. Define el significado y la estructura del contenido.
const name = 'your name'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hola Mundo!!
</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 persona class="" 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
Reglas de CSS
.selector {
propiedad: declaracion;
}
Puede haber más de un selector y N propiedades, ejemplo:
.title, .name {
color: red;
font-size: 15px
}
Selectores de CSS
.Clase
Las clases se pueden repetir y un elemento puede tener más de una clase.
<style>
.title {
color: red
}
</style>4
<h1 class="title">Hola!</h1>
Selector "*" (asterisco)
Afecta a todos los elementos.
<style>
* {
color: red
}
</style>
<h1 id="tittle">Hola</h1>
<h2 class="sub-tittle">ke</h2>
<h3>ase</h3>
#id
Solo un elemento puede tener el mismo id en una página.
<style>
#title {
color: red
}
</style>
<h1 id="title">Hola!</h1>
> Hijo directo
Los hijos directos del selector previo a >
<style>
body > .title {
color: red
}
</style>
<h1 class="title">Hola!</h1>
<main>
<h2 class="title">ke</h2>
</main>
<h3>ase</h3>
Modelo de caja
Scripts
Este script se utiliza para desplegar automáticamente los menús creados, es con Java
Script.
<script>
const $detailsList = document.querySelectorAll('details')
$detailsList.forEach(($details) => {
$details.querySelector('summary').addEventListener('click', expand)
})
function expand() {
$detailsList.forEach(($details) => {
$details.removeAttribute('open')
})
}
</script>
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.
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
Modelo de caja.
En el apartado img src="" alt="" poner la diagonal "/" va a buscar las imagenes desde
la raíz del proyecto.
Mi canal de Youtube!!
El target="_blank" sirve para abrir una página nueva en una ventana nueva
Si tienes alguna pregunta escribeme a
tutospixel@hotmail.com