So, I’m doing the HTML CSS course and I found that when using the same code in visualcode, and opening my file index.html (with alogside the styles.css in the same folder) it doesn’t match, it looks different and items, divs and such are differently placed.
See the screenshots please, and let me know if it’s needed to share the code:
Left codeCamp preview, right Chrome index.html file.
Thanks in advance!
if it looks different, then you may not have copied all the code correctly.
I suggest posting the code you are using and where you got it from (a link to where you got it from)
Oh wish it was that but don’t, copy and pasted like 10 times now, it isn’t a copy mistake.
This is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<title>Portfolio</title>
</head>
<body>
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="#welcome-section">Acerca de mi</a>
</li>
<li>
<a href="#projects">Trabajos</a>
</li>
<li>
<a href="#contact">Contacto</a>
</li>
</ul>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Hola, soy Pepe</h1>
<p>diseñador web</p>
<p class="parrafo">I'm learning to code CSS at slow pace, because this is the way, I've done some work already, check my work below...</p>
</section>
<section id="projects" class="projects-section">
<h2 class="header-section-project">Algunos de mis trabajos</h2>
<div class="projects-grid">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">
<p class="project-title">
Tributo
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">
<p class="project-title">
Maquina de Citas
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project">
<p class="project-title">
Calculadora Javascript
</p>
</a>
<a href="https://codepen.io/FreeCodeCamp/" class="btn btn-show-all" target="_blank">Show all<i class="fas fa-chevron-right"></i></a>
</section>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2 class="reachout">Let's work together...</h2>
<p class="coffee">How do you take your coffee?</p>
</div>
<div class="contact-links">
<a href="https://www.linkedin.com/school/free-code-camp/" target="_blank" class="btn contact-details"><i class="fab fa-linkedin"></i> LinkedIn</a>
<a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
<a href="https://x.com/Ps4proPics" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
<a href="https://www.gmail.com" class="btn contact-details"><i class="fas fa-at"></i> enviame un e-mail</a>
<a href="tel:11-623400334566778" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Llamame</a>
</div>
</section>
</div>
<footer>
<p class="footer-p">
**este portfolio es falso y solo sirve de proposito para pasar una certificación en freeCodeCamp.
</p>
<p>© Creado para freeCodeCamp<i class="fab fa-free-code-camp"></i></a>
</p>
</footer>
</body>
</html>
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
:root {
--prin-blanco:#f0f0f0;
--prin-rojo:#c10a10;
--prin-azul:#253147;
--prin-gris:#363852;
}
html {
display:block;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: Sans-serif;
font-weight:600;
}
#navbar {display:flex;}
.nav {
display:flex;
position:fixed;
justify-content:center;
width:100%;
background: var(--prin-rojo);
box-shadow: 0 2.3px 0 black;
text-shadow: -2px 2px 1px black;
z-index:1;
}
.nav-list {
display: flex;
margin-right: 2rem;
justify-content: space-around;
white-space: nowrap;
}
.nav-list li a {
padding: 10px 20px;
}
ul {list-style:none;
margin-block-start: 1em;
margin-block-end: 1em;
}
a { text-decoration:none;
color: var(--prin-blanco);}
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: auto;
height: 100%;
background-image: linear-gradient(21deg,#919294 0%, black 100%);
text-shadow:-2px 2px 2px black;
}
h1{
font-family: sans-serif;
font-weight: 600;
text-align: center;
font-size: 5rem;
color: var(--prin-blanco);
}
.reachout {padding-top: 30px; font-size:5rem; color: var(--prin-gris);text-shadow:-2px 2px 2px black; text-align:center; }
.header-section-project {padding-bottom: 130px; font-size:3.5rem; color: white;text-shadow:-2px 2px 2px black; text-align:center; opacity:80%;}
.welcome-section > p {
font-size: 3rem;
font-weight:100;
font-style: italic;
color: var(--prin-rojo);
font-family: courier;
}
p.parrafo {font-size:1.5rem; text-align:center; color:#b5b5b5; max-width:75%; }
#welcome-section p:first-of-type {white-space: nowrap;}
#welcome-section h1 {display:flex; font-size:4rem}
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--prin-azul);
width:100%;
position: relative;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
animation: slide 50s infinite;
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
padding:20px;
}
.project:hover {
transform: scale(1.50);
}
.project {
flex: 0 0 33.333%;
transition: transform 1.5s;
}
.project-title {font-family:courier; }
.btn.btn-show-all {
font-size: 1rem;
background: var(--prin-gris);
transition: background 0.3s ease-out;
display: inline-block;
padding: 10px;
border-radius: 2px;
position: absolute;
top:100%;
left:860px;
}
.welcome-section:hover {transform: scale(1.05); transition: transform 1.5s}
@keyframes slide {
0% {
transform: rotateY(0deg);
}
25% {
background-color: var(--prin-azul);
}
50% {
background-color: var(--prin-gris);
}
75% {
background-color:var(--prin-azul);
}
100% {
transform: rotateY(0deg);
}
}
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow-wrap: break-word;
width: 100%;
height: 100%;
padding: 0 1rem;
background: var(--prin-azul);
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: var(--prin-gris);
color: white;
padding: 10px;
}
footer p {
margin: 5px 0;
}
.btn.contact-details {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: var(--prin-rojo);
color: white;
text-align: center;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
opacity:70%;
}
.btn.contact-details:hover {
background-color: var(--prin-azul);
transform: scale(1.05);
}
.btn.contact-details:active {
background-color: var(--prin-gris);
transform: scale(0.95);
}
.coffee {padding:50px; font-size:1.5rem; font-family:courier; color:white;}
@media (max-width: 768px) {
#navbar {width: 100%;}
#welcome-section p:first-of-type {
font-size: 30px;
}
}
Sorry but don’t know what you mean where I got it from
It’s the personal portfolio webpage certification project
you forgot to post the link of where this code is from?
Sorry but don’t know what you mean where I got it from
It’s the personal portfolio webpage certification project
Do you mean this?
okay, I didn’t understand what it was you were trying to report before. I thought you were copying some fCC code from somewhere. I’ll take a look.
i do see that they’re different and I’m not going to be able to guess why but the fix is easy. Just change the #welcome-section height to 100vh instead of 100% and your vs code version will look the same as the fcc one.
Mmm yeah that did the trick (thanks!) but I think there’s some sort of bug
Look the scroll at the right of each display of the screenshot. It’s cropped at the top on the right one.
I mean, the webpage now looks good and responsive, using 100% in height seems to show a good result on the freecodecamp preview, but it’s seems it’s not accurate when using your own index.html file.
Could you clarify a bit more? I’ve taken a look at your screenshots and couldn’t see the cropped scrollbar. Keep in mind that the sizes of scrollbars change depending on the viewport dimensions. fCC’s preview is narrow, like a square, while in chrome it’s in classic desktop aspect ratio. Press that little tab button next to the preview button to move the preview to a new window and see if there’s any discrepancies there.
there must be some code applied by default in the fcc editor that is not there in VSCode, Left click in the page and inspect the page, check the CSS of the various elements and confront with the one you have in VSCode
try viewport settings if set correctly
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.