Aprende accesibilidad construyendo un cuestionario - Paso 42

Español HTML-CSS
1

Ayuda tengo un problema con el ejercicio de pagina tecnica tengo un solo error
que es con el tema de la media queries no me lo esta tomando
adjunto el codigo para que me puedan orientar por favor con EXTREMA URGENCIA ESTOY MUY TRABADO

HTML

Pagina de documentación técnica Documentación JS Introducción

JavaScript es un lenguaje de secuencias de comandos orientado a objetos y multiplataforma. Es un lenguaje pequeño y ligero. Dentro de un entorno de host (por ejemplo, un navegador web), JavaScript se puede conectar a los objetos de su entorno para proporcionar control programático sobre ellos.

JavaScript contiene una biblioteca estándar de objetos, como Array, Date y Math, y un conjunto básico de elementos del lenguaje como operadores, estructuras de control y declaraciones. Core JavaScript se puede ampliar para una variedad de propósitos completándolo con objetos adicionales; por ejemplo:

  • JavaScript del lado del cliente amplía el lenguaje central al proporcionar objetos para controlar un navegador y su Modelo de objetos de documento (DOM). Por ejemplo, las extensiones del lado del cliente permiten que una aplicación coloque elementos en un formulario HTML y responda a los eventos del usuario, como los clics del mouse, la entrada de formularios y la navegación de la página.
  • JavaScript del lado del servidor amplía el lenguaje principal al proporcionar objetos relevantes para ejecutar JavaScript en un servidor. Por ejemplo, las extensiones del lado del servidor permiten que una aplicación se comunique con una base de datos, brinde continuidad de información de una invocación a otra de la aplicación o realice manipulaciones de archivos en un servidor.
Lo que deberías saber

Esta guía asume que tiene los siguientes conocimientos básicos:

  • Comprensión general de Internet y la World Wide Web (WWW).
  • Buen conocimiento práctico del lenguaje de marcado de hipertexto (HTML).
  • Alguna experiencia en programación. Si es nuevo en la programación, pruebe uno de los tutoriales vinculados en la página de freecodecamp.
JavaScript y Java

JavaScript y Java son similares en algunos aspectos, pero fundamentalmente diferentes en otros. El lenguaje JavaScript se parece a Java, pero no tiene la escritura estática ni la verificación de tipo fuerte de Java. JavaScript sigue la mayoría de la sintaxis de expresión de Java, convenciones de nomenclatura y construcciones básicas de flujo de control, que fue la razón por la que se cambió el nombre de LiveScript a JavaScript.

A diferencia del sistema de clases en tiempo de compilación de Java creado por declaraciones, JavaScript admite un sistema de tiempo de ejecución basado en una pequeña cantidad de tipos de datos que representan valores numéricos, booleanos y de cadena. JavaScript tiene un modelo de objetos basado en prototipos en lugar del modelo de objetos basado en clases más común. El modelo basado en prototipos proporciona herencia dinámica; es decir, lo que se hereda puede variar para objetos individuales. JavaScript también admite funciones sin requisitos declarativos especiales. Las funciones pueden ser propiedades de objetos, ejecutándose como métodos de tipo impreciso.

JavaScript es un lenguaje de forma muy libre en comparación con Java. No es necesario que declare todas las variables, clases y métodos. No tiene que preocuparse por si los métodos son públicos, privados o protegidos, y no tiene que implementar interfaces. Las variables, los parámetros y los tipos de devolución de funciones no se escriben explícitamente.

Hola mundo

Para comenzar a escribir JavaScript, abra el Bloc de notas y escriba su primer código JavaScript "Hola mundo":

alert("Hola Mundo");

Seleccione el código en el panel y presione Ctrl + R para ver cómo se desarrolla en su navegador.

Variables

Utiliza variables como nombres simbólicos para valores en su aplicación. Los nombres de las variables, llamados identificadores, se ajustan a ciertas reglas.

Un identificador de JavaScript debe comenzar con una letra, un guión bajo (_) o un signo de dólar ($); los caracteres siguientes también pueden ser dígitos (0-9). Debido a que JavaScript distingue entre mayúsculas y minúsculas, las letras incluyen los caracteres de la "A" a la "Z" (mayúsculas) y los caracteres de la "a" a la "z" (minúsculas).

Puede utilizar letras ISO 8859-1 o Unicode como å y ü en los identificadores. También puede utilizar las secuencias de escape Unicode como caracteres en identificadores. Algunos ejemplos de nombres legales son Number_hits, temp99 y _name.

Declarar variables

Puede declarar una variable de tres formas:

Con la palabra clave var. Por ejemplo:

var x = 65

Esta sintaxis se puede utilizar para declarar variables tanto locales como globales.

