Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 2.43 KB

README.md

File metadata and controls

44 lines (34 loc) · 2.43 KB

Auxiliar 3: HTML y CSS

En esta actividad deben ✨embellecer✨ la página de login (o la de register) del proyecto usando las propiedades de CSS que gusten (la idea es que no utilicen Bootstrap, al menos para esta actividad, para sus proyectos recomendamos fuertemente Bootstrap u otro framework).

Esta vez no hay instrucciones establecidas, solo usen su creatividad para obtener un resultado similar a este para la página de registro del proyecto:

image

Solo deben trabajar con el archivo register.html que está en todoapp/templates/todoapp/, y con style.css que está en todoapp/static/todoapp/

(Se recomienda fuertemente ver el video de la auxiliar para entender cómo partir) https://youtu.be/kku0yczjW-4

Algunos recordatorios:

Correr la aplicación (para realizar la actividad)

  1. git clone https://github.com/Aux-Ing-1/Auxiliar4-html-css.git
  2. cd Auxiliar4-html-css.git
  3. python -m venv env crean un ambiente virtual.
  4. Activamos el ambiente virtual A) En linux source env/bin/activate B) En Windows env/Scripts/activate
  5. pip install --upgrade pip
  6. pip install -r requirements.txt
  7. No vamos a hacer las migraciones, por lo que vamos a ignorar el mensaje al hacer el paso 8.
  8. python manage.py runserver
  9. Luego en el navegador se dirigen a http://localhost:8000/register
  10. Comienzan a editar el archivo register.html

Linkear hoja de estilos

<!-- Estilos locales: -->
<link rel="stylesheet" type="text/css" href="static/todoapp/style.css">

<!-- Estilos de Bootstrap: No se usará para esta actividad -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

Estas líneas deben ir dentro del <head>...</head> de su archivo .html. Luego podrán usar los estilos que definan en el archivo style.css, o los estilos de Bootstrap guiándose por la documentación (por ejemplo, los botones)

Enlaces