Proyecto Final Desarrollo de Páginas Web

Taller de Desarrollo de
Páginas Web
Proyecto Final
Introducción
El proyecto final consta del desarrollo de maquetación de la imagen de una página web
a elegir usando para esto en lenguaje HTML5 y CSS3. Se plantean con la intención de
evaluar el cumplimiento de resolución de problemas y la comprensión e interiorización
de conceptos.
El momento adecuado para la implementación será al finalizar el módulo y cada una de

las respectivas evaluaciones, esto con el propósito de promover la integración de lo
aprendido y promover la retroalimentación, así como, incentivar la reflexión sobre los
propios saberes y aptitudes con el afán de aperturar el camino para los aprendizajes
posteriores.
Rúbrica
El proyecto final cuentan con su rúbrica de evaluación de carácter cualitativo, como

tallerista deberás elegir de acuerdo a las respuestas brindadas la puntuación de ellas y
realizar el registro pertinente, este será un instrumento importante para que puedas
elegir estrategias de reforzamiento.
El propósito de la presente rúbrica es apoyarte en la evaluación del proyecto final; se

evalúan tanto conceptos conceptos teóricos como prácticos, el formato te lo
presentamos a continuación:
Rúbrica de evaluación de la maquetación en lenguaje HTML y CSS del taller
de desarrollo de páginas web
Nivel Punta
Incipiente Aprendiz Básico je
Dimensión 1 3 6 (36 =
100%)
No se identifica el Se identifica el El manejo de la

Conocimiento del
manejo de la manejo mínimo sintaxis del lenguaje
lenguaje HTML
sintaxis del de la sintaxis del HTML se aplica de
(Sintaxis)
lenguaje HTML lenguaje HTML manera correcta
Articula de El código se
Código manera entiende, pero Articula de manera
(HTML) deficiente el presenta errores correcta el código
código tipográficos
Presenta más de Presenta dos

Manejo del
tres errores de errores de Presenta un error de
lenguaje
sintaxis en el sintaxis en el sintaxis en el código
(HTML)
código código
No se identifica el Se identifica el El manejo de la

Conocimiento del
manejo de la manejo mínimo sintaxis del lenguaje
lenguaje CSS
sintaxis del de la sintaxis del CSS se aplica de
(Sintaxis)
lenguaje CSS lenguaje CSS manera correcta
Articula de El código se
Código manera entiende, pero Articula de manera
(CSS) deficiente el presenta errores correcta el código
código tipográficos
Presenta más de Presenta dos

Manejo del
tres errores de errores de Presenta un error de
lenguaje
sintaxis en el sintaxis en el sintaxis en el código
(CSS)
código código
Total
Realiza la maquetación de alguna de las siguientes imágenes de páginas web usando
código HTML5 y CSS. ( valor 36)
Página web de un tienda en línea.
1
Para este proyecto se utilizaron las siguientes imágenes aunque puedes usar
cualesquiera otras:
Icono maya
https://www.pngwing.com/en/free-png-kjbes
Foto del primer alebrije

https://d36tnp772eyphs.cloudfront.net/blogs/2/2019/02/alebrijes-en-oaxaca-
940x626.jpg
De https://matadornetwork.com/es/alebrijes-en-oaxaca-en-busqueda/
Foto del segundo alebrije

https://jacoboymariaangeles.com/wp-content/uploads/2021/07/a3.jpg
de https://jacoboymariaangeles.com/
Iconos de redes sociales

https://iconos8.es/icon/set/social-media/ios-glyphs
2
Respuesta:
Página web de un tienda en línea (código HTML5)
<!DOCTYPE html>
<html lang="es-MX">
<head>
<link rel="stylesheet" href="style.css" />
<title>Artesanias Mexicanas</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-container">
<div class="navbar-brand">
<a href="index.html">
<img src="img/logo3.png" alt="Maya icon" />
</a>
</div>
<ul class="navbar-nav-left">
<li>
<a href="#">Arte</a>
</li>
<li>
<a href="#">Colecciones</a>
</li>
<li>
<a href="#">Conócenos</a>
</li>
</ul>
<ul class="navbar-nav-right">
<li><button class="btn btn-dark-outline">Inicia sesión</button></li>
<li><button class="btn btn-dark">Regístrate</button></li>
</ul>
</div>
</nav>


