These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Aug 2018
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:07
Anybody on?
Christopher McCormack
@cmccormack
Aug 28 2018 02:11
Just us and the chickens
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:17
not the sheep?
lol
Christopher McCormack
@cmccormack
Aug 28 2018 02:18
I don't know anything about sheep haha
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:18
It's ok I had a question but I solved it now. lol. thanks tho. :)
Christopher McCormack
@cmccormack
Aug 28 2018 02:18
glad you got it
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:18
Bahhh...
:P
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:24
Ok - here's something... I've set my fonts to 1em... but in a textarea it is smaller, if i enlarge the textarea font specifically, it does enlarge, so the class name is correct. IS this normal!?
It looks as though the same happened on the example, and that they left it that way
Christopher McCormack
@cmccormack
Aug 28 2018 02:37
Which example? which classname are you referring to?
AJ Brommy
@AJ-Brommy
Aug 28 2018 02:57
Sorry its the survey form.
they don't actually define any font-sizes apart from the heading
Christopher McCormack
@cmccormack
Aug 28 2018 03:08
@AJ-Brommy from what I see the textarea in the example uses the user agent built-in style which sets the font size to 11px
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 28 2018 05:29
guys, I'm working on portfolio and fixed navbar is causing issues for me. When I click on the "Projects" from navbar, some of the content is is not visible. Can someone please check and help me out.
https://codepen.io/reddy-bharathkumar/pen/VGjeZg?editors=1100
Michael Cordero
@CyberPutty
Aug 28 2018 09:43
@reddy-bharathkumar what i did was created an extra div before each section with the offset needed to make it right.

@reddy-bharathkumar

.offset { 
    display: block; 
     content: " "; 
      height: 75px;      /* Give height of your fixed element */
        margin-top: -75px; /* Give negative margin of your fixed element */      
        background-color:red;
        visibility: hidden;
}

this is an example of what i did before each one of my sections. hope that helps

Marco Ramos
@TheMarco77
Aug 28 2018 12:25
Hello everyone! Anyone else having issues with the CDN link form FCC to check the rules of the projects?
please let me know! It's been weeks for me.
Fabusuyi David Oluwasegun
@dav4thevid
Aug 28 2018 14:00

hi guys.....please i need help....im currently stuck with #CSS Grid: Use Media Queries to Create Responsive Layouts...i really dont understand why my code ' @media (min-width: 400px){
.container{
/ change the code below this line /
grid-template-columns: auto 1fr;
grid-template-rows: auto ;
grid-template-areas:
"header header "
"advert content"
"footer footer"

/* change the code above this line */
}

}
</style>'

