Besides, i don’t like that website, it’s kinda difficult to understand!!!
You need to know about VCS if you’re gonna to develop stuff
What do you mean by VCS ???
version control system
Most popular one is git.
Google it.
Lol i’ve known github for about 2 years now but why do i need it that’s my question??
I’ve already answered, didn’t I?
I really don’t understand you…If you gonna use something, i should know why i need it…
I can just copy-paste here bunch of stuff from Google about VCS. But I don’t think its necessary. Consider to do some research.
VCS allows you to manage your project’s production properly.
When bunch of people work on complex stuff, without VCS it will be a huge mess.
1 Like
Okay i’ll do some research & see to that…Thank you for the information shared!!!
I need help on making my nav bar be at the right top of my view port…I’ve been stucked with it for days & i’ve tried everything but all to no avail…How do i place my nav bar at the right top of my view port… Where i highlighted is exactly where i want it to be…
Here’s my code in CSS Below…
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana;
background-color: #f0ebe3
}
#header {
position: fixed;
top: 0;
display: flex;
width: 100%;
height: 80px;
padding: 1rem 1rem;
justify-content: space-between;
background-color: inherit;
}
nav {
text-align: right;
flex: 1;
}
#nav-bar {
text-align: center;
max-width: 1500px;
display: inline-block;
margin-left: 100px;
align-items: right;
}
.nav-link {
font-size: 1.2rem;
text-decoration: none;
color: black;
display: flex;
align-items: center;
padding: 10px;
}
#header-img {
filter: grayscale(100%);
width: 100%;
height: 100%;
}
#hero {
margin: 10rem auto 4rem;
text-align: center;
width: 90vw;
display: flex;
flex-direction: column;
}
#nav-bar ul {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
#nav-bar ul li {
display: inline-block;
margin-right: 50px;
text-align: center;
align-items: right;
}
.container {
margin: auto;
max-width: 1000px;
padding-left: 100px;
}
a {
text-decoration: none;
}
Hi, it’s kinda hard to tell what’s up without seeing HTML structure.
@admit8490 Hold on a sec i’ll send it to you now…Here’s it in HTML structure…
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/fa4d84cc52.js" crossorigin="anonymous"></script>
<header id="header">
<div id="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo">
<div class="container">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a>
</li>
<li> <a class="nav-link" href= "#how_it_works">How it works</a></li>
<li>
<a class="nav-link" href= "#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="Enter your email" required />
<input id="submit" type="submit" value="GET STARTED">
</form>
</section>
<main>
<section id="features">
<div class="grid">
<div class="features">
<div class="icon"><i class="fa-solid fa-spa"></i>
</div>
<div class="description">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="description">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon">
<i class="fa-solid fa-square-check"></i>
</div>
<div class="description">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</section>
<section id="how_it_works">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"
frameborder="0"
allowfullscreen></iframe>
<section id="pricing">
<div class="product"><br>
<div class="product-name">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select</button>
</div>
<br>
<div class="product">
<div class="product-name">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select
</button>
</div><br>
<div class="product">
<div class="product-name">VALVE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select</button>
</div>
</section>
First, I don’t get it:
where is closing tag for this container? It’s somewhere below?
Also, try to double check your code here, can be useful:
@admit8490 I added a closing tag to it just now & nothing changes still…I’m really getting frustrated on this because i’ve been stucked on it for days…
How do i use the validator please…
So, your nav-bar has this styling:
And navbar is the child of .container which has this styling:
So you are using align-items prop for your nav-bar, but why?
Is this flexbox? nope
Is this Grid? also nope
same story about flex prop
Throw your code there, in the white textarea and press the CHECK button. I actually did not use it for CSS yet, only checking HTML there for now)
@admit8490 I used the align-item property to see if it will align my nav-bar to the right but it didn’t…What should i have used then??
Did you try position?
I did again no changes…There’s a mix up somewhere, i’m really frustrated on this…