<section class="box box-a bg-primary text-center py-md">
<div class="box-inner">
<h2 class="text-xl">Una experiencia totalmente nueva en el arte</h2>
3
<p class="text-md">
Una tradición milenaria nos ha acompañado a través de todo este tiempo.
<a href="#"> Aprende más...</a>
</p>
</div>
</section>


<section class="box box-b bg-secondary grid-col-2">
<img src="https://d36tnp772eyphs.cloudfront.net/blogs/2/2019/02/alebrijes-en-
oaxaca-940x626.jpg" alt="" />
<div class="box-text">
<h2 class="text-xl">Alebrijes mexicanos</h2>
<p class="text-md">
Tallados en madera cumplen con las más altas exigencias en diseño.
</p>
<a href="#" class="btn btn-light-outline">Has tu pedido</a>
</div>
</section>


<section class="box box-c bg-secondary grid-col-2 grid-reversed">
<img src="https://jacoboymariaangeles.com/wp-content/uploads/2021/07/a3.jpg"
alt="" />
<div class="box-text">
<h2 class="text-xl">Creatividad e Imaginación</h2>
<p class="text-md">
Un sueño hecho realidad.
</p>
<a href="#" class="btn btn-light-outline">Has tu pedido</a>
</div>
</section>
<div class="divider"></div>
<footer class="footer">
<div class="footer-container">
<div class="social">
<a href="https://spotify.com">
<img src="./img/social-spotify.svg" alt="" />
</a>
<a href="https://facebook.com">
<img src="./img/social-facebook.svg" alt="" />
</a>
<a href="https://pinterest.com">
<img src="./img/social-pinterest.svg" alt="" />
4
</a>
<a href="https://instagram.com">
<img src="./img/social-instagram.svg" alt="" />
</a>
<a href="https://youtube.com">
<img src="./img/social-youtube.svg" alt="" />
</a>
<a href="https://twitter.com">
<img src="./img/social-twitter.svg" alt="" />
</a>
</div>
<p>© 2022 Todos los derechos reservados al arte popular.</p>
</div>
</footer>
</body>
</html>
Página web de un tienda en línea (código CSS)
@import url('https://fonts.googleapis.com/css2?
family=Open+Sans:wght@400;600;700&display=swap');
:root {
--color-primary: #006241;
--color-secondary: #d50032;
--color-extra: #d4e9e2;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.4;
color: #000;
}
a{
5
color: #000;
}
ul {
list-style: none;
}
p{
margin: 5px 0;
line-height: 1.7;
}
img {
max-width: 100%;
}
section a {
color: #fff;
}
/* Navbar */
.navbar {
width: 100%;
height: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1440px;
margin: 0 auto;
}
.navbar ul {
display: flex;
}
.navbar li {
6
margin: 0 15px;
font-weight: bold;
}
.navbar a {
color: #000;
text-decoration: none;
}
.navbar a:hover {
color: var(--color-primary);
}
.navbar-brand img {
width: 50px;
height: 50px;
}
.navbar-nav-left {
text-transform: uppercase;
flex: 1;
margin-left: 20px;
}
.navbar-nav-right li:nth-child(2) {
margin: 0 5px;
}
/* Footer & Social */

.footer-container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 30px 30px;
}
.social {
display: flex;
margin: 20px 0;
}
.social img {
width: 35px;
7
height: 35px;
}
.social a {
margin-right: 20px;
}
.divider {
width: 95%;
height: 1px;
background-color: #ccc;
margin: 40px auto;
}
/* Box */
.box {
margin-bottom: 30px;
}
.box-inner {
max-width: 700px;
margin: 0 auto;
}
.box-text {
max-width: 500px;
text-align: center;
justify-self: center;
padding: 20px 0;
margin: 0 auto;
}
.box-text .btn {
margin-top: 20px;
}
/* Grid Styles */
.grid-col-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
8
}
.grid-reversed :first-child {
order: 2;
}
/* Buttons */
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
}
.btn-dark-outline {
border-color: #000;
color: #000;
}
.btn-dark-outline:hover,
.btn-light-outline:hover {
background-color: rgba(0, 0, 0, 0.06);
}
.btn-light-outline {
border-color: #fff;
color: #fff;
}
.btn-dark {
background-color: #000;
color: #fff;
}
/* Backgrounds */
.bg-primary {
background-color: var(--color-primary);
color: #fff;
9
}
.bg-secondary {
background-color: var(--color-secondary);
color: #fff;
}
/* Text Styling */
.text-center {
text-align: center;
}
.text-xl {
font-size: 50px;
letter-spacing: 6px;
font-weight: 600;
}
.text-md {
font-size: 24px;
}
/* Padding */
.py-md {
padding: 20px 0;
}
10
Página web informativa. (con tipo efecto paralaje o parallax)
11
Para este proyecto se utilizaron las siguientes imágenes aunque puedes usar
cualesquiera otras:
Primer imagen de PILARES

http://187.216.164.109/~edc/moodle/pluginfile.php/1/theme_academi/slide1image/
1630643581/pilares.jpg
Segunda imagen
https://pilares.cdmx.gob.mx/assets/images/ajedrez.jpg
Tercera imagen
https://www.capital21.cdmx.gob.mx/noticias/wp-content/uploads/2021/01/pilares_02.jpg
12
Respuesta:
Página web informativa (código HTML5)
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>PILARES - CDMX</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
PILARES
</span>
</div>
</div>
<section class="section section-light">

<h2>¿Qué es?</h2>
<p>
Un campo formativo para el aprendizaje de diversos oficios que brindan el dominio
o conocimiento de habilidades manuales, una propuesta formativa para aproximar,
descubrir y/o potenciar a los usuarios a nuevas opciones e incluso desarrollar
competencias útiles para la vida.
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Recreación
</span>
</div>
</div>
<section class="section section-dark">

<h2>Proyecto</h2>
<p>
Buscamos disminuir violencias y desigualdades. La política está enfocada
principalmente en la atención de las zonas con menor Índice de Desarrollo Social,
mayor densidad poblacional, que cuentan con mayor presencia de jóvenes de entre 15 y
29 años de edad, y en donde existan problemas de violencia.
13
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Conexión
</span>
</div>
</div>
<section class="section section-dark">

