Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi, why is it so that when I code something the preview show me the website in a way and when I click on the button next to it and it shows me it as a website that looks different?
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alan's Portfolio</title>
     <link rel="stylesheet" href="styles.css"></link>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
  </head>
  <body>
    <header>
      <nav id="navbar">
        <ul>
          
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li></ul>
          </nav>
    </header>
    <main>
      <div id="welcome-section"><h1>Hi I am Alan</h1><h2>A student of Web Developing</h2>
      </div>
      <div id="projects"><h3>My Project</h3><a href="https://codepen.io/99alanhassan/full/QWroYMM" class="project-tile"><button><strong>Product Landing Page</strong></button></a><img src="https://i.ibb.co/PDzCvfm/Soccerballs.png" alt="A Product Landing Page"></div><div><h2 id="a">Let's work together..</h2><p id=b>How do you like your tea?</p></div>
      <div>
        <a href="https://www.freecodecamp.org/alanhassan"id="profile-link" target="_blank"><i class="fa-brands fa-free-code-camp"></i></a></div>
    </main>
    <footer></footer>


  </body>
  
  </html>

/* file: styles.css */
body  {
  width: auto;
  height: 600px;
  background: linear-gradient(110deg,
  #778899,
  #203040);
}

ul {
  list-style-type: none;
  margin: -8;
  padding: 0;
  background: linear-gradient(-10deg,
  #778899,
  #203040
  );
  overflow: hidden;
  width: 100%;
  z-index: 1;
  position: fixed;
}
li {
  float: left;
}

li a {
display: block;
color: #ffd700;
text-align: center;
padding: 15px 25px;
text-decoration: none;
font-size: 21px;
font-family: brush script mt;


}

li a:hover {
  background-color: #daa520;
 
  
}
body main div h1 {
  font-size: 37px;
  position: relative;
  top: 200px;
  text-align: center;
  color:#87ceeb;
  font-family: courier new;
}
body main div h2 {
  font-size: 27px;
position:relative; 
  top: 200px;
  text-align: center;
  color:#ffd700 ;
  font-family: brush script mt;
}
 div h3 {
   position: relative;
   top: 550px;
   text-align: center;
   color: #87ceeb;
   font-family: courier new;
   font-size: 30px;

 }
 img {
   position: relative;
   width: 370px;
   height: 230px;
   top: 600px;
   left: 285px;
 }
button {
  font-size: 16px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  width: 370px;
  position: relative;
  top: 855px;
  left: 285px;
  font-family: courier new;
  color: #87ceeb;
background-color: lightgray;
}
button:hover {
  background-color: yellow;
}

#a {
  top: 800px;
  position: relative;
  text-align: center;
  color: #87ceeb;
font-size: 30px;
font-family: courier new;


}
#b{
  position: relative;
  top: 790px;
  text-align: center;
  color: #ffd700;
  font-family: brush script mt;
  font-size: 25px;
  
}

i {
  font-size: 40px;
  color: #ffd700;
  position: relative;
  top: 800px;
  left: 160px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

can you describe the button you mean? (does it have a symbol or words on it?)

3

Skärmavbild 2022-10-19 kl. 15.46.44

4

this button detaches the preview pane so it can be viewed in a larger window.
What is the differences you have noticed in the preview that are surprising you?

5

Do you see the button that links to my codepen under the project image? And then it moves.

Skärmavbild 2022-10-19 kl. 15.49.17
Skärmavbild 2022-10-19 kl. 15.49.171008×1150 80.8 KB

Skärmavbild 2022-10-19 kl. 15.49.44
Skärmavbild 2022-10-19 kl. 15.49.441354×1000 75.7 KB

6

i can’t quite tell what is the concern.
Things will shift depending on the layout you are using and the size of the viewport.
if you want them not to you have to write code to make them not to.

7

Which of the views should i go after so it becomes correct later on when I will submit the project? Or should I complete the project on Codepen and then copy and paste in FCC?

8

But do you understand what I mean about the button to the link that moves?

9

with respect to the tests, so long as you pass the requirements, it doesn’t care what your page looks like.
However, you should care that your page is ‘responsive’. That means, it should look good whether it is displayed on a large monitor or on a small cell-phone screen.
(or ideally, that is the goal of all web-designers)

10

Okay and I make it with the @media?

11

you can certainly use @media or you can design the page so regardless of where it is displayed it will resize correctly. (it all depends on your design and the goals you are trying to achieve)

12

How can I design it to display with correct size?

13

Is there any function that resizes the website to the correct size in different devices automatically if you know what I mean?

14

there are multiple considerations.

1- don’t use px to set any values, always use relative units like rem or % etc.
2- layout the page so everything is centered (that way it is centered on a large screen and a small screen without you doing any extra work)
3- use a layout manager like flex or grid

here’s a ref as well

15

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