Responsive Web Design Projects - Build a Technical Documentation Page

Hi everyone! I’ve read so far many many posts on this topic, but I still can’t break it.

I’m having troube with topics:

A) " Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s."

B) Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

I’m from Buenos Aires, Argentina, so this particular code is in spanish, and has accent maks. I will put just 2 examples, because all sections al coded the same way.

I have also tried to remove accent marks from ids, and it’s still not working

My code so far

<!DOCTYPE html>
<html lang="es">
    <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="styles.css">
        <title>Document</title>
    </head>
    
    <body>

        <nav id="navbar">
            <header><h1>Física Universitaria Electromagnetismo</h1></header>
                <ul>
                    <li><a class="nav-link" href="#Introducción">Introducción</a></li>
                    <li><a class="nav-link" href="#Carga_eléctrica_y_campo_eléctrico">Carga eléctrica y campo eléctrico</a></li>
                </ul>
        </nav>

        <main id="main-doc">

            <section class="main-section" id="Introducción">
            <header>Introducción</header>
            <p>La física estudia lo grande y lo pequeño, lo viejo y lo nuevo. Es una disciplina que se ocupa de una gran parte del mundo que nos rodea, desde los átomos y las galaxias, hasta los circuitos eléctricos y la aerodinámica.</p>
            <p>Es probable que el lector esté siguiendo este curso para realizar alguna tarea escolar, porque lo requiera para materias de estudio de su carrera, o por el simple deseo de saciar su curiosidad.</p>
            <p>Deseamos que usted aprenda física y goce la experiencia; además, tenemos mucho interés en ayudarlo a aprender esta fascinante disciplina. Por ello, elegimos el siguiente material para iniciarlo en este maravilloso mundo.</p> 
            <p>El objetivo de este sitio es darle algunas ideas que lo ayuden en su aprendizaje.</p>
            <p>Si en el bachillerato estudió física, es probable que aprenda los conceptos más rápido que quienes no lo hicieron, porque estará familiarizado con el lenguaje de esta disciplina. Asimismo, si tiene estudios avanzados de matemáticas, comprenderá con mayor rapidez los aspectos matemáticos de la física. Aun si tuviera un nivel adecuado de matemáticas, encontrará útiles algunos libros como el de <b>Arnold D. Pickar</b>,<i>"Preparing for General Physics: Math Skill Drills and Other Useful Help (Calculus Version)".</i></p>
            <p>Cada uno de nosotros tiene un estilo diferente de aprendizaje y un medio preferido para hacerlo. Entender cuál es el suyo lo ayudará a centrase en los aspectos de la física que tal vez le planteen dificultades, y a emplear los componentes que lo ayudarán a vencer los obstáculos del aprendizaje. Sin duda, querrá dedicar más tiempo a aquellos aspectos que le impliquen más problemas.</p>
            <p>Si usted aprende escuchando, las conferencias serán muy importantes. Si aprende con explicaciones, entonces será de gran ayuda trabajar con otros estudiantes. Si le resulta difícil resolver problemas, dedique más tiempo a aprender cómo hacerlo. Asimismo, es importante desarrollar buenoshábitos de estudio. Quizá lo más importante que podrá hacer por usted mismo sea programar de manera regular el tiempo adecuado en un ambiente libre de distracciones.</p>
            </section>
        
            <section class="main-section" id="Carga_eléctrica_y_campo_eléctrico">
            <header>Carga eléctrica y campo eléctrico</header>
            <p>En una época remota 600 a.C., los antiguos griegos descubrieron que cuando frotaban ámbar con lana, el ámbar atraía otros objetos. En la actualidad decimos que, con ese frotamiento, el ámbar adquiere una carga eléctrica neta o simplemente se carga. 
            <p>La palabra <i><b>“eléctrico”</b></i> deriva del vocablo griego elektron, que significa ámbar.</p>
            <p>Una persona se carga eléctricamente al frotar sus zapatos sobre una alfombra de nailon; y puede cargar un peine si lo pasa por su cabello seco. Las varillas de plástico y un trozo de piel (verdadera o sintética) son especialmente buenos para demostrar la electrostática, es decir, las interacciones entre cargas eléctricas en reposo (o casi en reposo). 
            <p>Después de cargar las dos varillas de plástico frotándolas contra el trozo de piel, vemos que las varillas se repelen. Cuando frotamos varillas de vidrio con seda, las varillas de vidrio también se cargan y se repelen entre sí.</p>
            <p>Pero una varilla de plástico cargada atrae a una varilla de vidrio también cargada; además, la varilla de plástico y la piel se atraen, al igual que la varilla de vidrio y la seda. Estos experimentos y muchos otros similares han demostrado que hay exactamente dos tipos de carga eléctrica: la del plástico cuando se frota con piel y la del vidrio al frotarse con seda.</p>
            <p><i><b>Benjamín Franklin (1706-1790)</b></i> sugirió llamar a esas dos clases de carga negativa y positiva, respectivamente, y tales nombres aún se utilizan. La varilla de plástico y la seda tienen carga negativa; en tanto que la varilla de vidrio y la piel tienen carga positiva.</p>
                <ul>
                    <li>
                    <p>Propiedades de carga</p>
                        <ul>
                            <li>Dos cargas positivas se repelen entre sí, al igual que dos cargas negativas.</li>
                            <li>Una carga positiva y una negativa se atraen.</li>
                        </ul>
                    </li>
                </ul>
            <p>En ocasiones, la atracción y la repulsión de dos objetos cargados se resume como “cargas iguales se repelen, y cargas opuestas se atraen”. Sin embargo, tenga en cuenta que la frase “cargas iguales” no significa que las dos cargas sean idénticas, sino solo que ambas cargas tienen el mismo signo algebraico (ambas son positivas o ambas negativas). La expresión “cargas opuestas” quiere decir que los dos objetos tienen una carga eléctrica de signos diferentes (una positiva y la otra negativa).</p>
            <p>Cuando se carga una varilla frotándola con piel o con seda, no hay ningún cambio visible en la apariencia de la varilla. Entonces, ¿qué es lo que realmente le sucede a la varilla cuando se carga? Para responder esta pregunta, debemos analizar más de cerca la estructura de los átomos, que son los bloques que constituyen la materia ordinaria.</p>
            <p>La estructura de los átomos se describe en términos de tres partículas: el electrón, con carga negativa; el protón, cuya carga es positiva; y el neutrón, sin carga. El protón y el neutrón son combinaciones de otras entidades llamadas quarks, que tienen cargas de &#177;1/3 y &#177;2/3 de la carga del electrón.</p>
            <p>No se han observado quarks aislados, y hay razones teóricas para creer que, en principio, es imposible ver un quark aislado. Los protones y los neutrones en un átomo forman el núcleo, pequeño y muy denso, cuyas dimensiones son del orden de 10<sup>-15</sup> m. Los electrones rodean al núcleo a distancias del orden de 10<sup>-10</sup> m. Si un átomo midiera algunos kilómetros de diámetro, su núcleo tendría el tamaño de una pelota de tenis. Los electrones cargados negativamente se mantienen dentro del átomo debido a las fuerzas eléctricas de atracción ejercidas sobre ellos por el núcleo con carga positiva.</p>
            <p>Los protones y los neutrones permanecen dentro del núcleo estable de los átomos debido al efecto de atracción conocido como fuerza nuclear fuerte, que vence la repulsión eléctrica entre los protones. La fuerza nuclear fuerte es de corto alcance, por lo que sus efectos no llegan más allá del núcleo.</p>
            <p>Las masas de las partículas individuales, con la precisión que se conocen actualmente, son:</p>

            <code>Masa del electrón = m<sub>e</sub> = 9.10938215(45) * 10<sup>-31</sup> kg
            Masa del protón = m<sub>p</sub> = 1.672621637(83) * 10<sup>-27</sup> kg
            Masa del neutrón = m<sub>n</sub> = 1.674927211(84) * 10<sup>-27</sup> kg</code>

            <p>Los números entre paréntesis indican la incertidumbre en los dos últimos dígitos. Observe que las masas del protón y del neutrón son casi iguales y aproximadamente 2000 veces la masa del electrón. Más del 99.9% de la masa de cualquier átomo se concentra en el núcleo. La carga negativa del electrón tiene (dentro del error experimental) exactamente la misma magnitud que la carga positiva del protón. En un átomo neutro, el número de electrones es igual al número de protones en el núcleo, y la carga eléctrica neta (la suma algebraica de todas las cargas) es exactamente igual a cero.</p>
            </section>

