-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
114 lines (83 loc) · 3.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fullstack 2024</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
</head>
<body>
<!--
Ejercicios <3
1) Agregar un heading nivel 2, y 2 parrafos.
2) Crear una ordered list con 3 items.
3) Crear una unordered list con 3 items.
4) Crear 2 <div>, dentro de cada div: agregar una imagen, un h2 para mostrar un titulo para esa imagen y un <p> con breve descripcion.
5) Crear 3 enlaces/links apuntando a sitios diferentes.
6) Crear menú de navegación <nav> usando una unordered list <ul> que contenga 3 items con links cada uno.
7) Crear un form con un input tipo texto, que tenga placeholder Buscar y un botón que diga Buscar.
8) Agregar al form, un input tipo texto para Nombre.
9) Agregar al form, un textarea para Descripción.
10) Crear footer que contenga el siguiente párrafo: © 2024 Fullstack.
11) Plus: agregar placeholders en los inputs y textarea
12) Plus: agregar labels y ids para input y textarea.
13) Plus: agregar 3 items más, dentro de un item de la <nav>, usando <ul> y <li>
14) Plus: agregar 2 inputs más con labels y ids que elijan.
Más práctica y ejercicios online en: https://www.w3schools.com/html/html_exercises.asp
Documentación:
https://www.w3schools.com/html/html_intro.asp
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML
Ejercicios CSS <3
Documentación CSS en: https://www.w3schools.com/css/default.asp
Documentación Fonts: https://www.w3schools.com/css/css_font_google.asp
Práctica y ejercicios online: https://www.w3schools.com/css/exercise.asp
Ejercicio 1:
Aplicar color de fondo del cuerpo (body).
Aplicar color de texto del título <h1>.
Aplicar colores a los párrafos.
Ejercicio 2: Estilos de fuentes
Cambiar la fuente del título <h1> a Arial.
Cambiar el tamaño de la fuente del párrafo a 18px.
Plus: Agregar otra fuente de https://fonts.google.com/ y usarla en algún párrafo.
Ejercicio 3: Bordes y márgenes
Aplicar un borde sólido de 1px de color claro a un párrafo (<p>).
Aumentar el margen superior del título <h1> a 20px.
Agregar un padding de 10px alrededor del contenido del párrafo.
Ejercicio 4: Estilos en botón
Cambiar el color de fondo del botón a verde (#28a745) y el color del texto a blanco.
Agregar bordes redondeados (border-radius) de 5px.
Agregar padding 10px.
Aplicar ancho del botón a 100px.
Establecer margen superior e inferior de 10px.
Quitar el color del borde del botón.
Ejercicio 5: Inputs del formulario
Agregar padding de 5px.
Quitar bordes.
Agregar márgenes superiores e inferiores de 5px entre cada control
Plus: Aplicar un tipo de fuente para los labels de cada control.
Plus: Aplicar width y height al textarea. Ejemplo: 300px ancho y 100px alto.
Ejercicio 6: Footer
Aplicar color de fondo.
Cambiar color del texto del footer.
Agregar padding de 20px.
Alinear texto al centro.
Ejercicio 7: Header
Crear etiqueta header con un texto.
Aplicar color de fondo y color de texto.
Agregar padding de 50px.
Alinear textos al centro.
Ejercicio 8: Nav menu
Aplicar color de fondo a la etiqueta nav y color de texto.
Eliminar las bullets de la <ul> con: list-style: none;
En cada item <li>, agregar padding 10px y aplicar display: inline-block; para mostrar los elementos en línea.
Plus: Ocultar el submenu (ul dentro del li) con display: none;
Ejercicio 9: Diseño responsive - Media queries
Agregar media queries para que el color de fondo del body tenga un color diferente en distintas pantallas.
Ejemplos: @media screen and (min-width: 768px) {}
@media screen and (min-width: 1280px) {}
-->
<h1>Formación FullStack <3</h1>
<p>Hola!</p>
</body>
</html>