Hola!
Tengo un problema con el curso de Responsive Web Design, en el proyecto de certificación nro 3 “Documentación Técnica” cumpliendo todos los requisitos no me deja pasar dicha prueba para seguir con normalidad el curso
Me dice que mi proyecto debe tener al menos una media query y lo tiene pero me sigue saltando ese error
Alguna forma para solucionarlo?
Mi código está guardado en la base de datos de mi usuario
Welcome to our community!
Post your entire html and css code.
In the code editor click on the circled button in the image to get two groups of backticks ```. Then, put your code in between these backtick groups.
Hi Dobar!
Thanks for you help
This is my html code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="canonical" href="">
<meta name="robots" content="index"/>
<meta name="description" content="Página de Documentación Técnica como proyecto de certificación para el curso Responsive Web Design de freeCodeCamp.org">
<title>Documentación Técnica</title>
</head>
<body>
<nav id="navbar">
<form action="" class="color-picker">
<fieldset>
<legend class="sr-only">Escoge un tema</legend>
<label for="dark" class="sr-only">Oscuro</label>
<input
type="radio"
name="theme"
value="dark"
id="dark" checked>
<label for="light" class="sr-only">Claro</label>
<input
type="radio"
name="theme"
value="light"
id="light">
</fieldset>
</form>
<header>Estructura Básica de HTML5</header>
<ul>
<li><a class="nav-link" href="#Significado_de_HTML">Significado de HTML</a></li>
<li><a class="nav-link" href="#HTML5">HTML5</a></li>
<li><a class="nav-link" href="#Estructura_HTML5">Estructura HTML5</a></li>
<li><a class="nav-link" href="#Estructura_Semántica">Estructura Semántica</a></li>
<li><a class="nav-link" href="#Etiquetas_Principales">Etiquetas Principales</a></li>
</ul>
</nav>
<main id="main-doc">
<section id="Significado_de_HTML" class="main-section">
<header>Significado de HTML</header>
<p>Cuando hablamos de HTML5 lo primero que tenemos que saber es que es la última versión de la tecnología HTML, cuyas siglas corresponden a <strong>“HyperText Markup Language”</strong>, que tiene el siguiente significado:</p>
<ul>
<li><strong>HyperText</strong>, cuyo significado es hipertexto, que no es más que un texto que enlaza con otros contenidos, que pueden ser otro texto u otro archivo. Esto es la base del funcionamiento de la web tal y como la conocemos, que no es más que páginas y recursos interconectados.</li>
<li><strong>Markup</strong>, que significa marca o etiqueta, ya que todas las páginas web están construidas en base a etiquetas, desde las primeras versiones hasta las últimas etiquetas de HTML5. Un ejemplo de una etiqueta HTML es la que identifica a un párrafo, que se compone de la etiqueta, el contenido de la etiqueta y el cierre del párrafo: <code><p>HOLA</p></code></li>
<li><strong>Languaje</strong>, cuyo significado es lenguaje, porque HTML es un lenguaje, es decir, tiene sus normas, tiene su estructura y una serie de convenciones que nos sirven para definir tanto la estructura como el contenido de una web.</li>
</ul>
<p>Algo importante a tener en cuenta y con lo que no hay que confundirse, es que porque HTML sea un lenguaje no quiere decir que sea un lenguaje programación. HTML no lo es, ya que no tiene estructuras de lenguaje de programación, como los bucles, las condiciones, las funciones, etcétera.</p>
</ul>
</section>
<section id="HTML5" class="main-section">
<header>HTML5</header>
<p>HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript. En este conjunto:</p>
<ul>
<li>HTML está a cargo de la estructura,</li>
<li>CSS presenta esa estructura y su contenido en la pantalla y</li>
<li>Javascript aporta funcionalidad.</li>
</ul>
</section>
<section id="Estructura_HTML5" class="main-section">
<header>Estructura HTML5</header>
<p>En HTML5, los bloques son sustituidos por bloques semánticos que muestran significado por si mismos.</p>
<p>Al principio para organizar la información dentro del documento HTML se utilizaban frames y luego tablas. Más adelante, con el surgimiento de webs más interactivas y la integración de HTML, CSS y Javascript, el uso de <code><div></code> se volvió una práctica común. Pero estas etiquetas no proveen información acerca de lo que se está representando.</p>
<p>Normalmente una página o aplicación web está dividida entre varias áreas visuales para estructurar el contenido y facilitar la interactividad al usuario. HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. Las nuevas etiquetas que representan cada nuevo elemento de HTML5 están relacionadas con estas áreas: cabecera, menú, información, barra lateral, etc.</p>
</section>
<section id="Estructura_Semántica" class="main-section">
<header>Estructura Semántica</header>
<p>La estructura semántica de una página web utilizando etiquetas HTML5 es la siguiente:</p>
<figure>
<img
class="imagen"
src="https://ikastaroak.birt.eus/edu/argitalpen/backupa/20200331/1920k/es/ASIRDAMDAW/LMSGI/LMSGI02/es_ASIRDAMDAW_LMSGI02_Contenidos/LMSGI03_Html_5.png">
</figure>
</section>
<section id="Etiquetas_Principales" class="main-section">
<header>Etiquetas Principales</header>
<p>Las nuevas etiquetas que aparecen son:</p>
<h3><header></h3>
<p>Etiqueta que engloba la cabecera: título, logo de nuestra página web.</p>
<h3><nav></h3>
<p>Etiqueta para la navegación, como en menús principales o grandes bloques de enlaces.</p>
<h3><section></h3>
<p>Se utiliza para englobar la información principal de nuestra página web.</p>
<h3><article></h3>
<p>Dentro de la definición del contenido, nos encontraremos diferentes elementos visuales como títulos, textos, imágenes, videos y aplicaciones interactivas, etc. La etiqueta <code><article></code> ayuda a diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura. Las etiquetas <code><article></code> se encuentran ubicadas dentro del elemento <code><section></code>. El elemento <code><article></code> nos permite identificar cada una de estas partes.</p>
<h3><aside></h3>
<p>Representa la columna llamada barra lateral. Esta es una columna o sección que normalmente contiene datos relacionados con la información principal pero que no son relevantes o igual de importantes.</p>
<h3><footer></h3>
<p>La etiqueta <code><footer></code> representa el final del cuerpo de nuestro documento, el pie de página.</p>
</section>
</main>
</body>
</html>
And this is my css code
:root {
--color-body-background: #0A0A23;
--color-text: #d7d7d7;
--color-border: #2A2A40;
--color-link: #F5B243;
}
html {
scroll-behavior: smooth;
}
.sr-only {
border: 0 ;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin: -1px;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: var(--color-body-background);
color: var(--color-text);
}
nav {
position: fixed;
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: 2px solid var(--color-border);
}
nav header, nav ul {
margin: 0 auto;
padding: 0;
}
nav header {
text-align: center;
margin-top: 25px;
font-size: 1.5rem;
font-weight: 600;
}
nav li {
list-style-type: none;
margin: 20px auto;
padding-left: 20%;
}
a {
text-decoration: none;
color: var(--color-text);
}
a:hover {
color: var(--color-link);
}
.color-picker > fieldset {
border: 0;
display: flex;
gap: 2rem;
width: fit-content;
background-color: var(--color-border);
margin-inline: auto;
border-radius: 0 0 1rem 1rem;
padding: 1rem 3rem;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 50px 30px;
margin-bottom: 110px;
}
.color-picker input[type="radio"]{
appearance: none;
width: 0.75rem;
height: 0.75rem;
outline: 2px solid var(--radio-color);
outline-offset: 3px;
border-radius: 50%;
}
.color-picker input[type="radio"]:checked {
background-color: var(--radio-color);
}
.color-picker input[type="radio"]#dark {
--radio-color: #0A0A23;
}
.color-picker input[type="radio"]#light {
--radio-color: #fff;
}
:root:has(#light:checked) {
--color-body-background: #d7d7d7;
--color-text: #0A0A23;
--color-border: #b2b2b2;
--color-link: #f0a000;
}
.main-section header {
font-size: 1.5rem;
font-weight: 500;
margin-top: 30px;
}
.main-section, .main-section li {
margin: 10px;
}
.main-section li {
list-style-type: none;
}
.main-section li::before {
content: '•';
color: var(--color-link);
display: inline-block;
padding-right: 0.5em;
margin: 0;
}
code, h3 {
font-family: sans-serif;
font-weight: 500;
color: var(--color-link);
background-color: var(--color-border);
padding: 5px;
}
.imagen {
display: block;
height: auto;
margin: auto;
padding: 20px 0;
}
h3 {
margin-top: 30px;
width: fit-content;
}
@media (max-width: 460px) {
nav {
position: static;
height: auto;
border-right: none;
display: grid;
width: auto;
padding-bottom: 15px;
border-block: 2px solid var(--color-border);
}
nav li {
margin: 10px auto;
padding-left: 0%;
}
#main-doc {
position: static;
margin: auto;
padding: 0 15px;
margin-bottom: 110px;
}
.main-section ul {
padding: 0;
}
.imagen {
width: 100%;
padding: 0;
}
}
Your solution works from my end.
Please try one of the following steps to move forward.
Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.
or - Try the step in incognito or private mode.
or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.
or - Ensure your browser is up-to-date or try a different browser.
I hope one of these will work for you.
Hi!
Thanks for your help, i tried all possible solution and the problem persist
But… I found the solution
In the head tag of html code I put a link tag to preload the css on the cache, deleted this tag and the problem was solved