Simplemente asignándole un valor. Por ejemplo:

x = 65

Esto siempre declara una variable global. Genera una advertencia estricta de JavaScript. No deberías usar esta variante.

Con la palabra clave let. Por ejemplo:

let y = 30

Esta sintaxis se puede utilizar para declarar una variable local de alcance de bloque. Consulte Alcance de variables a continuación.

Alcance de variables

Cuando declaras una variable fuera de cualquier función, se llama variable global, porque está disponible para cualquier otro código en el documento actual. Cuando declaras una variable dentro de una función, se llama variable local, porque solo está disponible dentro de esa función.

JavaScript antes de ECMAScript 2015 no tiene alcance de declaración de bloque; más bien, una variable declarada dentro de un bloque es local a la función (o alcance global) en la que reside el bloque. Por ejemplo, el siguiente código registrará 5, porque el alcance de x es la función (o contexto global) dentro del cual se declara x, no el bloque, que en este caso es una declaración if.

if (true) { var x = 5; } console.log(x); //Si es verdadero la variable x vale 5

Este comportamiento cambia cuando se usa la declaración let introducida en ECMAScript 2015.

if (true) { let y = 5; } console.log(y); // ReferenceError: y no esta definida Variables globales

Las variables globales son de hecho propiedades del objeto global. En las páginas web, el objeto global es window, por lo que puede establecer y acceder a variables globales utilizando la sintaxis window.variable.

En consecuencia, puede acceder a las variables globales declaradas en una ventana o marco desde otra ventana o marco especificando el nombre de la ventana o marco. Por ejemplo, si se declara una variable llamada phoneNumber en un documento, puede hacer referencia a esta variable desde un iframe como parent.phoneNumber.

Constantes

Puede crear una constante de solo lectura con nombre con la palabra clave const. La sintaxis de un identificador de constante es la misma que la de un identificador de variable: debe comenzar con una letra, un subrayado o un signo de dólar y puede contener caracteres alfabéticos, numéricos o de subrayado.

const PI = 3.14;

Una constante no puede cambiar el valor a través de la asignación o volver a declararse mientras se ejecuta el script. Tiene que inicializarse con un valor.

Las reglas de alcance para las constantes son las mismas que las de las variables de alcance de bloque let. Si se omite la palabra clave const, se supone que el identificador representa una variable.

No puede declarar una constante con el mismo nombre que una función o variable en el mismo ámbito. Por ejemplo:

// ESTO CAUSARA UN ERROR function f() {}; const f = 5; // ESTO CAUSARA UN ERROR TAMBIEN function f() { const g = 5; var g; //declaraciones }

Sin embargo, los atributos de los objetos no están protegidos, por lo que la siguiente instrucción se ejecuta sin problemas.

const MY_OBJECT = {"key": "value"}; MY_OBJECT.key = "otherValue"; Tipos de datos

El último estándar ECMAScript define siete tipos de datos:

  • Seis tipos de datos que son primitivos:
    • Boleano. Verdadero y falso
    • Nulo. Una palabra clave especial que denota un valor nulo. Como JavaScript distingue entre mayúsculas y minúsculas, null no es lo mismo que Null, NULL o cualquier otra variante.
    • Indefinido. Una propiedad de nivel superior cuyo valor no está definido.
    • Numero. 42 o 3.14159
    • String. "Howdy"
    • Símbolo (nuevo en ECMAScript 2015). Un tipo de datos cuyas instancias son únicas e inmutables.
  • Y Objeto

Aunque estos tipos de datos son una cantidad relativamente pequeña, le permiten realizar funciones útiles con sus aplicaciones. Los objetos y las funciones son los otros elementos fundamentales del lenguaje. Puede pensar en los objetos como contenedores con nombre para valores y las funciones como procedimientos que puede realizar su aplicación.

Bucle if...else

Utilice la instrucción if para ejecutar una instrucción si una condición lógica es verdadera. Utilice la cláusula else opcional para ejecutar una declaración si la condición es falsa. Una declaración if tiene el siguiente aspecto:

if (condicion) { declaracion_1; } else { declaracion_2; }

La condición puede ser cualquier expresión que se evalúe como verdadera o falsa. Consulte Boolean para obtener una explicación de lo que se evalúa como verdadero y falso. Si la condición se evalúa como verdadera, se ejecuta sdeclaracion_1; de lo contrario, se ejecuta declaracion_2. declaracion_1 y declaracion_2 pueden ser cualquier declaración, incluidas las declaraciones if anidadas.

También puede componer las declaraciones usando else if para que se prueben varias condiciones en secuencia, de la siguiente manera:

if (condicion_1) { declaracion_1; } else if (condicion_2) { declaracion_2; } else if (condicion_n) { declaracion_n; } else { declaracion_last; }

