-
Notifications
You must be signed in to change notification settings - Fork 0
/
nemium-b.html
289 lines (254 loc) · 14.2 KB
/
nemium-b.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
<!DOCTYPE html>
<html lang="es">
<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 href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;1,400;1,600;1,700&display=swap" rel="stylesheet">
<title>El Blog de Juan</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>
<div class="header">
<div class="wrapper">
<div class="header-container">
<header>
<nav class="proyect-menu">
<p>VARIANTES DEL PROYECTO</p>
<ul class="proyect-var">
<li><a href="index.html"> Nemium A</a></li>
<li><a href="nemium-b.html"> Nemium B</a></li>
<li><a href="nemium-c.html"> Nemium C</a></li>
<li><a href="nemium-d.html"> Nemium D</a></li>
<li><a href="nemium-e.html"> Nemium E</a></li>
</ul>
</nav>
<nav class="nav">
<details >
<summary>
Setup
</summary>
<ol>
<li> <a href="#google-chrome">Google Chrome</a> </li>
<li> <a href="#vscode">Visual Studio Code</a> </li>
<li><a href="#figma">Figma</a></li>
<li><a href="#github">GitHub</a></li>
</ol>
</details>
<details>
<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>
<!-- Chrome -->
<img src="./images/chrome.svg" alt="Logo de Google Chrome" title="Logo de Google Chrome" id="google-chrome">
<h3>Google Chrome</h3>
<p>Chrome va a ser <span>el navegador que utilizaremos en el curso</span> por su extenso soporte de nuevos estandares y
herramientas de desarrollo avanzadas y de amigable uso</p>
<!-- VSC -->
<img src="./images/visualstudiocode.svg" alt="Logo de Visual Studio Code" title="Logo de Visual Studio Code"
id="vscode">
<h3>Visual Studio Code</h3>
<p>Visual Studio Code es <span>el editor de texto más popular y potente del mercado</span> 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 desenvuelva</p>
<!-- FIGMA -->
<img src="./images/figma.svg" alt="Logo De Figma" title="Logo de Figma" id="figma">
<h3>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 <span>fácil uso</span> porque puede ser usado directamente desde el navegador</p>
<!-- Github -->
<img src="./images/github.svg" alt="Logo de GitHub" title="logo de GitHub" id="github">
<h3>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>“Este es el inicio de tu carrera como Desarrollador Web”
<p></p>
<span>
Leonidas Esteban
</span>
</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 http-equiv="X-UA-Compatible" content="IE=edge">
<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="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/image 5.png" alt="Cascading Style Sheets" title="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 contenido / ancho y alto</li>
<li>Padding / Relleno</li>
<li>Border / Bordes</li>
<li>Margin / Margenes</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>Estos son algunos vídeos de mi profesor</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"
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/k_r5Kh4wptQ" title="YouTube video player"
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>
</div>
</div>
</div>
<p>Si hay dudas repasar apuntes</p>
<div class="section-content">
<form action="#" class="form">
<input type="text" required placeholder="Nombre">
<input type="email" placeholder="Correo Electrónico">
<input type="submit" value="Suscribirme">
</form>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-content">
<p class="footer-copyright">© Juan González </p>
<div class="social-media">
<a href="https://www.instagram.com/toobrxketocare/" target="_blank"><img src="icons/instagram-svgrepo-com (2).svg" alt="Instagram"></a>
<a href="https://www.facebook.com/juanpablo.gonzalezramirez.98/" target="_blank"><img src="icons/facebook-svgrepo-com.svg" alt="Facebook"></a>
</div>
</div>
</footer>
</body>
</html>