I was just trying to mock up some stuff with your code but the actual code might work better.
Matt Richards
@mattjrichards
It works in Codepen, but when I copy and paste the code from Codepen into Atom it doesn't work right. Although, in Codepen I don't have those Bootstrap links in the head. I'll copy and paste exactly what I have in Atom into Codepen. Gimmee a minute.
Lily Romano
@Lilyheart
coolie. then i’ll steal the code and make it local. easy code transferrance xD
I've used live reload once or twice but not in depth, I'm reading through the convo at the moment
Matt Richards
@mattjrichards
It's doing the same thing in Codepen. I think it may be the Bootstrap links.
Lily Romano
@Lilyheart
got i think, not tested.
in your code, move your stylesheet link to main.css to after bootstrap
you are loading bootstrap after and it’s overwriting.
David Castner
@davidjcastner
^ correct
Lily Romano
@Lilyheart
David Castner
@davidjcastner
lol I was about to screenshot that
Lily Romano
@Lilyheart
If you inspect the element you can see the load order. i changed the color to white xD you can see the white crossed out and bootstrap above it.
Matt Richards
@mattjrichards
Yes!!! You are so awesome!
Lily Romano
@Lilyheart
this is chrome
we try xD
when i’m awake tomorrow i can tell you how to load bootstrap onto codepen unless David wants to take over xD. Typing in bed in awkward lol
Matt Richards
@mattjrichards
@Lilyheart Thank you. Awesome. You'll have to show me how you did that.
ok. don't want to keep u
Lily Romano
@Lilyheart
right click the part misbehaving and select inspect
David Castner
@davidjcastner
css that is declared is after other css takes priority provided the selectors are the same. for example:
h1{
color: green;
}h1{
color: red;
}
in this example h1 will take the color red. Because you loaded Bootstraps css after your css, the bootstrap took priority
Matt Richards
@mattjrichards
So it matters in what order you put stuff in your html
_
David Castner
@davidjcastner
correct, especially loading other sources like css and javascript
Matt Richards
@mattjrichards
See, I learned this stuff but I forgot. So much info to take in! Thanks @davidjcastner
David Castner
@davidjcastner
That's why javascript files are put at the bottom of the body tag; lots of javascript depends on elements already being part of the DOM to function properly. Otherwise the script will look at the DOM and not find the element.
@kilocycle I recommend looking at a short tutorial about the chrome debugger tool, it will help you greatly. I believe freeCodeCamp has one.
But you can always loo for a video which might give you a better idea of how to use it
Matt Richards
@mattjrichards
ah ha, i see. I'm so happy right now. I love it when stuff works.
Ok. I'll check it out.
Lily Romano
@Lilyheart
i do a little dance when things start workin
David Castner
@davidjcastner
Yes there is a section on freeCodeCamp called chrome developer tools (you can find it in the map), I would recommend going and doing as much of that, don;t worry that you're not doing challenges in order
feel free to tag me if you have any other questions, I'll probably be up for a little
Matt Richards
@mattjrichards
@Lilyheart@davidjcastner Thanks again. I'm going to get back to learning this stuff. I'm usually up pretty late at night into the morning.
David Castner
@davidjcastner
no problem that's what we're here for! oh btw for code pen, codepen takes all the html in the editor and inserts it into the body tag, so there is no need to add the doctype, html, head, or body tags. If you need to insert stuff into the head tag or want to add things like bootstrap, you add them in the settings. See screenshots below
Matt Richards
@mattjrichards
sweet. i knew about the head tags, but i wasn't sure about the other tags. thanks bud.