-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
312 lines (302 loc) · 15.1 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<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.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<title>El Blog de Leo</title>
<meta property="og:title" content="Mi proyecto del Curso esencial de HTML y CSS" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Todo lo que necesitas saber en tu día a día como Frontend" />
<meta property="og:url" content="https://leonidasesteban.github.io/curso-esencial-html-css/" />
<meta property="og:image" content="https://leonidasesteban.github.io/curso-esencial-html-css/images/dom.png" />
<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="hero"></div>
<!-- <div class="title">
<div class="wrapper">
<div class="title-content">
<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>
</div>
</div>
</div>
<div class="services">
<div class="wrapper">
<div class="services-content">
<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>
</div>
</div>
</div>
<div class="pricing">
<div class="wrapper">
<div class="pricing-content">
<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>
</div>
</div>
</div> -->
<div class="header">
<div class="wrapper">
<div class="header-content">
<header>
<nav>
<details open>
<summary>
Setup
</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 open>
<summary>
Conceptos esenciales del Desarrollo Web
</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>
</nav>
</header>
</div>
</div>
</div>
<main class="main">
<div class="wrapper">
<div class="main-content">
<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.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.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.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.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. <code>const name = 'your name'</code></p>
<pre>
<!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">
<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>Propiedades físicas para el modelo de caja:</h3>
<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="propiedades de css" title="propiedades de css">
</section>
<section class="section-content">
<h2>Modelo de caja</h2>
<h3>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 del contenido / ancho y alto</li>
<li>Padding / Relleno</li>
<li>Border / Bordes</li>
<li>Margin / Márgenes</li>
</ol>
<h3>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>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>
</section>
<div class="section-content">
<h2>Hola estos son algunos videos muy 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" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
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/5f5Ig_U2Bpk" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
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/5f5Ig_U2Bpk" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
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>Ingresa a nuestor newsletter</h2>
<form action="#" class="form">
<!-- <select name="" id="">
<option value="">curso 1</option>
<option value="">curso 2</option>
</select>
<input type="checkbox">
<input type="radio"> -->
<input type="text" required placeholder="Nombre">
<input type="email" required placeholder="Correo Electrónico">
<input type="submit" value="Suscribirme">
</form>
</div>
</div>
</div>
</main>
</body>
</html>