-
Notifications
You must be signed in to change notification settings - Fork 0
/
nemium-c.html
288 lines (274 loc) · 14.3 KB
/
nemium-c.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
<!DOCTYPE html>
<html lang="es" class="nemium-c">
<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>Nemium C</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://jsebastianreyes.github.io/Nemium/" />
<meta property="og:image" content="https://jsebastianreyes.github.io/Nemium/images/visual-studio-code.png" />
<meta property="og:description" content="Todo lo que necesitas saber en tu día a día como Frontend">
<link rel="stylesheet" href="./css/nemium-c.css">
<link rel="stylesheet" href="./css/style-logical.css">
<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">
<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=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
</head>
<body claas="nemium">
<div class="hero"></div>
<div class="header">
<div class="wrapper">
<div class="header-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>
<header>
<nav>
<p class="title-menu">Variantes del Proyecto</p>
<ul class="menu-ppal">
<li ><a href="./index.html">Nemium A</a></li>
<li><a href="./nemium-b.html">Nemium B</a></li>
<li id="pagina-actual"><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>
<p class="title-menu">Contenido</p>
<div class="menu-contenidos">
<h5>Setup</h5>
<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>
<h5>Conceptos esenciales del Desarrollo Web</h5>
<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>
</div>
</nav>
</header>
</div>
</div>
</div>
<main class="main">
<div class="wrapper">
<div class="main-content">
<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 <b>el navegador que utilizaremos en el curso</b> 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 edito de codigo visual studio code"
title="Logo del edito de codigo visual studio code">
<h3 id="vsc">Visual Studio Code</h3>
<p>Visual Studio Code es el <b>editor de texto más popular y potente del mercado actualmente,</b> 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 <b>fácil uso</b> porque puede ser usado directamente desde el navegador.</p>
<img src="./images/github-white.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 <b> te encuentran otras programadoras y
programadores</b> 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>
<!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.jpg" alt="Estructura del arbol 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="Estructura de hoja de estilos en cascada" />
</section>
<hr />
<section class="section-content hidden-number">
<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>
<section class="section-content">
<h2>Nuestros Vídeos</h2>
<div class="slider">
<scroll-container class="slider-container">
<scroll-page class="slider-slide" id="video">
<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="video2">
<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="video3">
<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-container>
<div class="slider-bullet-list">
<a href="#video" class="slider-bullet"></a>
<a href="#video2" class="slider-bullet"></a>
<a href="#video3" class="slider-bullet"></a>
</div>
</div>
</section>
<div class="section-content">
<p class="txt-suscribete">
Si tienes alguna pregunta escríbeme a <a href="mailto:me@leonidasesteban.com">me@leonidasesteban.com</a>
</p>
</div>
<div class="section-content hidden-number">
<h3>Suscríbete a nuestro newsletter</h3>
<form action="#" class="form">
<input type="text" placeholder="Nombre" required>
<input type="email" placeholder="Correo electrónico" required>
<input type="submit" value="Suscribirme">
</form>
</div>
</div>
</div>
</main>
</body>
<footer>
<div class="wrapper">
<div class="footer-content">
<p>© Leonidas Esteban 2021</p>
</div>
<div class="footer-content">
<a href="#"><img src="./images/instagram-white.png"></a>
<a href="#"><img src="./images/facebook-white.png"></a>
<a href="#"><img src="./images/twitter-white.png"></a>
</div>
</div>
</footer>
</html>