his not working
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 28 2018 14:04
@dav4thevid you don't need '''grid-template-columns: auto 1fr;
grid-template-rows: auto ;'''
remove those two lines
abraham anak agung
@padunk
Aug 28 2018 14:05
@TheMarco77 what is your issues?
Fabusuyi David Oluwasegun
@dav4thevid
Aug 28 2018 14:07

@reddy-bharathkumar i just removed them, its still not working
@media (min-width: 400px){
.container{
/ change the code below this line /

  grid-template-areas:
    "header header "
    "advert content" 
    "footer footer "



/* change the code above this line */
}

}
</style>

Marco Ramos
@TheMarco77
Aug 28 2018 14:07
@padunk does not show up at all!
abraham anak agung
@padunk
Aug 28 2018 14:08
@TheMarco77 you working with codepen or local?
Marco Ramos
@TheMarco77
Aug 28 2018 14:09
local and using github
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 28 2018 14:09
refresh the page and try again
abraham anak agung
@padunk
Aug 28 2018 14:10
@TheMarco77 put it on your script tag like <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Marco Ramos
@TheMarco77
Aug 28 2018 14:13
image.png
abraham anak agung
@padunk
Aug 28 2018 14:19
@TheMarco77 mine is working fine, idk what is the error. sorry. btw why you put your body inside div?
Marco Ramos
@TheMarco77
Aug 28 2018 14:55
@padunk it's a CSS grid that is pointing to.
@padunk are you using the same cdn?
abraham anak agung
@padunk
Aug 28 2018 15:01
@TheMarco77 yes, but it just weird you have div outside body. Why don't try to put your wrapper inside body?
Or try delete all html and css. It might show up.
Marco Ramos
@TheMarco77
Aug 28 2018 15:27
@padunk going to try it. I will tell you the end result
mustimuu
@mustimuu
Aug 28 2018 16:43
Hello guys can someome help me out ?
<div class="container"> 
<h2 class="centerh2"> Som revisor kan du kontakte os her</h2> 
<div class="row"> 
<div class="col-lg-6">
<li class="none-list">LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
<br>
 </div>

<div class="col-lg-6"> 
<input type="text" placeholder="Firmanavn*" class="av-text"> 
</div> 
</div>
<div class="row"> 
<div class="col-lg-6">
<li class="none-list">LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
<br>
 </div>

<div class="col-lg-6"> 
<input type="text" placeholder="Kontaktperson*" class="av-text"> 
</div> 
</div>
<div class="row"> 
<div class="col-lg-6">
<li class="none-list">LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
<br>
 </div>

<div class="col-lg-6"> 
<p>
    <input type="submit" value="Kontakt IEX for nærmere snak" id="knap">
</p>
</div> 
</div>
<div class="row"> 


<div class="col-lg-6"> 

</div> 
</div>



</div>
I want my text to go vertical when i wrote more lorem ipsum text in, but somehow it just runs horizontical
Christopher McCormack
@cmccormack
Aug 28 2018 16:47
@mustimuu are you writing it with Javascript?
mustimuu
@mustimuu
Aug 28 2018 16:47
html
Christopher McCormack
@cmccormack
Aug 28 2018 16:47
Can you not just add newlines where needed?
Did you paste this in from somwhere?
mustimuu
@mustimuu
Aug 28 2018 16:48
breakpoint?
Christopher McCormack
@cmccormack
Aug 28 2018 16:48
And is it not wrapping in its container?
mustimuu
@mustimuu
Aug 28 2018 16:49
It has a row
Marco Ramos
@TheMarco77
Aug 28 2018 17:03
Can somone assist me please, why I have a space that extends the bottom of the page of the project I am working on FCC. What can be causing tha?

<!DOCTYPE html>

<html>
<head>
<title>Vermon Seasonal Wine Kit</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="index.css"/>
<link href="https://fonts.googleapis.com/css?family=Modern+Antiqua" rel="stylesheet">
<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</head>

<body>
<div class="wrapper">
<header id="header">
<img src="img/HeaderImgProject3.jpg" alt="headerImageLogo" id="header-img"/>
<nav id="nav-bar">
<ul>
<li><a href="#about" class="nav-link">About Us</a></li>
<li><a href="#buy" class="nav-link">Buy our Product </a></li>
<li><a href="#mission" class="nav-link">Our Mission</a></li>
</ul>
</nav>
</header>

<div id="about"></div>
<div id="buy"></div>
<div id="mission"></div>

<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gOMOOZ0KEsk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<img src="img/vermonSeasonalCaseOpen.jpg" id="product-img">

<form id="form" action="https://www.freecodecamp.com/email-submit)">
<input type="email" id="email" placeholder="email" target="_blank" name="email" required>
<input type="submit" type="submit" value="send" id="submit">
</form>
</div>
</body>

</html>

CSS:

body {
background-color: #F8F8FF;
font-family: 'Modern Antiqua', cursive;
padding-bottom: 0%;
}

.wrapper {
display: grid;
grid-template-rows: 1fr;
}

header {
width: 100%;
height: 100%;
}

header-img {

width: 100%;
height: 100%;

}

nav-bar {

position: fixed;
display: flex;
list-style: none;
top: 0px;
width: 100%;

}

video {

position: relative;
height: 100%;

}

about {

background-color: green;
/*background-color above is just a place holder*/

}

buy {

background-color: yellow;
/*background-color above is just a place holder*/

}

mission {

background-color: green;
/*background-color above is just a place holder*/

}

video {

position: static;
width: 100%;

}

product-img {

width: 100%;
height: 100%;
align-items: center;

}

form {

padding-bottom: 0%;

}

@media only screen and (max-width: 600px) {
body {
background-color: #F8F8FF;
}
}

if there is a better way to share this I can do it as well
Christopher McCormack
@cmccormack
Aug 28 2018 17:04
@TheMarco77 please don't paste all your code here - instead you can put it in a codepen.io pen or similar site
Marco Ramos
@TheMarco77
Aug 28 2018 17:04
I can provide my git
Christopher McCormack
@cmccormack
Aug 28 2018 17:05
When you do paste code please wrap in three backticks, on their own line, like so:
```
Code
```
Marco Ramos
@TheMarco77
Aug 28 2018 17:05
@cmccormack I don't use code pen
got you
Christopher McCormack
@cmccormack
Aug 28 2018 17:05
it's free, and there are several other free tools to paste your code if you would like assistance
Marco Ramos
@TheMarco77
Aug 28 2018 17:06
`test1
test
got it brb
going to give it a got with my html

```<!DOCTYPE html>

<html>
<head>
<title>Vermon Seasonal Wine Kit</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="index.css"/>
<link href="https://fonts.googleapis.com/css?family=Modern+Antiqua" rel="stylesheet">
<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</head>

<body>
<div class="wrapper">
<header id="header">
<img src="img/HeaderImgProject3.jpg" alt="headerImageLogo" id="header-img"/>
<nav id="nav-bar">
<ul>
<li><a href="#about" class="nav-link">About Us</a></li>
<li><a href="#buy" class="nav-link">Buy our Product </a></li>
<li><a href="#mission" class="nav-link">Our Mission</a></li>
</ul>
</nav>
</header>

<div id="about"></div>
<div id="buy"></div>
<div id="mission"></div>

<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gOMOOZ0KEsk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<img src="img/vermonSeasonalCaseOpen.jpg" id="product-img">

<form id="form" action="https://www.freecodecamp.com/email-submit)">
<input type="email" id="email" placeholder="email" target="_blank" name="email" required>
<input type="submit" type="submit" value="send" id="submit">
</form>
</div>
</body>

</html>```

sorry dude
Christopher McCormack
@cmccormack
Aug 28 2018 17:07
You can also edit previous posts
Marco Ramos
@TheMarco77
Aug 28 2018 17:07
it's code
Christopher McCormack
@cmccormack
Aug 28 2018 17:07
three backticks
not one
on their own line
just like my example
Marco Ramos
@TheMarco77
Aug 28 2018 17:07
got it let me try it again
    <div class="wrapper">
    <header id="header">
    <img src="img/HeaderImgProject3.jpg" alt="headerImageLogo" id="header-img"/>
        <nav id="nav-bar">
            <ul>
                <li><a href="#about" class="nav-link">About Us</a></li>
                <li><a href="#buy" class="nav-link">Buy our Product </a></li>
                <li><a href="#mission" class="nav-link">Our Mission</a></li>
            </ul>
        </nav>
    </header>
got it
going for it again lol
NikolaNbgd
@NikolaNbgd
Aug 28 2018 17:09
Hi guys. I need help about slider countdown circle animation. So I have slider and I have to create countdown circle animation, the bold line has to fills out the circle when the time is up and in the center of circle is number of slide. Does anyone know where I can find some examples?
Marco Ramos
@TheMarco77
Aug 28 2018 17:09

HTML ```<!DOCTYPE html>

<html>
<head>
<title>Vermon Seasonal Wine Kit</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="index.css"/>
<link href="https://fonts.googleapis.com/css?family=Modern+Antiqua" rel="stylesheet">
<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

</head>

<body>
<div class="wrapper">
<header id="header">
<img src="img/HeaderImgProject3.jpg" alt="headerImageLogo" id="header-img"/>
<nav id="nav-bar">
<ul>
<li><a href="#about" class="nav-link">About Us</a></li>
<li><a href="#buy" class="nav-link">Buy our Product </a></li>
<li><a href="#mission" class="nav-link">Our Mission</a></li>
</ul>
</nav>
</header>

<div id="about"></div>
<div id="buy"></div>
<div id="mission"></div>

<div id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gOMOOZ0KEsk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<img src="img/vermonSeasonalCaseOpen.jpg" id="product-img">

<form id="form" action="https://www.freecodecamp.com/email-submit)">
<input type="email" id="email" placeholder="email" target="_blank" name="email" required>
<input type="submit" type="submit" value="send" id="submit">
</form>
</div>
</body>

</html>
```

Christopher McCormack
@cmccormack
Aug 28 2018 17:09
I don't think you should be pasting walls of text though, it might violate the rules
NikolaNbgd
@NikolaNbgd
Aug 28 2018 17:09
Hi guys. I need help about slider countdown circle animation. So I have slider and I have to create countdown circle animation, the bold line has to fills out the circle when the time is up and in the center of circle is number of slide. Does anyone know where I can find some examples?
Marco Ramos
@TheMarco77
Aug 28 2018 17:09
yeah it's not working
@cmccormack how can i share this?
Christopher McCormack
@cmccormack
Aug 28 2018 17:10
codepen.io is a start
Marco Ramos
@TheMarco77
Aug 28 2018 17:10
I don't use codepen, I use github
do you use github?
Brad
@bradtaniguchi
Aug 28 2018 17:16
@TheMarco77 codepen is easier than github for short code snippets, just copy paste and share it
Marco Ramos
@TheMarco77
Aug 28 2018 17:23
It may be esier but most employeers want you to understand GIT so from experienced dev's I know have sugested for me to use it
I can commit and share the link with the files (HTML & CSS)
going to do that and see if somone can help me out
Brad
@bradtaniguchi
Aug 28 2018 17:25
You can use both, but for getting help on CSS related issues, jsbin/codepen/etc are better since they are faster/easier and simpler to use. Git is overkill to get a live demo going. (edit, not pastebin, I ment jsbin :D)
Marco Ramos
@TheMarco77
Aug 28 2018 17:28
@bradtaniguchi also something to keep in mind, recruiters from my experience in conversations with dev’s they ask for your github handle. It is considered the social network of developers
Brad
@bradtaniguchi
Aug 28 2018 17:29
@TheMarco77 I know.... I'm fine with you using git, but to share code snippets don't use git. It's not the only tool, and it isn't the right tool for this instance either
Marco Ramos
@TheMarco77
Aug 28 2018 17:29
what id I share the link to the page of the code for instance the HTML link and CSS
does that work?
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 28 2018 17:34
@TheMarco77 bro he is trying to explain that its easier for small code examples because it will render them for you and allow real time editing. when you share your git file it means we all have to do this process:
1) download your file
2) run your file on our local work environment
And unfortunately if you wanted help, no one is going to spend extra time on your behalf unless you get lucky and someone is being super nice.
Marco Ramos
@TheMarco77
Aug 28 2018 17:35
@willybeans got it
mustimuu
@mustimuu
Aug 28 2018 17:39
Can someone help me ?
Michael Cordero
@CyberPutty
Aug 28 2018 17:39
@mustimuu sure
mustimuu
@mustimuu
Aug 28 2018 17:39
@CyberPutty thanks
I want to build this layout with bootstrap. I tried so many times and i tried again and again and my brain is going to die soon.
kontakt.png
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 28 2018 17:40
whats your html m8?
mustimuu
@mustimuu
Aug 28 2018 17:40
Ignorere the before element
i will send my html
but ofc i deleted it
hang on
<div class="container"> 


<div class="row"> 
<div class="col-lg-6"> 
<li class="none-list">Scanner alle bilag uanset om det er kvitteringer eller indkøbsfakturaerScanner alle bilag uanset om det er kvitteringer eller </li>
</div>

<div class="row"> 
<div class="col-lg-6"> 
[text* your-name class:margin "Firmnavn"] 
<br>
[text* your-name class:margin "Kontakt person"]
[submit id:kontaktiex "Kontakt IEX for nærmere snak"]
<p class="font22"> lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>

</div>
Here is my html
@willybeans here you go
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 28 2018 17:43
@mustimuu first off you should use the bootstrap form
mustimuu
@mustimuu
Aug 28 2018 17:43
it is contact formular from wordpress
contact form 7
has to use that
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 28 2018 17:43
@mustimuu you just said you are building this with bootstrap?
mustimuu
@mustimuu
Aug 28 2018 17:44
yes
i mean in wordpress
which has bootstrap
Michael Cordero
@CyberPutty
Aug 28 2018 17:49
@mustimuu i haven't used bootstrap in a while but you should not have 2 rows you should have 2 col-lg-6 in 1 row
@mustimuu
<div class="container">
 <div class="row">
  <div class="col-lg-6"> 
    <li class="none-list">Scanner alle bilag uanset om det er kvitteringer eller indkøbsfakturaerScanner alle bilag uanset om det er kvitteringer eller </li>
   </div>
   <div class="col-lg-6"> 
[text* your-name class:margin "Firmnavn"] 
<br> [text* your-name class:margin "Kontakt person"] 
[submit id:kontaktiex "Kontakt IEX for nærmere snak"] 
<p class="font22"> lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> 
 </div>
   </div>
  </div>
mustimuu
@mustimuu
Aug 28 2018 17:50
Yes
but if i want to of them same again
i will need a row?
Michael Cordero
@CyberPutty
Aug 28 2018 17:54
@mustimuu I'm not sure what you mean?
newmoon
@newmoon
Aug 28 2018 18:13
@mustimuu That design involves nesting rows inside of columns. So, inside each of your col-lg-6 divs, you would have a new row and new columns with a check mark in one and text in the other.
The main right col-lg-6 with the inputs controls would use the form-group class and each input would be in its own row.
mustimuu
@mustimuu
Aug 28 2018 20:43
True
Thank you very much
mustimuu
@mustimuu
Aug 28 2018 21:14
can someone help me?
newmoon
@newmoon
Aug 28 2018 21:28
@mustimuu What can we help with?
mustimuu
@mustimuu
Aug 28 2018 21:28
@newmoon Hello
newmoon
@newmoon
Aug 28 2018 21:28
:wave:
Hello
mustimuu
@mustimuu
Aug 28 2018 21:29
Hang on sir
AJ Brommy
@AJ-Brommy
Aug 28 2018 22:00
Hanging on for dear life... :P
@mustimuu I love the lion king!!! :D
apparently disney making a new one, live action or whatever they call it :/
I've reached the project for a product landing page but i can't even make a decision on a product lol
mustimuu
@mustimuu
Aug 28 2018 22:03
@AJ-Brommy m2 :D
lol
AJ Brommy
@AJ-Brommy
Aug 28 2018 22:10
:D
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:53
@AJ-Brommy, hey there. :) What's up? Where you at in fCC Projects? D:
AJ Brommy
@AJ-Brommy
Aug 28 2018 22:54
Landing Page
How's it going?
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:54
Fine. I'm developing my Portfolio locally. Then I'll upload it on Github, to use Github Pages feature. :P
AJ Brommy
@AJ-Brommy
Aug 28 2018 22:55
Ah right.. I still don't really know much about Github, I'm guessing FCC will teach us more as we go?
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:55
I suppose, I can submit a Github link to fCC instead of a codepen one, to avoid copying all code to Codepen.
Ah, I don't think there are lessons about Github. But there is a bunch out there about Git and Github.
Brad
@bradtaniguchi
Aug 28 2018 22:56
github pages for your porfolio is always a good move :D
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:57
Yup. :D
AJ Brommy
@AJ-Brommy
Aug 28 2018 22:57
ah damn, i'm sure they use to. When I first joined here it was the first thing they got us to do.. sign up to github!
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:57
lol.
Aditya
@ezioda004
Aug 28 2018 22:57
An active GitHub profile is always nice to have :D
Morchid Chellali
@Morched23MJ
Aug 28 2018 22:59
Yup. By the way, @ezioda004 can I know how you got your portfolio link like that?
Without that /Portfolio[OR REPO NAME HERE]/
at the end?
Brad
@bradtaniguchi
Aug 28 2018 23:02
@Morched23MJ I think its because his portfolio is a repo at ezioda004.github.io, which is "special", instead of the name of the repo
Aditya
@ezioda004
Aug 28 2018 23:03
@Morched23MJ You just need to make a repo with <your-github-name>.github.io and just main HTML in index.html file and it should work.
Yeah, GitHub looks for those repos specifically so they're like "special", after that you can access any repo live with /repo-name as long as they also have index.html file
Morchid Chellali
@Morched23MJ
Aug 28 2018 23:08
I could not go around it on Settings - Github Pages.
Here is my repo link: https://github.com/Morched23MJ/Portfolio
How to modify it so that I make the link as wanted? :l
Aditya
@ezioda004
Aug 28 2018 23:10
I'm not sure if you can modify the repo name, if not then make a new repo with <your-github-name>.github.io format.
Morchid Chellali
@Morched23MJ
Aug 28 2018 23:11
<your-github-name>.github.io as a repo name, right?
Aditya
@ezioda004
Aug 28 2018 23:12
In your case Morched23MJ.github.io
Morchid Chellali
@Morched23MJ
Aug 28 2018 23:13
Alright. Thank you @ezioda004
Aditya
@ezioda004
Aug 28 2018 23:13
:thumbsup: