-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·279 lines (268 loc) · 12.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
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Nunito:wght@400;600;700&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500;700&display=swap"
rel="stylesheet">
<!-- <link rel="stylesheet" href="./css//index -phisico.css"> -->
<link rel="stylesheet" href="./css/index -logical.css">
<link rel="stylesheet" href="./css/fonts.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=Roboto:ital,wght@0,400;0,700;1,300;1,500&display=swap"
rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="../icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="60x60" href="../icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="../icons//apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="../icons//apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="../icons//apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./icons/">
<link rel="apple-touch-icon" sizes="144x144" href="../icons//apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="../icons//apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="../icons//apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./icons//android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="../icons//favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./icons//favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="../icons//favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="../ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>Blog de Oswaldo</title>
</head>
<body>
<div class="hero"> </div>
<div class="header">
<div class="wrapper">
<div class="header-content">
<header>
<nav>
<details>
<summary>
Setup
</summary>
<ol>
<a href="#google-chrome">
<li>Google Chrome</li>
</a>
<a href="#Visual">
<li>Visual Studio Code</li>
</a>
<a href="#Figma">
<li>Figma</li>
</a>
<a href="#Githud">
<li>Githud</li>
</a>
</ol>
</details>
<details>
<summary>
Conceptos esenciales del Desarrollo Web
</summary>
<ol>
<a href="#Html">
<li>Qué es HTML</li>
</a>
<a href="#Etique">
<li>Etiquetas</li>
</a>
<a href="#Dom">
<li>Dom</li>
</a>
<a href="#Seman">
<li>Semántica</li>
</a>
<a href="#Atrib">
<li>Atributos</li>
</a>
<a href="#Css">
<li>Qué es CSS</li>
</a>
</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 la carrera como desarrollador, Empesaras Aprendiendo ,HTML CSS para la crecion de contenido
en
el Nivel 2 aprederas de Componentes ,En el Nivel 3 de Layouts
</p>
<hr>
<section class="section-content">
<h2 style="font-size: 30px">
Setup
</h2>
<img id="google-chrome" src="./images/GoogleChrome.png" alt="Logo de Google Chrone"
title="Logo de Google Chrone" />
<h3>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 id="Visual" src="./images/Visual_Studio_Code.png" alt=" Logo de Google Chrone"
title="Logo de Google Chrone" />
<h3>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 id="Figma" src="./images/Figma.png" alt="Logo de Figma" title="Logo de Chrone" />
<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 fácil uso porque puede ser usado directamente desde el navegador.
</p>
<img id="Githud" src="./images/GitHub.png" backgroung="white" alt="Logo de Githud"
title="Logo de Githud" />
<h3>Githud</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></span> Leonidas Esteban </span></p>
</blockquote>
<hr>
</section>
<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="Etique">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" width="900" height="470" alt="Estructura de Arbol que representa al Dom"
title="Estrucura Dom" />
<h3 id="Seman">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="Atrib">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/icss.png" alt="Estilo en Cascada">
</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-contect">
<h2> Hola estos son los Slider de mi Contenido</h2>
<div class="slider">
<scroll-conteiner class="slider-container">
<scroll-pages class="slider-slider" id="video-1">
<img width="500px" heigh="400px" class="imagensli"src="./images/dom.png" alt="">
</scroll-pages>
<scroll-pages class="slider-slider" id="video-2">
<img width="500px" heigh="400px" class="imagensli"src="./images/icss.png" alt="">
</scroll-pages>
<scroll-pages class="slider-slider" id="video-3">
<img width="500px" heigh="400px" class="imagensli"src="./images/GitHub.png" alt="">
</scroll-pages>
</scroll-conteiner>
<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>
<h3>Modelo de caja</h3>
<p>Si tienes alguna pregunta escríbeme a [email protected]</p>
<a href="mailto:[email protected]"> [email protected]
<a href="https://leonidasesteban.com" target="_blank">Bibliografia</a>
</a>
<section class="section-content">
<form action="#" class="form">
<h2>Ingrese a Nuestro Letter</h2>
<input type="text" placeholder="Nombre" required>
<input type="email" placeholder="Coreo Electronico" required>
<input type="submit" value="Suscribirme">
</form>
</section>
</div>
</div>
</div>
</main>
</body>
</html>