Cómo se crea un Frontend?
Primero hay que hacer un HTML semántico.
{% load static %}
<!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="stylesheet" href="{% static 'polls/reset.css' %}">
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
<title>Premios Platzi App</title>
</head>
<body>
<header>
<h1>Premios Platzi App</h1>
</header>
<main>
{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are avaible.</p>
{% endif %}
</main>
<footer>
<a href="<https://platzi.com/>">Platzi</a>
<a href="#">Contacto</a>
<a href="#">Políticas y privacidad</a>
<a href="#">Terminos y Condiciones</a>
</footer>
</body>
</html>
En la etiqueta main colocamos la lógica que hicimos con el engine de Django.
Colocamos los estilos y listo
body, header, ul, li, footer {
align-items: center;
display: flex;
justify-content: center;
}
header, ul {
background: linear-gradient(
to right,
hsl(98, 100%, 62%),
hsl(204, 100%, 59%)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
body {
background: hsl(204, 100%, 5%);
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
}
header {
color: #71622d;
font-size: 72px;
height: 60px;
padding: 100px 50px 50px;
}
ul{
flex-direction: column;
}
li {
border: 1px solid white;
font-size: 28px;
margin-bottom: 20px;
padding: 50px;
width: 500px;
}
a {
color: white;
text-decoration: none;
}
footer {
justify-content: space-evenly;
padding: 50px 0;
width: 100vw;
}
Creamos la estructura básica de un HTML.
{% load static %}
<!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="stylesheet" href="{% static 'polls/style.css' %}">
<link rel="stylesheet" href="{% static 'polls/mobile_detail.css' %}">
<link rel="stylesheet" href="{% static 'polls/detail.css' %}" media="(min-width: 930px)">
<title>{{ question.question_text }}}</title>
</head>
<body>
<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
<fieldset>
<legend><h1>{{ question.question_text }}</h1></legend>
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
{% for choice in question.choice_set.all %}
<input
type="radio"
name="choice"
id="choice{{ forloop.counter }}"
value="{{ choice.id }}"
>
<label for="choice{{ forloop.counter }}">
{{ choice.choice_text }}
</label>
<br>
{% endfor %}
</fieldset>
<input type="submit" value="Enviar">
</form>
</body>
</html>