Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Stuck with “You should not have any empty h1 elements within #welcome-section element.”

I have text inside h1 element, but can pass trough anyway.
Before I passed with the same code. Looks like problem with the test;


<!DOCTYPE html>
<html lang="en">
<!--FOLKS, THIS INTERPRETER DOES NOT WORK PROPERLY!!! in "preview" does not work fonts... in "new tab" problems with audio. So at the end of the project there would be a link you can watch it on normal hosting :-) -->  
  <head>
    
    <title>Richard Wells</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bangers">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<!--PRELOAD SECTION-->    
    <link rel="preload" as="image" href="https://drive.google.com/uc?export=download&id=1YyODQDxUzHB5eF3a1IR6vDAgkx09c7jb">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Bangers" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Orbitron" as="font" type="font/woff2" crossorigin>

  </head>

  <body>
    
    <section id="welcome-section">

      <h1>Richard Wells</h1>

      <div id="welcome-logo">
        <div class="police-light red"></div>
        <div class="police-light blue"></div>
        <img id="welcome-image" src="https://drive.google.com/uc?export=download&id=1YyODQDxUzHB5eF3a1IR6vDAgkx09c7jb">
      </div>

      <div id="welcome-text-wrap">
        <div id="welcome-text-curtain"></div>
        <div class="police-light red"></div>
        <div class="police-light blue"></div>
        <div id="welcome-text">RICHARD</div>
      </div>

    </section>

  

  <div id="background">

    <div class="background-buildings sky">
    
      <div class="bb1 building-wrap">
        <div class="bb1a bb1-window"></div>
        <div class="bb1b bb1-window"></div>
        <div class="bb1c bb1-window"></div>
        <div class="bb1d"></div>
      </div>
      
      <div class="bb2">
        <div class="bb2a"></div>
        <div class="bb2b"></div>
      </div>
      
      <div class="bb3"></div>
      
      <div></div>
      
      <div class="bb4 building-wrap">
        <div class="bb4a"></div>
        <div class="bb4b"></div>
        <div class="bb4c window-wrap">
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
          <div class="bb4-window"></div>
        </div>
      </div>

    </div>

    <div class="foreground-buildings">
      <div class="fb1 building-wrap">
        <div class="fb1a"></div>
        <div class="fb1b"></div>
        <div class="fb1c"></div>
      </div>
      <div class="fb2">
        <div class="fb2a"></div>
        <div class="fb2b window-wrap">
          <div class="fb2-window"></div>
          <div class="fb2-window"></div>
          <div class="fb2-window"></div>
        </div>
      </div>
      <div></div>
      <div class="fb3 building-wrap">
        <div class="fb3a window-wrap">
          <div class="fb3-window"></div>
          <div class="fb3-window"></div>
          <div class="fb3-window"></div>
        </div>
        <div class="fb3b"></div>
        <div class="fb3a"></div>
        <div class="fb3b"></div>
      </div>
      <div class="fb4">
        <div class="fb4a"></div>
        <div class="fb4b">
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
          <div class="fb4-window"></div>
        </div>
      </div>
      <div class="fb5"></div>
      <div class="fb6"></div>
    </div>

  </div>
 
 


    <div id="navbar">
      <a id="link-about" class="navbar-link" href="#about">ABOUT</a>
      <a id="link-projects" class="navbar-link" href="#projects">PROJECTS</a>
      <a id="link-contacts" class="navbar-link" href="#contacts">CONTACTS</a>
    </div>


    <div id="portfolio">

      <div id="about">


        <span class="header main">FREECODECAMP INCIDENT</span>

        <div id="basic-data">
        
          <div id="basic-data-image"></div>
          
          <div id="basic-data-text">
              <span class="add-info">NAME:</span>
              <span class="base-info name">RICHARD WELLS</span>
              
              <span class="add-info">DATE OF BIRTH:</span>
              <span class="base-info">08.20.1989</span>
              
              <span class="add-info">CITIZEN:</span>
              <span class="base-info">RUSSIAN</span>
              
              <span class="add-info">LANGUAGES:</span>
              <span class="base-info">ENGLISH, RUSSIAN</span>
              
              <span class="add-info">MARTIAL STATUS:</span>
              <span class="base-info">SINGLE</span>
              
              <span class="add-info">LISTED AS:</span>
              <span class="base-info">SOFTWARE ENGINEERING STUDENT</span>
              
              <span class="add-info">PREVIOUS OCCUPATION:</span>
              <span class="base-info">MECHANICAL ENGINEER - 12 YEARS</span>

          </div>
        
        </div>


      </div>




      <div id="projects">


        <span class="header">PROJECTS</span>
        
        
        <div class="project-tile">
          
          <div class="project-image-wrap">
            <span class="project-reduce-cross">❌</span>
            <span class="project-enlarge">click to enlarge</span>
            <img class="project-image" src="https://drive.google.com/uc?export=download&id=1it1IDbhwLYhkfkQ_qi0hsuZ3MpQFk0dj">
          </div>
          <p class="project-title">My first FCC project. Simple form.</p>
          <a class="project-link" href="http://freecodecamp.rwells.me/surveyform.html">Visit this website</a>
        </div>

        <div class="project-tile">
          <div class="project-image-wrap">
            <span class="project-reduce-cross">❌</span>
            <span class="project-enlarge">click to enlarge</span>
            <img class="project-image" src="https://drive.google.com/uc?export=download&id=1lX3E2FgzseaKmHJw2IiArYU1sNYbqrL0">
          </div>  
          <p class="project-title">My second FCC project. Tribute page.</p>
          <a class="project-link" href="http://freecodecamp.rwells.me/tributepage.html">Visit this website</a>
        </div>

        <div class="project-tile">
          <div class="project-image-wrap">
            <span class="project-reduce-cross">❌</span>
            <span class="project-enlarge">click to enlarge</span>
            <img class="project-image" src="https://drive.google.com/uc?export=download&id=1jnmqHamKPR4wCGrhVFdG5CvWai8gP0m5">
          </div>
          <p class="project-title">My third FCC project. Tech docs page.</p>
          <a class="project-link" href="http://freecodecamp.rwells.me/techdocpage.html">Visit this website</a>
        </div>

        <div class="project-tile">
          <div class="project-image-wrap">
            <span class="project-reduce-cross">❌</span>
            <span class="project-enlarge">click to enlarge</span>
            <img class="project-image" src="https://drive.google.com/uc?export=download&id=1EGQpfymnwiLFAXRvkh5ITlvtXGhaz5e6">
          </div>
          <p class="project-title">My fourth FCC project. Product page.</p>
          <a class="project-link" href="http://freecodecamp.rwells.me/prodlandpage.html">Visit this website</a>
        </div>        

     
      </div>






      <div id="contacts">
      


        <span class="header">CONTACTS</span>


        <div id="social-wrap">
      
          <a id="profile-link" class="social-link" target="_blank" href="https://www.freecodecamp.org/richard_wells">
            <img class="social-image" src="https://drive.google.com/uc?export=download&id=1tiOnzFlTrTGXgG2e4eK8wUB6wpcITIWK" title="freeCodeCamp">
          </a>

          <a class="social-link" target="_blank" href="https://gitlab.com/richwells31">
            <img class="social-image" src="https://drive.google.com/uc?export=download&id=1aVjuslDk_WAX4Sek9jr78rnAuKlgU5NW" title="gitLab">
          </a>
      
        </div>


        <div id="contacts-wrap">
          <span>PHONE:</span>
          <span>+1-501-618-00-62</span>
          <span>EMAIL:</span>
          <span>richwells31@gmail.com</span>
        </div>


      


      </div>





      <div id="footer">
        <a id="footer-link" href="http://rwells.me">© 2022 RWELLS</a>
      </div>







    </div>


