Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it.

Here is the HTML code:

<header>
  <nav id="navbar">
    <a href="#welcome-section" id="logo-link">
      <h1>Welcome</h1>
    </a>

    <ul class="nav-list">

      <a href="#projects">
        <li>Projects</li>
      </a>
      <a href="#profile">
        <li>Profile</li>
      </a>
      <a href="#contact">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
</header>
<!--BODY-->

<body>
  <section id="welcome-section">
    <div class="header-text">
      <h1><code>Hello World!</code></h1>
      <p>My name is Nick</p>
    </div>
  </section>

CSS Styles:


#navbar {
  position: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  background-color: #007cc7;
  display: flex;
  justify-content: space-between;
  z-index: 5;
}

.nav-list {
  display: flex;
  margin-right: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.nav-list a {
  display: block;
  font-size: 1.5rem;
  padding: 10px;
  color: white;
}

.nav-list a:hover {
  color: cyan;
}

#logo-link {
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  font-size: 1.5rem;
}

#welcome-section {
  height: 100vh;
  margin-top: 20px;
  text-align: center;
  background-color: #12232e;
  border-style: solid;
  border-color: #203647;
  border-width: 10px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  display: flex;
}

.header-text {
  margin: auto;
}

#welcome-section h1 {
  font-size: 5rem;
}

#welcome-section p {
  font-size: 1.5rem;
}

Access the challenge here: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage

htmlcss

Answer №1

Live Demo:

To make the necessary changes:

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

Delete the margin-top property from #welcome-section.

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}   
    
#navbar {
  position: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  background-color: #007cc7;
  display: flex;
  justify-content: space-between;
  z-index: 5;
}

.nav-list {
  display: flex;
  margin-right: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.nav-list a {
  display: block;
  font-size: 1.5rem;
  padding: 10px;
  color: white;
}

.nav-list a:hover {
  color: cyan;
}

#logo-link {
  color: white;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  font-size: 1.5rem;
}

#welcome-section {
  height: 100vh;
  text-align: center;
  background-color: #12232e;
  border-style: solid;
  border-color: #203647;
  border-width: 10px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  display: flex;
}

.header-text {
  margin: auto;
}

#welcome-section h1 {
  font-size: 5rem;
}

#welcome-section p {
  font-size: 1.5rem;
}
<header>
  <nav id="navbar">
    <a href="#welcome-section" id="logo-link">
      <h1>Welcome</h1>
    </a>

    <ul class="nav-list">

      <a href="#projects">
        <li>Projects</li>
      </a>
      <a href="#profile">
        <li>Profile</li>
      </a>
      <a href="#contact">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
</header>
<!--BODY-->

<body>
  <section id="welcome-section">
    <div class="header-text">
      <h1><code>Hello World!</code></h1>
      <p>My name is Nick</p>
    </div>
  </section>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to programmatically click a div button in C# using WebBrowser?

Exploring the capabilities of WebBrowser in C#, I came across a website that features a button without an ID, but rather nested within a div element. <div class="pc-image-info-box-button-btn-text pc-cursor"><i class="fa fa-heart" aria-hidden="tru ...

javascriptc#html

Modify the CSS color attribute interactively by clicking

I have a function that can generate random colors. I would like to utilize this function along with jQuery's toggleClass feature to change the color of a table cell when clicked, and revert it back to its original color if clicked again. Here is the ...

jquerycss

Bootstrap 5 does not support tab navigation functionality

I created a new HTML page, and I encountered an issue while trying to enable tabs using JavaScript. <html> <head> <title>Excel Viewer</title> <link hr ...

javascripthtmlbootstrap-5

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

javascriptcssexpresspath

Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available. The header and footer remain consistent in size and structur ...

htmlcss

The footer is not expanding to fill the entire width of the page

My footer is giving me trouble by not stretching to the full width on one specific page out of eight. This issue arose after I added an administration menu. Any assistance would be greatly appreciated. HTML: <div id="administraceMenu"> <ul clas ...

htmlcss

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

Is it possible for two overlapping Javascript divs to both be draggable at the same time?

I have multiple stacked div elements. The top one needs to be draggable, while the one beneath should remain clickable. An illustration is provided below for better understanding: The green div elements are contained within cells. Clicking on a cell trigg ...

javascripthtmlcss

Incorporating the <sub> element while maintaining the line height

I am facing a challenge with formatting text that includes subscripts and superscripts tags. For example: <div>hello <sub>world</sub>, how are you? Translated as logical aggregates or associative compounds, these characters have been int ...

htmlcss

What is the best way to showcase attributes in HTML using nodejs and expressjs?

I am working on a Node.js and Express application with HTML. In one of my JavaScript files, I use response.render to display an HTML page, passing variables like this: response.render('agent.html', {name: name, phone: phone}); Now, I want to kn ...

htmlnode.jsexpress

Animating the Bookmark Star with CSS: A Step-by-Step Guide

I found this interesting piece of code: let animation = document.getElementById('fave'); animation.addEventListener('click', function() { $(animation).toggleClass('animate'); }); .fave { width: 70px; height: 50px; p ...

javascripthtmlcssanimation

Leveraging Vue Data for Storing CSS Properties

I am currently utilizing the Quasar framework in conjunction with Vue for my application development. Below is a snippet of my code: <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip> <q-tooltip c ...

javascriptcssnode.jsvue.jsquasar-framework

When the label is clicked, retrieve the value of the checkbox within

I have a checkbox inside a label, and for design purposes, I added a div there. My requirement is to get the checkbox value on the click event of the label. However, I am always getting false whenever the checkbox is clicked. <label class="text-xs col- ...

cssangularjscheckboxonclick

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

csscss-animationskeyframe

Trouble with image click event in jQuery/JavaScript

I am having trouble with my HTML and JS code. I have added images to my HTML page and want to make it so that when the image is clicked, an alert box pops up. However, for some reason, my JavaScript isn't working as expected. Here is a snippet of my ...

javascriptjqueryhtml

Tips for creating text that wraps around an image in an editor

On my webpage, I am using an editor called Cleditor jquery plugin. The default setting allows me to insert images, but the text does not wrap around it. I attempted using vertical-align:top, but it did not resolve the issue: What CSS property should I ap ...

jquerycsseditorword-wrap

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

"Unveiling the invisible: Revealing hidden characters in PHP

Currently I am dealing with some code extracted from a MySQL column. Within this code are hidden characters like "\t" and "\n". I am attempting to showcase the raw code in a DIV while also making sure these hidden characters are visible. The cod ...

phphtmlcharacter-encoding

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

As I transition my app from Electron to Angular, one of my main objectives is to display an image uploaded by a user. Here's how I attempted to achieve this: page.component.ts uploadImageFile(){ fileDialog({}, files =>{ //Utilizing the fileDi ...

javascripthtmlangulartypescript

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile