Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

** * Your portfolio should use at least one media query.
Your #navbar element should always be at the top of the viewport.**

  **<div id="welcome-section">

My Portfolio

Build a technical documentation project
** 
/* file: index.html */
<div id="welcome-section">
<a id="profile-link" target="_blank"></a>
<h1>My Portfolio</h1>
</div>
<div id="projects">
<div class="project-tile">Build a technical documentation project</div>
<navbar id="navbar"><a href="#https://codepen.io/shimphillip/pen/ZEXMeZW"></a></navbar>
</div>

/* file: styles.css */
@media {
.div {
  
}
}

  **Your browser information:**

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Hi, could you please explain your issue in more detail? It makes pointing you to the correct resources easier.

You don’t seem to have a media query or have tried any code to get the nav-bar to stick. hence why the project is saying you don’t have one.

3

can you tell me how to solve this problem so I can move on the next challenge…

4

Here is the w3schools page on media queries. This will help you create an appropriate media query.

As for the nav-bar, this W3schools article explains different css position properties. One of them will achieve your goal. Read the page carefully and you’ll work out which.

Hope this helps!

5

I read the documents, but when I applied what I think suits the code, it doesnt work. Can you tell me exactly what I needed to do so I can pass the challenge and move on… Stuck here for about 2 weeks now

6

You need to paste your updated code in here so we can see what you tried. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

7

Hi, please show me your updated code. I can’t help without seeing it.

Also in the forum we don’t allow solutions and they will be removed, long term they don’t help people learn. I can give you tips and help to point you towards solving the lesson, but I can’t solve it for you.

8

This is my code

My Portfolio

Build a technical documentation project

9 

<a id="profile-link" target="_blank"></a>

<h1>My Portfolio</h1>

</div>

<div id="projects">

<div class="project-tile">Build a technical documentation project</div>

<navbar id="navbar"><a href="#https://codepen.io/shimphillip/pen/ZEXMeZW"></a></navbar>

</div> ```
10

Is this all of your HTML code? I can’t see a doctype declaration, <html> element, <head> element or <body> element. Those are very important to pass the project user stories.

I also need to see your css code, because that is where the media query goes.

11 
<html>
  <head>
<div id="welcome-section">
<a id="profile-link" target="_blank"></a>
<h1>My Portfolio</h1>
</head>
<body>
</div>
<div id="projects">
<div class="project-tile">Build a technical documentation project</div>
<navbar id="navbar"><a href="#https://codepen.io/shimphillip/pen/ZEXMeZW"></a></navbar>
</div
</body>
</html>```

```@media (max-width: 600px) {}```
12

Okay, I’m seeing some syntax mistakes and missing elements.

There should not be a h1, div or anchor element inside the head element.

There should be a link element that links to your style sheet. Or your css styling will not apply to your html. This will mean your media query won’t work even if it is correctly written.

This isn’t strictly required, but a meta element with a charset attribute, a title element with page title and a meta element with viewport attribute would be good to add.

This is covered in the first few stages of previous lessons you’ve completed on the new responsive web design course. Such as Learn Basic CSS by Building a Cafe Menu.

1 Like
13

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