Introducción a Git & GitHub
Angela Sofía Osorio
Bienvenidos a la clase de introducción a Git y GitHub. En esta clase veremos algunos comandos básicos de Git, como configurar y conectar Gitbash a GitHub y como llevar un control de versiónes local y remoto.
Para seguir con esta clase, es necesario que veas primero este video en dónde aprenderemos a instalar las herramientas que utilizaremos en las siguientes clases 🦝.
Para poder seguir los ejercicios, puedes crear un directorio(carpeta) y dos archivos dentro: index.html y style.css. Al final de esta clase serás capás de subir tu proyecto a GitHub y clonar este u otros repositorios.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Este es mi primer sitio Web. Del curso de desarrollo web Frontend de SofiDev"/>
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<img class="logo" id="logo-header" src="./assets/img/avatar.jpg" alt="Logo del sitio. imagen de sofidev 3d" />
<div>
<nav>
<ul>
<li><a href="https://itssofi.dev/" target="_blank">Home</a></li>
<li><a href="#tienda">Tienda</a></li>
<li><a href="#acerca">Acerca de Nosotros</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<h1>Ropa para tu Marmota</h1>
<p>Las mejores ofertas en ropa para Marmotas</p>
<a class="hero__boton" href="https://itssofi.dev/" target="_blank">Ir al portafolio</a>
</section>
<section class="tienda">
<div>
<article>
<img src="https://m.media-amazon.com/images/I/61GUkLP4rHL.jpg" alt="Gabinete PC, color rosa">
<h3>Gabinete, ventilación Led</h3>
<span>Envío 3-4 días</span>
<p>$50.00</p>
<div>
<button>Agregar al carrito</button>
<button>Comprar</button>
</div>
</article>
</div>
</section>
</main>
</body>
</html>style.css
*{
box-sizing: border-box;
}
img {
width: 100%;
max-width: 20rem;
margin-top: 2rem;
}
.logo{
width:30px;
}
a[href='#tienda']{
color:red;
}
body{
background-color: black;
}
.hero__boton{
background: rgb(37, 37, 37);
padding: 10px;
width: 30px;
color: white;
border-radius: 15px;
border: 2px solid #0faba7;
text-decoration: none;
}
h1{
width: 400px;
height: 100px;
padding: 5px 10px;
}