I believe it is right, and also checked spelling, but can’t pass those two point.

Thank you all!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Technical Documentation Page

Link to the challenge:

1 Like

can you post all your code? The code above seems to be a sub-section of it.

Hi!, Sorry I had to cut it again, there’s a legend of code limit to 30k characters or so… This is as much as I can post, but 5 sections has Lorem, so I cutted them off.

<!DOCTYPE html>
<html lang="es">
    <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="styles.css">
        <title>Document</title>
    </head>
    
    <body>

        <nav id="navbar">
            <header><h1>Física Universitaria Electromagnetismo</h1></header>
                <ul>
                    <li><a class="nav-link" href="#Introducción">Introducción</a></li>
                    <li><a class="nav-link" href="#Carga_eléctrica_y_campo_eléctrico">Carga eléctrica y campo eléctrico</a></li>
                    <li><a class="nav-link" href="#Ley_de_Gauss">Ley de Gauss</a></li>
                    <li><a class="nav-link" href="#Potencial_eléctrico">Potencial eléctrico</a></li>
                    <li><a class="nav-link" href="#Capacitancia_y_dieléctricos">Capacitancia y dieléctricos</a></li>
                    <li><a class="nav-link" href="#Corriente_resistencia_y_fuerza_electromotriz">Corriente resistencia y fuerza electromotriz</a></li>
                </ul>
        </nav>

        <main id="main-doc">

            <section class="main-section" id="Introducción">
            <header>Introducción</header>
            <p>La física estudia lo grande y lo pequeño, lo viejo y lo nuevo. Es una disciplina que se ocupa de una gran parte del mundo que nos rodea, desde los átomos y las galaxias, hasta los circuitos eléctricos y la aerodinámica.</p>
            <p>Es probable que el lector esté siguiendo este curso para realizar alguna tarea escolar, porque lo requiera para materias de estudio de su carrera, o por el simple deseo de saciar su curiosidad.</p>
            <p>Deseamos que usted aprenda física y goce la experiencia; además, tenemos mucho interés en ayudarlo a aprender esta fascinante disciplina. Por ello, elegimos el siguiente material para iniciarlo en este maravilloso mundo.</p> 
            <p>El objetivo de este sitio es darle algunas ideas que lo ayuden en su aprendizaje.</p>
            <p>Si en el bachillerato estudió física, es probable que aprenda los conceptos más rápido que quienes no lo hicieron, porque estará familiarizado con el lenguaje de esta disciplina. Asimismo, si tiene estudios avanzados de matemáticas, comprenderá con mayor rapidez los aspectos matemáticos de la física. Aun si tuviera un nivel adecuado de matemáticas, encontrará útiles algunos libros como el de <b>Arnold D. Pickar</b>,<i>"Preparing for General Physics: Math Skill Drills and Other Useful Help (Calculus Version)".</i></p>
            <p>Cada uno de nosotros tiene un estilo diferente de aprendizaje y un medio preferido para hacerlo. Entender cuál es el suyo lo ayudará a centrase en los aspectos de la física que tal vez le planteen dificultades, y a emplear los componentes que lo ayudarán a vencer los obstáculos del aprendizaje. Sin duda, querrá dedicar más tiempo a aquellos aspectos que le impliquen más problemas.</p>
            <p>Si usted aprende escuchando, las conferencias serán muy importantes. Si aprende con explicaciones, entonces será de gran ayuda trabajar con otros estudiantes. Si le resulta difícil resolver problemas, dedique más tiempo a aprender cómo hacerlo. Asimismo, es importante desarrollar buenoshábitos de estudio. Quizá lo más importante que podrá hacer por usted mismo sea programar de manera regular el tiempo adecuado en un ambiente libre de distracciones.</p>
            </section>
        
            <section class="main-section" id="Carga_eléctrica_y_campo_eléctrico">
            <header>Carga eléctrica y campo eléctrico</header>
            <p>En una época remota 600 a.C., los antiguos griegos descubrieron que cuando frotaban ámbar con lana, el ámbar atraía otros objetos. En la actualidad decimos que, con ese frotamiento, el ámbar adquiere una carga eléctrica neta o simplemente se carga. 
            <p>La palabra <i><b>“eléctrico”</b></i> deriva del vocablo griego elektron, que significa ámbar.</p>
            <p>Una persona se carga eléctricamente al frotar sus zapatos sobre una alfombra de nailon; y puede cargar un peine si lo pasa por su cabello seco. Las varillas de plástico y un trozo de piel (verdadera o sintética) son especialmente buenos para demostrar la electrostática, es decir, las interacciones entre cargas eléctricas en reposo (o casi en reposo). 
            <p>Después de cargar las dos varillas de plástico frotándolas contra el trozo de piel, vemos que las varillas se repelen. Cuando frotamos varillas de vidrio con seda, las varillas de vidrio también se cargan y se repelen entre sí.</p>
            <p>Pero una varilla de plástico cargada atrae a una varilla de vidrio también cargada; además, la varilla de plástico y la piel se atraen, al igual que la varilla de vidrio y la seda. Estos experimentos y muchos otros similares han demostrado que hay exactamente dos tipos de carga eléctrica: la del plástico cuando se frota con piel y la del vidrio al frotarse con seda.</p>
            <p><i><b>Benjamín Franklin (1706-1790)</b></i> sugirió llamar a esas dos clases de carga negativa y positiva, respectivamente, y tales nombres aún se utilizan. La varilla de plástico y la seda tienen carga negativa; en tanto que la varilla de vidrio y la piel tienen carga positiva.</p>
                <ul>
                    <li>
                    <p>Propiedades de carga</p>
                        <ul>
                            <li>Dos cargas positivas se repelen entre sí, al igual que dos cargas negativas.</li>
                            <li>Una carga positiva y una negativa se atraen.</li>
                        </ul>
                    </li>
                </ul>
            <p>En ocasiones, la atracción y la repulsión de dos objetos cargados se resume como “cargas iguales se repelen, y cargas opuestas se atraen”. Sin embargo, tenga en cuenta que la frase “cargas iguales” no significa que las dos cargas sean idénticas, sino solo que ambas cargas tienen el mismo signo algebraico (ambas son positivas o ambas negativas). La expresión “cargas opuestas” quiere decir que los dos objetos tienen una carga eléctrica de signos diferentes (una positiva y la otra negativa).</p>
            <p>Cuando se carga una varilla frotándola con piel o con seda, no hay ningún cambio visible en la apariencia de la varilla. Entonces, ¿qué es lo que realmente le sucede a la varilla cuando se carga? Para responder esta pregunta, debemos analizar más de cerca la estructura de los átomos, que son los bloques que constituyen la materia ordinaria.</p>
            <p>La estructura de los átomos se describe en términos de tres partículas: el electrón, con carga negativa; el protón, cuya carga es positiva; y el neutrón, sin carga. El protón y el neutrón son combinaciones de otras entidades llamadas quarks, que tienen cargas de &#177;1/3 y &#177;2/3 de la carga del electrón.</p>
            <p>No se han observado quarks aislados, y hay razones teóricas para creer que, en principio, es imposible ver un quark aislado. Los protones y los neutrones en un átomo forman el núcleo, pequeño y muy denso, cuyas dimensiones son del orden de 10<sup>-15</sup> m. Los electrones rodean al núcleo a distancias del orden de 10<sup>-10</sup> m. Si un átomo midiera algunos kilómetros de diámetro, su núcleo tendría el tamaño de una pelota de tenis. Los electrones cargados negativamente se mantienen dentro del átomo debido a las fuerzas eléctricas de atracción ejercidas sobre ellos por el núcleo con carga positiva.</p>
            <p>Los protones y los neutrones permanecen dentro del núcleo estable de los átomos debido al efecto de atracción conocido como fuerza nuclear fuerte, que vence la repulsión eléctrica entre los protones. La fuerza nuclear fuerte es de corto alcance, por lo que sus efectos no llegan más allá del núcleo.</p>
            <p>Las masas de las partículas individuales, con la precisión que se conocen actualmente, son:</p>

            <code>Masa del electrón = m<sub>e</sub> = 9.10938215(45) * 10<sup>-31</sup> kg
            Masa del protón = m<sub>p</sub> = 1.672621637(83) * 10<sup>-27</sup> kg
            Masa del neutrón = m<sub>n</sub> = 1.674927211(84) * 10<sup>-27</sup> kg</code>

            <p>Los números entre paréntesis indican la incertidumbre en los dos últimos dígitos. Observe que las masas del protón y del neutrón son casi iguales y aproximadamente 2000 veces la masa del electrón. Más del 99.9% de la masa de cualquier átomo se concentra en el núcleo. La carga negativa del electrón tiene (dentro del error experimental) exactamente la misma magnitud que la carga positiva del protón. En un átomo neutro, el número de electrones es igual al número de protones en el núcleo, y la carga eléctrica neta (la suma algebraica de todas las cargas) es exactamente igual a cero.</p>
            </section>

            <section class="main-section" id="Ley_de_Gauss">
            <header>Ley de Gauss</header>
            <p>En general, existe un modo fácil y otro difícil de efectuar un trabajo; el modo fácil tal vez solo requiera el empleo de las herramientas correctas. En física las propiedades de simetría de los sistemas constituyen una herramienta importante para simplificar los problemas.</p>
            <p>Muchos sistemas físicos tienen simetría; por ejemplo, un cuerpo cilíndrico no se ve distinto después de hacerlo girar sobre su eje, y una esfera de metal con carga se ve igual después que se ha hecho girar alrededor de cualquier eje que pase por su centro. La ley de Gauss es parte de la clave para utilizar consideraciones de simetría que simplifican los cálculos del campo eléctrico.</p>
            <p>Por ejemplo, el campo de una distribución de carga en una línea recta o en una lámina plana, que se obtuvieron resolviendo algunas integrales un tanto difíciles, se obtiene en unos cuantos renglones con ayuda de la ley de Gauss.</p>
            <p>Sin embargo, la ley de Gauss es algo más que un método para realizar ciertos cálculos con facilidad. En realidad, es un enunciado fundamental acerca de la relación que existe entre las cargas eléctricas y los campos eléctricos. Entre otras cosas, la ley de Gauss ayuda a entender cómo se distribuye la carga en los cuerpos conductores. La ley de Gauss se trata de lo siguiente.</p>
            <p>Dada cualquier distribución general de carga, se rodea con una superficie imaginaria que la encierre y luego se observa el campo eléctrico en distintos puntos de esa superficie imaginaria. La ley de Gauss es una relación entre el campo en todos los puntos de la superficie y la carga total que esta encierra.</p>
            <p>Tal vez esto suene como una forma indirecta de expresar los fenómenos, pero es una relación sumamente útil. Más allá de su empleo como herramienta de cálculo, la ley de Gauss ayuda a tener una comprensión más profunda de los campos eléctricos. En varios de los siguientes capítulos recurriremos continuamente a esta comprensión conforme avancemos en el estudio del electromagnetismo.</p>
            <p>Flujo de un campo eléctrico uniforme:</p>
            Utilizando la analogía entre un campo eléctrico y un flujo en movimiento, se definirá ahora el flujo eléctrico de la misma forma en que se acaba de definir la razón volumétrica de flujo en un fluido v simplemente se sustituye la velocidad del fluido por el campo eléctrico <b><i>E</i></b>. El símbolo que se usa para el flujo eléctrico es &#934;<sub><i>E</i></sub> (la letra griega mayúscula PHI; el subíndice <b><i>E</i></b> es para recordar que se trata de flujo eléctrico). En primer lugar, considere un área plana <i>A</i> perpendicular a un campo eléctrico uniforme. Se define el flujo eléctrico a través de esta área como el producto de la magnitud E del campo por el área <i>A</i>:</p>

            <code>&#934;<sub><i>E</i></sub> = EA</code>

            <p>En términos generales, se puede imaginar &#934;<sub><i>E</i></sub> como las líneas de campo que pasan a través de <i>A</i>. El incremento del área significa que más líneas de <b><i>E</i></b> pasan a través del área, lo que aumenta el flujo; un campo más intenso significa mayor densidad de líneas de <b><i>E</i></b> y por lo tanto más líneas por unidad de área, lo que también incrementa el flujo. 
            <p>Si el área <i>A</i> es plana pero no perpendicular al campo <b><i>E</i></b>, entonces son menos las líneas de campo que la atraviesan. En este caso, el área que se toma en cuenta es la silueta que se observa al mirar en dirección de <b><i>E</i></b>. Esta es el área <i>A</i>, y es igual a <i>A</i> cos &#8709;.</p>
                <ul>
                    <li>
                        <p>Nuestra definición de flujo eléctrico para un campo eléctrico uniforme se generaliza a:</p>
                        <ul>
                            <li>&#934;<sub><i>E</i></sub> = EAcos&#934; (flujo eléctrico para <b><i>E</i></b> uniforme, superficie plana). Como <b><i>E</i></b> = cos de la componente de <b><i>E</i></b> perpendicular al área, la ecuación se expresa como:</li>
                            <li>&#934;<sub><i>E</i></sub> = <b><i>E</i></b><sub>&#8869;</sub><i>A</i> (flujo eléctrico para uniforme, superficie plana). En términos del vector <i>A</i> área perpendicular al área, el flujo eléctrico se expresa como el producto escalar de <b><i>E</i></b> por <i>A</i>:</li>
                            <li>&#934;<sub><i>E</i></sub> = <b><i>E</i></b><b>&#8901;</b><i>A</i> (flujo eléctrico para <b><i>E</i></b> uniforme, superficie plana).
                            </li>
                        </ul>
                    </li>
                </ul>
            <p>Las ecuaciones detalladas aqui arriba expresan el flujo eléctrico, para una superficie plana y un campo eléctrico uniforme, de maneras diferentes pero equivalentes.</p>
            </section>

            <section class="main-section" id="Potencial_eléctrico">
            <header>Potencial Eléctrico</header>
            <p>El potencial eléctrico trata de la energía asociada con las interacciones eléctricas. Cada vez que se enciende una luz, se escucha un reproductor de CD o se habla por un teléfono móvil, se utiliza energía eléctrica, un elemento indispensable en nuestra sociedad tecnológica.</p>
            <p>Con anterioridad, el otro capítulo no tratado en este sitio, se presentazon los conceptos de trabajo y energía en el contexto de la mecánica; ahora se combinarán estos conceptos con lo que hemos aprendido sobre cargas eléctricas, fuerzas eléctricas y campos eléctricos.</p>
            <p>Como vimos en muchos problemas de mecánica, las ideas sobre la energía hacen más fácil la solución de diversos problemas; de manera análoga ocurre en electricidad. Cuando una partícula con carga se mueve en un campo eléctrico, este último ejerce una fuerza que efectúa un trabajo sobre la partícula.</p>
            <p>Dicho trabajo siempre se puede expresar en términos de la energía potencial eléctrica. Así como la energía potencial gravitacional depende de la altura de una masa sobre la superficie terrestre, la energía potencial eléctrica depende de la posición que ocupa la partícula con carga en el campo eléctrico.</p>
            <p>Describiremos la energía potencial eléctrica utilizando un concepto nuevo, llamado potencial eléctrico o simplemente potencial. En el estudio de los circuitos, es frecuente llamar voltaje a una diferencia de potencial entre un punto y otro.</p>
            <p>Los conceptos de potencial y voltaje son cruciales para entender la manera en que funcionan los circuitos eléctricos, y tienen aplicaciones importantes en los haces de electrones que se emplean en la radioterapia contra el cáncer, los aceleradores de partículas de alta energía y muchos otros dispositivos.</p>
            <p>Comencemos por revisar algunos aspectos esenciales. Si la fuerza <b><i>F</i></b> es conservativa, el trabajo realizado por <b><i>F</i></b> siempre se puede expresar en términos de una <b><i>energía potencial U</i></b>. Cuando la partícula se mueve de un punto donde la energía potencial es <i>U</i><sub>a</sub> a otro donde es <i>U</i><sub>b</sub>, el cambio en la energía potencial es &#8710;<i>U</i> = <i>U</i><sub>b</sub> - <i>U</i><sub>a</sub>, y el trabajo W<sub>a</sub><sub>&#8594;</sub><sub>b</sub> que realiza la fuerza es</p>
                
            <code>W<sub>a</sub><sub>&#8594;</sub><sub>b</sub> = <i>U</i><sub>a</sub> - <i>U</i><sub>b</sub> = (<i>U</i><sub>b</sub> - <i>U</i><sub>a</sub>) = &#8710;<i>U</i> (trabajo efectuado por una fuerza conservativa)</code>

            <p>Cuando W<sub>a</sub><sub>&#8594;</sub><sub>b</sub> es positivo, <i>U</i><sub>a</sub> es mayor que <i>U</i><sub>b</sub>, &#8710;<i>U</i> es negativo y la energía potencial disminuye. Eso es lo que ocurre cuando una pelota de béisbol cae de un punto elevado a) a otro más bajo b) por el efecto de la gravedad terrestre; la fuerza de la gravedad efectúa un trabajo positivo, y la energía potencial gravitacional disminuye.</p>
            <p>Cuando se lanza una pelota hacia arriba, la fuerza gravitacional realiza un trabajo negativo durante el ascenso, y la energía potencial aumenta. En tercer lugar, el teorema del trabajo y la energía establece que el cambio en la energía cinética &#8710;<i>K</i> = <i>K</i><sub>b</sub> - <i>K</i><sub>a</sub> durante cualquier desplazamiento es igual al trabajo total realizado sobre la partícula.</p>
            <p>Si el trabajo sobre la partícula lo realizan solo fuerzas conservativas, entonces la ecuación da el trabajo total, y <i>K</i><sub>b</sub> - <i>K</i><sub>a</sub> = -(<i>U</i><sub>b</sub> - <i>U</i><sub>a</sub>). Por lo general, esto se escribe así: </p>

                <ul>
                    <li>
                    <p><i>K</i><sub>a</sub> + <i>U</i><sub>a</sub> = <i>K</i><sub>b</sub> + <i>U</i><sub>b</sub></p>
                </ul>

            <p>Es decir, en estas circunstancias, la energía mecánica total (cinética más potencial) se conserva.</p>

            <p>A continuación veremos un ejemplo en el caso eléctrico utilizando estos conceptos básicos. Un par de placas metálicas paralelas con carga generan un campo eléctrico uniforme descendente de magnitud <b><i>E</i></b>. El campo ejerce una fuerza hacia abajo de magnitud <i>F</i> = <i>q</i><sub>0</sub><i>E</i> sobre una carga de prueba positiva <i>q</i><sub>0</sub>. A medida que la carga se mueve hacia abajo una distancia <i>d</i> del punto <i>a</i> al punto <i>b</i>, la fuerza sobre la carga de prueba es constante e independiente de su ubicación. Por lo tanto, el trabajo realizado por el campo eléctrico es el producto de la magnitud de la fuerza y la componente de desplazamiento en la dirección (descendente) de la fuerza: </p>

                <ul>
                    <li>
                    <p>W<sub>a</sub><sub>&#8594;</sub><sub>b</sub> = <i>F</i><i>d</i> = <i>q</i><sub>0</sub><b><i>E</i></b><i>d</i></p>
                    </li>
                </ul>

            </section>

            <section class="main-section" id="Capacitancia_y_dieléctricos">
            <header>Capacitancia y Dieléctricos</header>
            <p>Cuando habilitamos una ratonera antigua de resorte o tensamos la cuerda de un arco, almacenamos energía mecánica en forma de energía potencial elástica. Un capacitor es un dispositivo que almacena energía potencial eléctrica y carga eléctrica.</p>
            <p>Para hacer un capacitor, basta aislar dos conductores uno del otro. Para almacenar energía en este dispositivo hay que transferir carga de un conductor al otro, de manera que uno tenga carga negativa y el otro tenga una cantidad igual de carga positiva.</p>
            <p>Debe realizarse trabajo para trasladar las cargas a través de la diferencia de potencial resultante entre los conductores, y el trabajo efectuado se almacena como energía potencial eléctrica. Los capacitores tienen un gran número de aplicaciones prácticas en dispositivos tales como unidades de flash fotográfico, láseres pulsados, sensores de bolsas de aire para  automóviles y receptores de radio y televisión.</p>
            <p>En capítulos posteriores revisaremos muchas de estas aplicaciones (en particular en el capítulo 31, en el que se verá el papel crucial que desempeñan los capacitores en los circuitos de corriente alterna que invaden nuestra sociedad tecnológica).</p>
            <p>No obstante, en este capítulo se hace énfasis en las propiedades fundamentales de los capacitores. Para un capacitor en particular, la razón entre la carga de cada conductor y la diferencia de potencial entre los conductores es una constante llamada capacitancia. La capacitancia depende de las dimensiones y las formas de los conductores y del material aislante (si lo hay) entre ellos.</p>
            <p>En comparación con el caso en que solo hay vacío entre los conductores, la capacitancia aumenta cuando está presente un material aislante (un dieléctrico). Esto sucede porque en el interior del material aislante ocurre una redistribución de la carga, llamada polarización. El estudio de la polarización ampliará nuestra comprensión de las propiedades eléctricas de la materia.</p>
            <p>Los capacitores también ofrecen una forma nueva de pensar acerca de la energía potencial eléctrica. La energía almacenada en un capacitor con carga guarda relación con el campo eléctrico en el espacio entre los conductores. Veremos que la energía potencial eléctrica puede considerarse almacenada en el campo mismo.</p>
            <p>La idea de que el campo eléctrico es en sí un almacén de energía reside en el corazón de la teoría de las ondas electromagnéticas y de nuestra concepción</p>
            <p>El campo eléctrico en cualquier punto de la región entre los conductores es proporcional a la magnitud de carga <i>Q</i> en cada conductor. Por lo tanto, la diferencia de potencial <i>V</i><sub><i>ab</i></sub> entre los conductores también es proporcional a <i>Q</i>. Si se duplica la magnitud de la carga en cada conductor, también se duplican la densidad de carga en cada punto, el campo eléctrico en cada punto y la diferencia de potencial entre los conductores; sin embargo, la razón entre la carga y la diferencia de potencial no cambia.Esta razón se llama <b>capacitancia</b> <i>C</i> del capacitor: </p>
                
            <code><i>C</i> = <i>Q</i> / <i>V</i><sub><i>ab</i></sub></code>

            <p>La unidad del SI para la capacitancia es el farad (1 F), en honor del físico inglés del siglo XIX, Michael Faraday. De acuerdo con la ecuación, un farad es igual a un: </p>

                <ul>
                    <li>
                    <p>1 F = 1 farad = 1 C/V = 1 Coulomb/Volt</p>
                </ul>

            <p>Es decir, en estas circunstancias, la energía mecánica total (cinética más potencial) se conserva.</p>
            <code>NOTA: No confunda el símbolo <i>C</i> de la capacitancia (que siempre aparece en cursivas) con la abreviatura C de los coulombs (que nunca se escribe con cursivas).</code>

            <p>Cuanto mayor es la capacitancia C de un capacitor, mayor será la magnitud <i>Q</i> de la carga en cada conductor para una diferencia de potencial dada <i>V</i><sub><i>ab</i></sub>, y, por lo tanto, mayor será la cantidad de energía almacenada. (Hay que recordar que el potencial es energía potencial por unidad de carga).</p>
            <p>Así, <i>la capacitancia es una medida de la cantidad de energía que puede almacenar un capacitor</i>. Se verá que el valor de la capacitancia solo depende de las dimensiones de los conductores, así como de la naturaleza del material aislante que hay entre ellos. (El comentario anterior acerca de que la capacitancia es independiente de <i>Q</i> y de <i>V</i><sub><i>ab</i></sub> no se aplica a ciertos tipos especiales de materiales aislantes. En este curso no se estudiarán esos materiales. </p>

                <ul>
                    <li>
                    <p>W<sub>a</sub><sub>&#8594;</sub><sub>b</sub> = <i>F</i><i>d</i> = <i>q</i><sub>0</sub><b><i>E</i></b><i>d</i></p>
                    </li>
                </ul>

            <p>La capacitancia depende solo de la geometría del capacitor; es directamente proporcional al área <i>A</i> de cada placa e inversamente proporcional a su separación <i>d</i>. Las cantidades <i>A</i> y <i>d</i> son constantes para un capacitor dado, y <i>&#8712;</i><sub>0</sub> es una constante universal. Así, con vacío, la apacitancia <i>C</i> es una constante independiente de la carga en el capacitor o de la diferencia de potencial entre las placas. Si una de las placas del capacitor es flexible, la capacitancia <i>C</i> se modifica conforme cambia la separación <i>d</i> de las placas. Este es el principio de operación de un micrófono de condensador. Cuando hay materia entre las placas, sus propiedades afectan la capacitancia. Mas adelante se volverá a tratar este asunto. Entre tanto, se debe hacer notar que si el espacio entre las placas contiene aire a presión atmosférica en lugar de vacío, la capacitancia difiere de lo que predice la ecuación en menos del 0.06 por ciento. En la ecuación, si <i>A</i> se expresa en metros cuadrados y <i>d</i> en metros, <i>C</i> está en farads. Las unidades de <i>&#8712;</i><sub>0</sub> son C<sup>2</sup>/N&#8901;m<sup>2</sup>, por lo que se observa que: </p>

            <code>1 F = 1 C<sup>2</sup>/N&#8901;m<sup>2</sup> = 1 C<sup>2</sup>/J</code>

            <p>Como 1 V = 1 J/C (energía por unidad de carga), esto es congruente con la definición 1 F = 1 C/V. Por último, las unidades de <i>&#8712;</i><sub>0</sub> se expresan como 1 C<sup>2</sup>/N&#8901;m<sup>2</sup> = 1 F/m, por lo que: </p>

                <ul>
                    <li>
                    <p><i>&#8712;</i><sub>0</sub> = 8.85 x 10<sup>-12</sup>F/m</p>
                    </li>
                </ul>

            </section>

            <section class="main-section" id="Corriente_resistencia_y_fuerza_electromotriz">
            <header>Corriente, resistencia y fuerza electromotriz</header>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea at commodi expedita officiis, fugiat omnis eos repellendus deserunt natus quam laboriosam eius reprehenderit quaerat voluptas hic corrupti impedit optio dicta?</p>
            <p>Minus nihil adipisci nisi aspernatur officia odio labore similique esse delectus odit sunt in sint facere quas, libero dolore perferendis culpa eum non, ducimus id recusandae rem eos. Facilis, exercitationem?</p>
            <p>Libero quod nisi ab minima totam quas architecto, enim omnis iste, tempore, aliquam dolores sapiente ullam molestiae exercitationem dolorem provident iusto odio eaque nam. Voluptatum consequatur aut impedit veniam officia!</p>
            <p>Fuga atque quisquam iste minus reprehenderit incidunt architecto deserunt id quis consequuntur, ab sequi illo adipisci distinctio quasi magnam pariatur mollitia? Eveniet ea eaque ex sit fugiat sint nisi. Nemo?
            Quos, deserunt! Minima ad excepturi, vitae quibusdam facilis fuga asperiores suscipit adipisci reprehenderit exercitationem ex repellat nobis, quidem necessitatibus nam, accusantium provident aut! Veniam nam delectus reprehenderit aliquam, molestias tenetur.</p>
            <p>Esse quisquam, quas aliquid distinctio cupiditate eligendi dolor obcaecati cum odio laborum? Illum minus cumque atque quo quos nemo aliquid temporibus porro odit repudiandae perferendis, iure, iusto, culpa labore ducimus?</p>
            <p>Sint quia eum facere obcaecati qui similique molestiae sed! Amet sapiente aut placeat, similique eligendi id quaerat sint magni accusamus atque dolore. Cum earum dolorum ut libero, magni deleniti illum?
            Labore iusto autem rerum, illum, distinctio qui, doloremque ullam voluptatem facilis explicabo consectetur adipisci deleniti ea neque quia nam aliquid culpa commodi perferendis placeat officiis? Necessitatibus aliquam molestias nostrum labore!</p>
            <p>Error voluptatem molestiae excepturi. Deleniti blanditiis temporibus vero reiciendis magni eos illo. Quam adipisci placeat illo quae fuga saepe nulla unde. Voluptatem qui dolorem quibusdam optio autem aliquid numquam pariatur.</p>
            <p>Minima dolorem libero obcaecati incidunt ea autem perspiciatis commodi? Possimus perferendis assumenda, quo ex fugit tempore deleniti, ipsum minima quae aut corrupti molestiae quas velit facilis cupiditate vel adipisci ad.
            Quas reprehenderit eligendi enim molestiae quis, nihil odit quae maxime quisquam laborum perferendis natus tempora facilis culpa eaque accusamus aliquam inventore. Fuga aperiam provident consequuntur quasi odit illo nobis similique.</p>
            <p>Ratione quod molestias ullam! Iste, nisi. Nihil ipsum quos doloremque quisquam, cum vitae nemo. Laborum, doloremque cum quibusdam quas neque ex ullam, illum libero recusandae, saepe quam? A, accusamus numquam.
            Sit eveniet, quas aut exercitationem laudantium officiis voluptates natus commodi, dolorum nesciunt adipisci cupiditate expedita minima corrupti repellat aliquam. Ratione odio quia esse quod laborum? Incidunt commodi enim earum corrupti.</p>
            <p>Commodi magnam, dolorem eum aperiam velit aliquam animi saepe similique qui nemo quisquam facere est nisi ullam quod aut. Exercitationem animi architecto perferendis soluta velit, ullam incidunt dicta libero qui!
            Temporibus atque consectetur, aliquid quaerat repudiandae obcaecati, mollitia cum nobis dolorum sequi a accusantium itaque voluptatum corrupti nihil provident odit. Accusantium corrupti, harum repellendus vel consectetur ipsum voluptatibus odit praesentium.</p>
            <p>Asperiores quod in, deleniti ipsum nihil sint culpa fuga rerum voluptatem facilis possimus, delectus nam ullam qui dicta recusandae sunt. Sapiente fuga cum a deserunt laboriosam adipisci labore itaque saepe!
            Nulla veritatis quasi veniam animi nobis voluptatum magni quod eos saepe repellat perferendis error fugiat ipsa temporibus doloremque, dolorum amet hic ullam tempora architecto magnam corporis molestias! Error, sit cum?
            Officia deleniti, sequi vitae officiis voluptates iure labore nemo similique atque sint magni adipisci saepe cum quasi error odio suscipit nostrum amet placeat asperiores necessitatibus libero! Quisquam at doloribus eum?</p>
            <p>Tempora quam reprehenderit fugit dolores! Cumque, eligendi? Recusandae quibusdam, quae distinctio placeat vero nostrum ut atque fuga asperiores impedit adipisci laudantium est repellat harum nisi dolorum laborum provident ipsa fugit?</p>
            <p>Illo, repellat accusantium libero aperiam, suscipit minima accusamus quisquam corporis repellendus ea nisi vel similique nobis pariatur tenetur aliquam non, est sunt perspiciatis enim obcaecati numquam consequatur. Hic, ipsa odio.</p>
            </section>

        </main>

    </body>

</html>

Can you post it somewhere else? gist or codepen?

I’m not sure if you will be able to see it, I’ve never used codepen before

i found one mistake.

            <section class="main-section" id="Corriente_resistencia_y_fuerza_electromotriz">
            <header>Corriente, resistencia y fuerza electromotriz</header>

The name in the header has a comma but the id and the nav-link don’t.
I suggest you remove the comma.

Already tried, still not working =(

please keep on trying to find issues yourself as this is part of the exercise. Above it seems you have used a capital D in Dieléctricos but not in the id. Make sure you have the same capitalizations.