8.9 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
bd7158d8c242eddfaeb5bd13	Creare una pagina Web per il Portfolio Personale	14	301143	build-a-personal-portfolio-webpage

--description--

Obbiettivo: Crea un'app funzionalmente simile a https://personal-portfolio.freecodecamp.rocks

User story:

Il portfolio dovrebbe avere una sezione di benvenuto con un id di welcome-section
La sezione di benvenuto dovrebbe avere un elemento h1 che contiene del testo
Il tuo portfolio dovrebbe avere una sezione progetti con un attributo id di projects
La sezione progetti dovrebbe contenere almeno un elemento con un attributo class di project-tile per contenere un progetto
La sezione progetti dovrebbe contenere almeno un link ad un progetto
Il tuo portfolio dovrebbe avere una barra di navigazione con un id di navbar
La barra di navigazione dovrebbe contenere almeno un link che puoi cliccare per navigare ad una sezione diversa della pagina
Il portfolio dovrebbe avere un link con un id di profile-link che apre il tuo profilo GitHub o freeCodeCamp in una nuova scheda
Il portfolio dovrebbe avere almeno una media query
L'altezza della sezione di benvenuto dovrebbe essere uguale all'altezza della porta di visualizzazione
La barra di navigazione dovrebbe sempre essere in cima alla porta di visualizzazione

Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento!

Nota: Assicurati di aggiungere <link rel="stylesheet" href="styles.css"> nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS

--hints--

Il portfolio dovrebbe avere una sezione "Benvenuto" con un id di welcome-section.

const el = document.getElementById('welcome-section')
assert(!!el);

L'elemento #welcome-section dovrebbe contenere un elemento h1.

assert.isAbove(
  document.querySelectorAll('#welcome-section h1').length,
  0,
  'Welcome section should contain an h1 element '
);

Non dovrebbe esserci alcun elemento h1 dentro l'elemento #welcome-section.

assert.isAbove(
  document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
  0,
  'h1 element in welcome section should contain your name or camper ' +
    'name '
);

Dovresti avere una sezione "Progetti" con un id di projects.

const el = document.getElementById('projects')
assert(!!el);

Il portfolio dovrebbe contenere almeno un elemento con una classe di project-tile.

assert.isAbove(
  document.querySelectorAll('#projects .project-tile').length,
  0
);

L'elemento #projects dovrebbe contenere almeno un elemento a.

assert.isAbove(document.querySelectorAll('#projects a').length, 0);

Il portfolio dovrebbe avere una barra di navigazione con un attributo id di navbar.

const el = document.getElementById('navbar');
assert(!!el);

L'elemento #navbar dovrebbe contenere almeno un elemento a il cui attributo href inizia con #.

const links = [...document.querySelectorAll('#navbar a')].filter(
  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
);

assert.isAbove(
  links.length,
  0,
  'Navbar should contain an anchor link '
);

Il portfolio dovrebbe avere almeno un elemento a con un attributo id di profile-link.

const el = document.getElementById('profile-link');
assert(!!el && el.tagName === 'A')

L'elemento #profile-link dovrebbe avere un attributo target di _blank.

const el = document.getElementById('profile-link');
assert(!!el && el.target === '_blank')

Il portfolio dovrebbe usare almeno una media query.

const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);

L'elemento #navbar dovrebbe sempre essere in cima al viewport.

(async () => {
  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

  const navbar = document.getElementById('navbar');
  assert.approximately(
    navbar?.getBoundingClientRect().top,
    0,
    15,
    "Navbar's parent should be body and it should be at the top of " +
    'the viewport '
  );

  window.scroll(0, 500);

  await timeout(1);

  assert.approximately(
    navbar?.getBoundingClientRect().top,
    0,
    15,
    'Navbar should be at the top of the viewport even after ' +
    'scrolling '
  );
  window.scroll(0, 0);
})();

--seed--

--seed-contents--

--solutions--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Personal Portfolio</title>
</head>
<body>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<!--Font Reference-->
<nav id="navbar">
  <a href="#projects">Projects</a> |
  <a href="#contact">Contact me</a>
</nav>
<main>
  <section id="welcome-section">
    <br>
    <h1>It's me!</h1>
    <img src="https://s.cdpn.io/profiles/user/4369153/512.jpg?1587151780" height=100px>
    <h2>Naomi Carrigan</h2>
    <p>Welcome to my portfolio page!</p>
  </section><hr>
  <section id="projects">
    <h1>Projects</h1>
    <h2><a href="https://codepen.io/nhcarrigan">Here's what I've worked on!</a></h2>
    <p class="project-tile">
<iframe height="265" style="width: 25;" scrolling="no" title="Algebraic Concepts" src="https://codepen.io/nhcarrigan/embed/preview/NWGrWBR?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/nhcarrigan/pen/NWGrWBR'>Algebraic Concepts</a> by Naomi Carrigan
  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<iframe height="265" style="width: 25;" scrolling="no" title="Pokemon Daycare Service" src="https://codepen.io/nhcarrigan/embed/preview/mdeEbeq?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/nhcarrigan/pen/mdeEbeq'>Pokemon Daycare Service</a> by Naomi Carrigan
  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<iframe height="265" style="width: 25;" scrolling="no" title="Togepi Fan Club" src="https://codepen.io/nhcarrigan/embed/preview/vYNGoBE?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/nhcarrigan/pen/vYNGoBE'>Togepi Fan Club</a> by Naomi Carrigan
  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<iframe height="265" style="width: 25;" scrolling="no" title="Togepi" src="https://codepen.io/nhcarrigan/embed/preview/yLYOWEN?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  See the Pen <a href='https://codepen.io/nhcarrigan/pen/yLYOWEN'>Togepi</a> by Naomi Carrigan
  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
    </p></section><hr>
  <section id="contact">
    <h1>Contact me!</h1>
    <h2>Use the links below to get in touch.</h2>
    <p><a href="https://www.freecodecamp.org/nhcarrigan" id="profile-link" target="_blank" rel="noopener noreferrer">FreeCodeCamp.org</a> | <a href="https://github.com/nhcarrigan" id="github-link" target="_blank" rel="noopener noreferrer">GitHub</a> | <a href="https://www.facebook.com/nhcarrigan" id="facebook-link" target="_blank" rel="noopener noreferrer">Facebook</a> | <a href="https://www.linkedin.com/in/Naomi-l-carrigan/" id="linkedin-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
  </section>
<footer><a href="../">Return to Project List</a> | <a href="https://www.nhcarrigan.com">Return to HomePage</a></footer>
</body>
</html>

nav{
  position: fixed;
  width: 100%;
  text-align: right;
  font-size: 24pt;
  top: 0%;
  right: 5px;
  background-color: #000000;
  color: #ffffff;
}
@media (max-width: 500px){
  nav{
    display: none;
  }
}
a{
  color: #ffffff;
}
main{
  text-align: center;
  background-color: black;
  font-family:Pacifico
}
h1{
  font-size: 48pt;
}
h2{
  font-size: 24pt;
}
p{
  font-size: 12pt;
}
#welcome-section{
  background-color:#251a4a;
  color: #FFFFFF;
  display: table-cell;
  vertical-align: middle;
  width: 100vw;
  height: 100vh;
}
#projects{
  background-color: #060a9c;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
  width: 100vw;
  height: 100vh;
}
#contact{
  background-color: #03300b;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
  width: 100vw;
  height: 100vh;
}

8.9 KiB Raw Blame History