<audio id="ambience" autoplay>
  <source src="https://drive.google.com/uc?export=download&id=1Q12Q5fVtM7NjdS2YNmu7LGkw148EZZhF" type="audio/mp3">
</audio>


<script>

  console.log('hi_1');

  var welcomeLogo = new Image();
  welcomeLogo.src="https://drive.google.com/uc?export=download&id=1YyODQDxUzHB5eF3a1IR6vDAgkx09c7jb";


  welcomeLogo.onload = function() {
    console.log('one more_8');

    let welcomeLogo_node = document.getElementById('welcome-logo');
    let welcomeLogoTextCurtain = document.getElementById('welcome-text-curtain');
    let welcomeSection = document.getElementById('welcome-section');
    let active = 'active';
  
    welcomeLogo_node.classList.add(active);
    welcomeLogoTextCurtain.classList.add(active);
    welcomeSection.classList.add(active);
    
    [...document.getElementsByClassName('police-light')].forEach(element => {
      element.classList.add(active);
    });    
};



  window.addEventListener("load", ()=>{


    [...document.getElementsByClassName('project-image-wrap')].forEach(element => {
      
      element.getElementsByClassName('project-enlarge')[0].addEventListener('click', ()=>{
          element.classList.add('enlarged');
      });

      element.getElementsByClassName('project-reduce-cross')[0].addEventListener('click', ()=>{
        element.classList.remove('enlarged');
      });

    });


  });




</script>



  
  
  </body>


</html>
2

Hey! Can you post the code that you’re trying to complete the challenge? it would make it much easier for others to help you.

3

I posted, but it’s should not cause " You should not have any empty h1 elements within #welcome-section element." 100%

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

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.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.