-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
327 lines (321 loc) · 19.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!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">
<link rel="stylesheet" href="./css/styles-logical.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400&display=swap"
rel="stylesheet">
<title>El Blog de Edith</title>
<meta property="og:title" content="Mi proyecto del Curso Esencial de HTML y CSS" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://netacis.github.io/curso-esencial-html-css/" />
<meta property="og:image" content="https://netacis.github.io/curso-esencial-html-css/images/dom.png" />
<meta property="og:description" content="Todo lo que necesitas saber en tu día a día como frontend." />
<link rel="apple-touch-icon" sizes="57x57" href="./favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
<link rel="manifest" href="./favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="patron"></div>
<div class="header">
<div class="header-wrapper">
<div class="header-content">
<header>
<nav>
<details open>
<summary><span>Setup</span></summary>
<ol>
<li><a href="#google-chrome">Google Chrome</a></li>
<li><a href="#vsc">Visual Studio Code</a></li>
<li><a href="#figma">Figma</a></li>
<li><a href="#github">GitHub</a></li>
</ol>
</details>
<details>
<summary><span>Conceptos esenciales del Desarrollo Web</span></summary>
<ol>
<li><a href="#html">Qué es HTML</a></li>
<li><a href="#etiquetas">Etiquetas</a></li>
<li><a href="#dom">DOM</a></li>
<li><a href="#semantica">Semántica</a></li>
<li><a href="#atributos">Atributos</a></li>
<li><a href="#css">Qué es CSS</a></li>
</ol>
</details>
<details>
<summary><span>Modelo de Caja</span></summary>
<ol>
<li><a href="#box-model">¿De qué se compone el modelo de caja?</a></li>
<li><a href="#config">Configuración por Defecto</a></li>
<li><a href="#prop-fisicas">Propiedades Físicas</a></li>
<li><a href="#prop-logicas">Propiedades Lógicas</a></li>
<li><a href="#user-agent">User Agent Styles</a></li>
<li><a href="#uni-rel">Unidades relativas</a></li>
</ol>
</details>
</nav>
</header>
</div>
</div>
</div>
<div class="main">
<div class="main-wrapper">
<div class="main-content">
<main>
<h1>Curso esencial de HTML y CSS</h1>
<p>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.</p>
<hr>
<section class="section-content">
<h2>Setup</h2>
<img src="./images/google-chrome-white.png" alt="Logo de Google Chrome"
title="Logo de Google Chrome">
<h3 id="google-chrome">Google Chrome</h3>
<p>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.</p>
<img src="./images/visual-studio-code-white.png"
alt="Logo del editor de código Visual Studio Code"
title="Logo del editor de código Visual Studio Code">
<h3 id="vsc">Visual Studio Code</h3>
<p>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.</p>
<img src="./images/figma-white.png" alt="Logo de Figma" title="Logo de Figma">
<h3 id="figma">Figma</h3>
<p>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.</p>
<img src="./images/github-gray.png" alt="Logo de GitHub" title="Logo de GitHub">
<h3 id="github">GitHub</h3>
<p>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.</p>
<blockquote>
<p>“Este es el inicio de tu carrera como Desarrollador Web”</p>
<p>
<span>Leonidas Esteban</span>
</p>
</blockquote>
</section>
<hr>
<section class="section-content">
<h2>Conceptos esenciales del Desarrollo Web</h2>
<h3 id="html">Qué es HTML</h3>
<p>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.</p>
<pre id="codigo">
<!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></pre>
<h3 id="etiquetas">Etiquetas</h3>
<p>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.</p>
<p>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.</p>
<h3 id="dom">DOM</h3>
<p>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.</p>
<img src="./images/dom.png" alt="Estructura de árbol que representa al Document Object Model"
title="Estructura de árbol que representa al Document Object Model">
<h3 id="semantica">Semántica</h3>
<p>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.</p>
<h3 id="atributos">Atributos</h3>
<p>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</p>
<h3 id="css">CSS</h3>
<p>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</p>
<img src="./images/css.png" alt="Imagen con logotipo y ejemplo de la hoja de estilo en cascada"
title="Imagen con logotipo y ejemplo de la hoja de estilo en cascada">
</section>
<hr>
<section class="section-content">
<h2>Modelo de caja</h2>
<h3 id="box-model">El modelo de caja está compuesto por:</h3>
<p>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.</p>
<ol>
<li>Tamaño del contenido / ancho y alto</li>
<li>Padding / Relleno</li>
<li>Border / Bordes</li>
<li>Margin / Márgenes</li>
</ol>
<h3 id="config">Configuración por defecto</h3>
<ol>
<li>direction: ltr (left to right)</li>
<li>writing-mode: horizontal-tb (top to bottom)</li>
<li>text-orientation: mixed</li>
</ol>
<h3 id="prop-fisicas">Propiedades físicas para el modelo de caja:</h3>
<ul>
<li>width / height</li>
<li>margin / margin-top | margin-right | margin-bottom | margin-left</li>
<li>border / border-top | border-right | border-bottom | border-left</li>
<li>padding / padding-top | padding-right | padding-bottom | padding-left</li>
</ul>
<h3 id="prop-logicas">Propiedades lógicas para el modelo de caja:</h3>
<ul>
<li>inline-size / block-size</li>
<li>margin-block | margin-inline | margin-block-start | margin-block-end |
margin-inline-start |
margin-inline-end</li>
<li>border-block | border-inline | border-block-start | border-block-end |
border-inline-start |
border-inline-end</li>
<li>padding-block | padding-inline | padding-block-start | padding-block-end |
padding-inline-start |
padding-inline-end</li>
</ul>
<h3 id="user-agent">User Agent Styles</h3>
<p>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.</p>
<h3 id="uni-rel">Unidades Relativas</h3>
<p>
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).
</p>
<p>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</p>
</section>
<hr>
<div class="section-content">
<h2>Videos lindos</h2>
<div class="slider">
<scroll-container class="slider-container">
<scroll-page class="slider-slide" id="video-1">
<iframe class="video" width="560" height="315"
src="https://www.youtube.com/embed/5f5Ig_U2Bpk" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</scroll-page>
<scroll-page class="slider-slide" id="video-2">
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/g3RKFBbROjk"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</scroll-page>
<scroll-page class="slider-slide" id="video-3">
<iframe class="video" width="560" height="315"
src="https://www.youtube.com/embed/D2FSq2npnnk" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</scroll-page>
</scroll-container>
<div class="slider-bullet-list">
<a href="#video-1" class="slider-bullet"></a>
<a href="#video-2" class="slider-bullet"></a>
<a href="#video-3" class="slider-bullet"></a>
</div>
</div>
</div>
<p>Si tienes alguna pregunta escríbeme a
<a href="mailto:[email protected]">[email protected]</a>
</p>
<div class="section-content">
<h2>Suscríbete a nuestro newsletter</h2>
<form action="#" class="form">
<input type="text" required placeholder="Nombre" id="nombre">
<input type="email" required placeholder="Correo Electrónico" id="email">
<input type="submit" value="Suscríbeme">
</form>
</div>
</main>
</div>
</div>
</div>
<script>
const $detailsList = document.querySelectorAll('details')
$detailsList.forEach(($details) => {
$details.querySelector('summary').addEventListener('click', expand)
})
function expand() {
$detailsList.forEach(($details) => {
$details.removeAttribute('open')
})
}
</script>
</body>
</html>