En el caso de múltiples condiciones, solo se ejecutará la primera condición lógica que se evalúe como verdadera. Para ejecutar varias sentencias, agrúpelas dentro de una sentencia de bloque ({...}). En general, es una buena práctica usar siempre declaraciones de bloque, especialmente al anidar declaraciones if:

if (condicion) { declaracion_1_corre_si_condicion_es_verdadera; declaracion_2_corre_si_condicion_es_verdadera; } else { declaracion_3_corre_si_condicion_es_falsa; declaracion_4_corre_si_condicion_es_falsa; }

Es aconsejable no utilizar asignaciones simples en una expresión condicional, porque la asignación puede confundirse con la igualdad al mirar el código. Por ejemplo, no utilice el siguiente código:

if (x = y) { /* aquí declaracion */ }

Si necesita usar una tarea en una expresión condicional, una práctica común es poner paréntesis adicionales alrededor de la tarea. Por ejemplo:

if ((x = y)) { /* aquí declaracion */ } Bucle while

Una instrucción while ejecuta sus declaraciones siempre que una condición especificada se evalúe como verdadera. Una declaración while tiene el siguiente aspecto:

while (condicion) declaracion

Si la condición se vuelve falsa, la declaración dentro del ciclo deja de ejecutarse y el control pasa a la declaración que sigue al ciclo.

La prueba de condición ocurre antes de que se ejecute la instrucción en el ciclo. Si la condición devuelve verdadera, se ejecuta la instrucción y la condición se prueba nuevamente. Si la condición devuelve falso, la ejecución se detiene y el control se pasa a la instrucción que sigue a while.

Para ejecutar múltiples declaraciones, use una declaración de bloque ({...}) para agrupar esas declaraciones.

Por ejemplo:

El siguiente ciclo while se repite siempre que n sea menor que tres:

var n = 0; var x = 0; while (n < 3) { n++; x += n; }

Con cada iteración, el ciclo incrementa n y agrega ese valor a x. Por tanto, x y n toman los siguientes valores:

  • Después de la primera pasada: n = 1 y x = 1
  • Después de la segunda pasada: n = 2 y x = 3
  • Después de la tercera pasada: n = 3 y x = 6

Después de completar la tercera pasada, la condición n < 3 ya no es cierta, por lo que el ciclo termina.

Declaración de funciones

Una definición de función (también llamada declaración de función) consta de la palabra clave de función, seguida de:

  • El nombre de la función.
  • Una lista de argumentos de la función, entre paréntesis y separados por comas.
  • Las declaraciones de JavaScript que definen la función, encerradas entre corchetes, {}.

Por ejemplo, el siguiente código define una función simple llamada cuadrado:

function square(number) { return number * number; }

La función cuadrado toma un argumento, llamado número. La función consta de una declaración que dice devolver el argumento de la función (es decir, el número) multiplicado por sí mismo. La declaración de retorno especifica el valor devuelto por la función.

return number * number;

Los parámetros primitivos (como un número) se pasan a las funciones por valor; el valor se pasa a la función, pero si la función cambia el valor del parámetro, este cambio no se refleja globalmente o en la función que llama.

Referencia
  • Toda la documentación en esta página está tomada de MDN

CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
font-family: ‘Open sans’, arial, helvetica;
font-size: 14px;
line-height: 1.7;
}

#navbar{
position: fixed;
width: 300;
height: 100%;
border-right: solid;
border-color: #000;
}

nav{
display: block;
}

header{
display: block;
margin: 10px;
text-align: center;
font-size: 2em;
}

#navbar ul{
padding: 0px;
font-size: 1.2em;
text-align: left;
}

#navbar li{
position: relative;
width: 100%;
color:#000;
list-style: none;
}

#navbar a{
display: block;
padding: 7px 20px;
color: #000;
text-decoration: none;
cursor: pointer;
}

#main-doc{
position: absolute;
margin-left: 280px;
padding: 10px;
margin-bottom: 110px;
}

.main-section{
margin: 15px;
font-size: 1.02em;
}

section p{
margin: 16px 0px;
}

section li{
margin: 16px 0px 0px 35px;
}

code{
display: block;
text-align: left;
white-space: pre-line;
position: relative;
word-break: normal;
line-height: 1.5;
background-color: #7b7b7e;
padding: 20px;
margin: 20px;
border-radius: 3px;
}

@media (max-width: 600px) {
.main-section {
display: none;
}
}

2

HOla, tu HTML no se puede copiar, ya que markdown lo renderiza pro defecto, intenta poner tu HTML y CSS entre 3 comillas invertidas pro ejemplo:

EJEMPLO
\```
HTML / CSS AQUI
\```

Ignora el slash.