<h2>¿Qué ofrece?</h2>
<p>
Cualquier persona puede iniciar o continuar sus estudios -desde alfabetización hasta
licenciatura-, así como acceder a talleres deportivos, culturales y de capacitación en
oficios para la producción, comercialización y emprendimiento que permitan lograr la
autonomía económica. En los PILARES se cuenta con equipos de cómputo con internet.
Todas las actividades son gratuitas.
</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Empoderamiento
</span>
</div>
</div>
</body>
</html>
14
Página web informativa (código CSS)
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3{

position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('http://187.216.164.109/~edc/moodle/pluginfile.php/1/
theme_academi/slide1image/1630643581/pilares.jpg');
min-height:100%;
}
.pimg2{
background-image:url('https://pilares.cdmx.gob.mx/assets/images/ajedrez.jpg');
min-height:400px;
}
.pimg3{
background-image:url('https://www.capital21.cdmx.gob.mx/noticias/wp-content/
uploads/2021/01/pilares_02.jpg');
min-height:400px;
}
15
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#f4f4f4;
color:#666;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:#fff;
padding:20px;
}
.ptext .border.trans{
background-color:transparent;
}
16
Página web con video de fondo.
Para este proyecto se utilizaron el siguiente video e imágenes aunque puedes usar
cualesquiera otras:
Video de fondo
https://drive.google.com/uc?export=download&id=15c1CVTTzprJLJbcoqVgDvDq-lze_r3TJ
Imágenes de redes sociales

https://i.ibb.co/HrfVRcx/menu.png
https://i.ibb.co/x7P24fL/facebook.png
https://i.ibb.co/Wnxq2Nq/twitter.png
https://i.ibb.co/ySwtH4B/instagram.png
17
Respuesta:
Página web con video de fondo (código HTML5)
<!DOCTYPE html>
<html>
<head>
<title>Viaja - CDMX</title>
<link rel="stylesheet" href="stylevid.css">
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">Viaja</h2>
<div class="toggle"></div>
</header>
<video src="https://drive.google.com/uc?
export=download&id=15c1CVTTzprJLJbcoqVgDvDq-lze_r3TJ" muted loop
autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Nunca dejes de </h2>
<h3>Explorar el mundo</h3>
<p>Todos los viajes tienen destinos secretos que te toca descubrir.</p>
<a href="#">Explora</a>
</div>
<ul class="social">
<li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
<li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
<li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
</ul>
</section>
</body>
</html>
18
Página web con video de fondo (código CSS)
@import url('https://fonts.googleapis.com/css?
family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
}
header .logo
{
color: #fff;
cursor: pointer;
}
.toggle
{
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/HrfVRcx/menu.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.showcase
{
position: absolute;
19
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
background: #111;
transition: 0.5s;
z-index: 2;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5e5e5e;
mix-blend-mode: overlay;
}
.text
{
position: relative;
z-index: 10;
}
.text h2
{
font-size: 5em;
font-weight: 800;
color: #fff;
line-height: 1em;
20
}
.text h3
{
font-size: 4em;
font-weight: 700;
color: #fff;
line-height: 1em;
}
.text p
{
font-size: 1.1em;
color: #fff;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a
{
font-size: 1em;
background: #fff;
padding: 10px 30px;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
.social
{
position: absolute;
z-index: 10;
bottom: 20px;
display: flex;
justify-content: center;
}
.social li
{
21
list-style: none;
}
.social li a
{
margin-right: 20px;
filter: invert(1);
transform: scale(0.5);
transition: 0.5s;
}
@media (max-width: 991px)

{
.showcase,
.showcase header
{
padding: 40px;
}
.text h2
{
font-size: 3em;
}
.text h3
{
font-size: 2em;
}
}
22
Página web de banda o cantante favorito.
Para este proyecto se utilizaron el siguiente video e imágenes aunque puedes usar
cualesquiera otras:
Imagen de fondo
https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg
Imágenes de redes sociales

https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Youtube
%20Logo.png
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Spotify
%20Logo.png
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Facebook
%20Logo.png
23
Respuesta:
Página web banda o cantante (código HTML5)
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>X Æ A-12 band</title>
<link rel="stylesheet" href="styleban.css" />
</head>
<body>
<header class="main-header">
<nav class="nav main-nav">
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">TIENDA</a></li>
<li><a href="#">CONÓCENOS</a></li>
</ul>
</nav>
<h1 class="band-name band-name-large">X Æ A-12</h1>
<div class="container">
<button type="button" class="btn btn-header">Escucha nuestro nuevo
album</button>
</div>
<button type="button" class="btn btn-header btn-play">►</button>
</header>
<section class="content-section container">
<h2 class="section-header">TOURS</h2>
<div>
<div class="tour-row">
<span class="tour-item tour-date">JUL 16</span>
<span class="tour-item tour-city">CDMX, México</span>
<span class="tour-item tour-arena">Foro Sol</span>
<button type="button" class="tour-item tour-btn btn btn-primary">COMPRAR
BOLETOS</button>
</div>
<span class="tour-item tour-arena">Foro Lucerna</span>
BOLETOS</button>
</div>
24
<span class="tour-item tour-city">Guadalajara, JAL, México</span>
<span class="tour-item tour-arena">C3 Stage GDL</span>
BOLETOS</button>
</div>
<span class="tour-item tour-date">AUG 2</span>
<span class="tour-item tour-city">León, GTO, México</span>
<span class="tour-item tour-arena">Auditorio Mateo Herrera</span>
BOLETOS</button>
</div>
<span class="tour-item tour-date">AUG 7</span>
<span class="tour-item tour-arena">Pabellón del Palacio de los
Deportes</span>
BOLETOS</button>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container main-footer-container">
<h3 class="band-name">X Æ A-12</h3>
<ul class="nav footer-nav">
<li>
<a href="https://www.youtube.com" target="_blank">
<img
src="https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Youtube
%20Logo.png">
</a>
</li>
<li>
<a href="https://www.spotify.com" target="_blank">
<img
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Spotify
%20Logo.png">
</a>
</li>
<li>
25
<a href="https://www.facebook.com" target="_blank">
<img
Development/master/Introduction%20to%20CSS/Lesson%203/Images/Facebook
%20Logo.png">
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
Página web banda o cantante (código CSS)
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{
font-family: 'Montserrat', sans-serif;
color: #777;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
.nav ul {
margin: 0;
}
.nav li {
display: inline;
}
.nav a {
padding: .5em;
color: white;
26
}
.main-nav {
text-align: center;
font-size: 1.1em;
font-weight: lighter;
border-bottom: 1px solid rgba(255, 255, 255, .3)
}
.main-nav li {
padding: 0 5%;
}
.nav a:hover {
background-color: rgba(255, 255, 255, .3)
}
.main-header {
background-color: rgba(0, 0, 0, .6);
background-image: url("https://images.pexels.com/photos/1763075/pexels-photo-
1763075.jpeg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}
.band-name {
text-align: center;
margin: 0;
font-size: 4em;
font-weight: normal;
color: white;
}
.band-name-large {
font-size: 8em;
}
.content-section {
margin: 1em;
}
.container {
27
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
}
.section-header {
font-weight: normal;
color: #333;
text-align: center;
font-size: 2.5em;
}
.main-footer {
background-color: #080707;
color: white;
padding: .25em 0;
}
.main-footer-container {
display: flex;
}
.main-footer-container ul {
flex-grow: 1;
text-align: end;
}
.footer-nav li {
padding: 0 .5em;
}
.footer-nav img {
width: 30px;
height: 30px;
}
.btn {
text-align: center;
vertical-align: middle;
padding: .67em .67em;
cursor: pointer;
}
28
.btn-header {
margin: .5em 15% 2em 15%;
color: white;
border: 2px solid #ffffff;
border-radius: 0;
font-size: 1.5em;
font-weight: lighter;
padding-left: 2em;
padding-right: 2em;
}
.btn-header:hover {
}
.btn-play {
display: block;
margin: 0 auto;
color: #ffffff;
font-size: 4em;
border-radius: 50%;
width: 100px;
height: 100px;
padding: 0;
text-align: center;
}
.btn-primary {
color: white;
background-color: #56CCF2;
border: none;
border-radius: .3em;
font-weight: bold;
}
.btn-primary:hover {
background-color: #2D9CDB;
}
.tour-row {
border-bottom: 1px solid black;
padding-bottom: 1em;
29
margin-bottom: 1em;
}
.tour-row:last-child {
border: none;
}
.tour-item {
padding-right: .5em;
}
.tour-date {
color: #555;
width: 11%;
font-weight: bold;
}
.tour-city {
width: 24%;
}
.tour-arena {
width: 42%;
}
.tour-btn {
max-width: 19%;
}
30
Referencias
De Luca D., (2011). HTML5, Manuales USERS, Fox Andina.
Recio García J.A., (2016). HTML5, CSS3 y JQuery. Curso Práctico, Grupo Editorial RA-MA.
Frain B., (2020). Responsive Web Design with HTML5 and CSS: Develop future-proof
responsive websites using the latest HTML5 and CSS techniques, Third Edition, Packt
Publishing Ltd.
Rebah H.B., Boukthir H., Chedebois A., (2022). Website Design and Development with
HTML5 and CSS3, John Wiley & Sons.
Robbins J., (2018). Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript,
and Web Graphics, Fifth Edition, O’Reilly Media, Inc.
Desarrolladores web, Tutorial para HTML5, Recuperado 18 de marzo de 2022, de

https://desarrolladoresweb.org/tutorial-html-html5-completo/
Desarrolladores web, Tutorial para CSS, Recuperado 18 de marzo de 2022, de

https://desarrolladoresweb.org/curso-css-css3-completo-desde-0/
Primeros pasos en la Web - Aprende sobre desarrollo web | MDN. (s. f.). MDN Web Docs.
Recuperado 18 de marzo de 2022, de
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web
CSS | MDN. (s. f.). MDN Web Docs. Recuperado 18 de marzo de 2022, de
https://developer.mozilla.org/es/docs/Web/CSS
Román García, J. (s. f.). Lenguaje HTML5. Recuperado 18 de marzo de 2022, de

https://lenguajehtml.com/html/
Román García, J. (s. f.-a). Lenguaje CSS. Recuperado 18 de marzo de 2022, de

https://lenguajecss.com/css/
Jaiswal, S. (s. f.). Learn HTML Tutorial - javatpoint. Recuperado 18 de marzo de 2022, de
https://www.javatpoint.com/html-tutorial
Jaiswal, S. (s. f.). Learn CSS Tutorial - javatpoint. Recuperado 18 de marzo de 2022, de
https://www.javatpoint.com/css-tutorial
W3Schools Free Online Web Tutorials. (s. f.). W3Schools. Recuperado 18 de marzo de
2022, de https://www.w3schools.com/
31

Proyecto Final Desarrollo de Páginas Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Proyecto Final Desarrollo de Páginas Web

Cargado por

Copyright:

Formatos disponibles

Taller de Desarrollo de

El momento adecuado para la implementación será al finalizar el módulo y cada una de

El proyecto final cuentan con su rúbrica de evaluación de carácter cualitativo, como

El propósito de la presente rúbrica es apoyarte en la evaluación del proyecto final; se

No se identifica el Se identifica el El manejo de la

Presenta más de Presenta dos

No se identifica el Se identifica el El manejo de la

Presenta más de Presenta dos

Página web de un tienda en línea.

Foto del primer alebrije

Foto del segundo alebrije

Iconos de redes sociales

Página web de un tienda en línea (código CSS)

/* Footer & Social */

Primer imagen de PILARES

Página web informativa (código HTML5)

<section class="section section-light">

<section class="section section-dark">

<section class="section section-dark">

.pimg1, .pimg2, .pimg3{

Imágenes de redes sociales

Página web con video de fondo (código HTML5)

@media (max-width: 991px)

Imágenes de redes sociales

Página web banda o cantante (código HTML5)

Página web banda o cantante (código CSS)

De Luca D., (2011). HTML5, Manuales USERS, Fox Andina.

Desarrolladores web, Tutorial para HTML5, Recuperado 18 de marzo de 2022, de

Desarrolladores web, Tutorial para CSS, Recuperado 18 de marzo de 2022, de

Román García, J. (s. f.). Lenguaje HTML5. Recuperado 18 de marzo de 2022, de

Román García, J. (s. f.-a). Lenguaje CSS. Recuperado 18 de marzo de 2022, de

También podría gustarte