2 Viewport challenges failed to pass the test

HTML-CSS
1

Tell us what’s happening:

Why I cant pass?

The height of the welcome section should be equal to the height of the viewport.

The navbar should always be at the top of the viewport.

Other question not related to the test to pass but I would like to know, How do I get rid of the right and left spaces that affect the “My FCC Profile Page” when I hover using the mouse?

One more question, How do I stick the navbar all the way to the top right edge without using top, bottom, right, and left properties?

Thats it. Thank you :slight_smile:

Your code so far

Here is the direct link you may need from CodePen.io as well:

------HTML------

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<welcome id="welcome-section">
  
  <h1>Hey i'am Andrew.<br> <p>a web developer</p></h1>
  
</welcome>

<h1 id="my_projects">Some of my Projects</h1>

<project id="projects">
  <!-- Any Element -->
  
 <a href="https://codepen.io/andrewalkazeer/full/rremVJ/" class="project-tile"><img src="https://lh3.googleusercontent.com/axMMNfng54AswBF9nMBKiNRiOjFQFG8M_rY0CCnXIiZvGxBtqnTU3QNaTBGXYpEY_KDQtqQBs1vcpCJ5A7tVe-5eRdwSyzx3gwVlPC7lW5PJ_zi-ZaBG7joVRiExS0dY-q2U0pFzTnl9QKV5Ohdg7LcWvrQhSa5qkbGsTsOP4XuhyhsG9kyVAMnfjOh1kGih0mSQKYTVwi6JWdpbTgUKPiadh9eNki1j6x4_bDtGuIhISmM4lLSffva_lsRivFAjtbaBDisDriZcPgIEOXOc_L_DqdlWtU9cOEJN--QXrBPza-0bKsIYTVPUPcaB1v6UEdt7Y0geXbeiz-3LJ-7M7Uax6y2QBznItp6LkGmdB_C8Ha2Ogfgp7_N4n1OHFU6C7w5EyOpL0JbULzmDb9n0QIx9LR5jTiqGJ_WSrvodQ7EFEAOgztQEVC1skEBwKk6TCjyLn7Y86orWlg-rhbDYufhOyHJEi5M62MK8mVv8oPtnxFJov3Fs_-ME7LCPAUrIoN8EwWqq89che08cpgJgOXBAXUwe4f-GUXhNWBHZEezwJAqtce0M-wkTJbzR5wK0PsHnHs_ySMRDyePhEuwym3NZGQMTvr3xE4Bbgh4=w365-h204-no"></a>
<h2> Survey Form Project</h2>


<a href="https://codepen.io/andrewalkazeer/full/ejLeOw/" class="project-tile"><img src="https://lh3.googleusercontent.com/MUX91Ojs9GM4Clt60JL9gFISm52m2aOFvWcP6hUojre8cv8b3_3yuJYt9tC_dKEWgGpIAHXHjxHk-ifjkO7Sa6XGDG06mPgKhnilMArIvTxxzaRphKsLuhWoMg_HysenN6Z0fs5ZqBLwNYAVLztK607lNCtlpz1nYMc95kZ1n6eQpB0BaPho-jjK_dx5oesQipzNt09XYsVcB4knwO0PLRxXfS4uScbcrE_dGuV_kjOI3lVhiOYYasqKosquta-e5XblE6PqWu8Ryr-RwXSovfJ2Xe8DEttmfTWPhmJyuLVMhui1hMB0T-w9DULhILgdobbSj_qS80dwbyi2UMQsmJOgKiMyqjaWYDfPBd7-bSu2KIl-H3sjWk63JbvEnLkJzb6iwK71wqoOY-MEQkgej2QaqWWK-c74Dw0G1fXEi0DsMx_d8Erlbi37SigSUislKXvqV1kUnAYXKgNk8YTgUbxzR_1fWcemamDtve6i13UTf_QYA8MPer_Y1BPS6mv2r38_1r5Hr_NFjQjQuD_L8xdO9dH5SXVsbm2XIiZ4bVRVU9dWzAOepB4clHnBJR6XI-JXTA8g2GY1fD9iKx1WOkIyS4gHN3FCXSDFcHI=w368-h206-no"></a>
<h2>Technical Documentation Page Project</h2>
  
<a href="https://codepen.io/andrewalkazeer/full/VBQOOq/" class="project-tile"><img src="https://lh3.googleusercontent.com/HDHK-QgtficgVnZj6CjDhcj3aikjXuE8dqlvTZ4JUKLRqOW9_jT2GZ78e2myIZryQDY-R9wMq0uvKWpqriN0ZQ8e60BN02ER5kissE3hNkr2l3esvnX3hJ-t4-5gl6ZKbbug8Au0CPhvh4m5Rlvosu5jjEyqNv-GUbCAXAXuIWcaDT56O2mfhzq_Uf9lyfnTq9tseEfWiTh5VXUcoYdI7FQLxD0vvUvSZxi3n3L-uhnr45BNHfVSKz2dXEb_6JoNDP1DqFzojk_hjpKgD3JddAmhyLS_v24sIW4YIpGFonqFoCeXut_vsfkao14g2RTdsqRMZMAWWAVZOS4gN9a7IJjP0Oq-CurRtYzLlrfBA-9kZ2hmAlVUUfKnwMV7JtqrxhCsn5sG1uXxuQU78Np_ow86Z7AsTUIEz_bE5yX6ZTk6Co9sVYPJ2XnecjdMgNnzEJXOnMUPTeTS3ryknRJbzQmL4r_yb4MO0q23vLv6ICFzneP82lD5bMniFcshhwu7_u31MiAapwTCXOUeyawFKML63_Bj0GB6aKcvGj8KsZspUXbRs__xr2_A01BTcB824mgP8OjNy6mHTPSojxTSwTzVr66LKH-ug6RBSEA=w364-h208-no"></a>
 <h2>Product Landing Page Project</h2>
</project>

<nav id="navbar">
  <ul style="list-style-type:none">
    
    <li><a href="#welcome-section">About Me</a></li>
    <li><a href="#projects">My Other Projects</a></li>
    <li><a href="#profile-link">My FCC Profile</a></li>
  
</nav>
  
  <a href="https://www.freecodecamp.org/andrewalkazeer" target="_blank" id="profile-link"><h1>My FCC Profile Page</h1></a>

------CSS------

@import url('https://fonts.googleapis.com/css?family=Hanalei+Fill');



#welcome-section{
  text-align: center;
color: blue;
  position: relative;
  top: 350px;
}

#navbar{
  position: fixed;
  
 
  
  
}

ul li{
  position: relative;
  float: left;
  background-color: silver;
  font-size: 30px;
  bottom: 400px;
  left: 660px;
  padding: 20px;
  
}
ul li a{
  text-decoration: none;
  padding: 50px;
  font-family: Hanalei Fill;
  color: black;
  
}

#projects{
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  top: 800px;
 
}

#profile-link{
  position:relative;
  text-align: center;
  top: 200px;
  
}

h2{
  color: grey;
  text-align:center;
}
p{
  color: grey;
  font-size:25px;
}
#my_projects{
 position: relative;
  text-align: center;
  top: 780px;
  
}
@media (hover: hover) {
  #profile-link:hover {
    color: grey;
    position: relative;
    left: 3px;
    bottom: 1px;
    font-size: 20px;
  }

Your browser information:

User Agent is: Chrome Windows 10.

Link to the challenge:

1 Like
3

There is no tag as welcome, change it to div and give #welcome-section a height of 100vh

Use top 0, left 0, width 100%; to the #nav-bar with position fixed which you already have

Align li items and remove the extra margin on ul

2 Likes
4

I’m checking the template as I’m writing right now and I found errors that complicate styling elements for you.

You made an error of putting the Navbar at the end of the page and then trying to displacing it to the top with CSS.

That’s not how it should be done.

What you have to do: You should put elements in their right place inside the HTML document. CSS is going to be like a makeup to be used to beautify them.

  1. Copy the <nav id="navbar"> </navbar> and paste it at the beginning of the HTML page.
  2. There’s no need to put the links in a list, delete that<ul><li> and all of those extra CSS.

Another error is that you are linking to something unknown that has no extension; if you’d like the images to appear and also solve other HTML problems, search for images that end with .jpg, .png, etc.

1 Like
6

I mean, it’s preferable to link to an accessible img with an extension.
Those images he’s using have long links without an extension and are not accessible (they are replaced with something else).

Thank you for the information.

1 Like
8

Oh also, there’s another problem, a welcome section doesn’t mean: 'an element with the name <welcome></welcome>’ should be added. That doesn’t exist.

instead, it should be <section id="welcome-section"></section>.

Good luck on your project.

1 Like