These are chat archives for FreeCodeCamp/Help

23rd
Feb 2016
kpjmmu
@kpjmmu
Feb 23 2016 00:26
Can someone look at this and tell me why it wont pass the challenge. Its the prioritize one style over another.

`<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }

  .pink-text{
    color: pink;
  }

</style>

<h1 class="pink-text">Hello World!</h1>`
Tony
@Rogers187
Feb 23 2016 00:29
Can anyone help? I want to add my tribute challenge to my portfolio under my text. But all I'm getting is a white box. http://codepen.io/Rogers187/pen/NxVEpL
xuzo
@xuzo
Feb 23 2016 00:29
Maybe because of the ` before and after
This bracket after also `
Try it without them
kpjmmu
@kpjmmu
Feb 23 2016 00:30
That was added to copy to chat
Bug273
@bug273
Feb 23 2016 00:35
Hi there,
I have this code:
$("button").addClass("animated");
$(".btn").addClass("animated shake");
$("#target1").addClass("animated shake btn-primary");
and a big red cross, and I dont know why?
xuzo
@xuzo
Feb 23 2016 00:35
Works in codepen
Bug273
@bug273
Feb 23 2016 00:36
can some one tell me whats wrong?
xuzo
@xuzo
Feb 23 2016 00:36
Maybe add a body and html tag?
Bug273
@bug273
Feb 23 2016 00:37
xuzo, this is inside a document for jquery into a script tag
xuzo
@xuzo
Feb 23 2016 00:37
sorry, that was for @kpjmmu
Bug273
@bug273
Feb 23 2016 00:38
oooh! ok! sorry :P
jquery.png
dmx
@dmaddox
Feb 23 2016 00:39
@kpjmmu - any luck yet? It looks right to me - is the demo window properly showing the text in pink as a result?
kpjmmu
@kpjmmu
Feb 23 2016 00:40
No shows green
All other checks out except doesnt show up pink
dmx
@dmaddox
Feb 23 2016 00:41
try adding a space after .pink-text and before the open bracket
not sure how strict css formatting rules are
kpjmmu
@kpjmmu
Feb 23 2016 00:44
Yea still not working. Possible bug? Had someone beside me at work try it and it worked for them and we compared code side by side and it seemed right
dmx
@dmaddox
Feb 23 2016 00:45
yeah i just passed that one yest. maybe try logging in on another browser - or just refresh your existing one
kpjmmu
@kpjmmu
Feb 23 2016 00:50
Refreshed and tried a different browser still not working
Matt Leonard
@matty22
Feb 23 2016 00:50
General question incoming
As far as TDD goes, what's the first tool I should implement? Right now, I just use a browser and SublimeText and do everything locally. I'm currently working on the last couple Front End Dev Ziplines, so I'm not sure a big complicating testing framework is necessary, but would like to start learning something?
dmx
@dmaddox
Feb 23 2016 00:54
hmm @kpjmmu - if it were me, i’d skip ahead to the next challenge (using map in nav menu) and reach out to a freecodecamp rep about it possibly being a bug.
i copy & pasted your code back on that challenge, and it passed mine, as well
so you definitely got it right
kpjmmu
@kpjmmu
Feb 23 2016 00:58
Alright thanks for the help!
max77p
@max77p
Feb 23 2016 01:05
can someone help me with this?
in mobile view i want to remove the "click to slide the panel right" on the second page
ive written a jquery if statement, but it doesn't seem to work
Jesse Goetz
@jessegoetz
Feb 23 2016 01:14

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>

<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>

<p>Top 3 things cats hate:</p>

<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

im sorry what exactly is the html isnt it all of it and why does it say each of my div elements wouldent there be just a opening and a closing?
Daniel Dut A.
@DanielDut
Feb 23 2016 01:17
@jessegoetz , please be clear what you need help on...
Jesse Goetz
@jessegoetz
Feb 23 2016 01:18
it asks me to nest all of my html in a div element with class container-fluid im sorry also i dont know how to take snaps of my screen like you guys are doing
Johnny Cornyn
@JMIHC
Feb 23 2016 01:21
help code format
CamperBot
@camperbot
Feb 23 2016 01:21

:point_right: code formatting [wiki]

Inline code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

Code Block

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Daniel Dut A.
@DanielDut
Feb 23 2016 01:23
@jessegoetz, if you picked that peace of code from your html file (sequentially), then you need to restructure it and semantically write it. I can see misplaced and missing items.
Jesse Goetz
@jessegoetz
Feb 23 2016 01:23
its a challenge on code camp
the first bootstrap challenge
mfaraya
@mfaraya
Feb 23 2016 01:24
need help here please
Jesse Goetz
@jessegoetz
Feb 23 2016 01:25
im just trying to beat the challenge it asks me to nest all the html in a div element container fluid
Johnny Cornyn
@JMIHC
Feb 23 2016 01:25
@mfaraya what's up?
Kinshuk Sen
@kinshuksen
Feb 23 2016 01:26
@jessegoetz Surround your entire code with <div> and add class container-fluid to this div
Daniel Dut A.
@DanielDut
Feb 23 2016 01:28

@jessegoetz , here is the hint:

<div class="container-fluid">
<YOUR CODE HERE>
</div>

Don Card
@dondeleoniii
Feb 23 2016 01:29
Do not use inline style declarations like style="color: red" in your h2 element.
I'm a noob and need help(:
xiajjing
@xiajjing
Feb 23 2016 01:31
Your p element should be red.
Your p element should have the class red-text.

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="your-class-here">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Daniel Dut A.
@DanielDut
Feb 23 2016 01:31
@dondeleoniii , here you are needed to define your styles in separate code chunk (in the head of the same file) or separate file (.css) and link to it
Jesse Goetz
@jessegoetz
Feb 23 2016 01:32
thanks guys i just dont understand whats its asking me sometimes i know its simple but the way it asks to me confuses me sometimes ill get it im sure thanks again
mfaraya
@mfaraya
Feb 23 2016 01:32
JMIHC thank you
how can I scale an image using smaller-mage
Daniel Dut A.
@DanielDut
Feb 23 2016 01:33
what's "smaller-mage"?
mfaraya
@mfaraya
Feb 23 2016 01:34
Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.
<img class="smaller-image"> how do I incorporate the 100 pixels?
Kinshuk Sen
@kinshuksen
Feb 23 2016 01:36
@mfaraya you will have to define a CSS style element with the name .smaller-image
and add width:100px; to it
Johnny Cornyn
@JMIHC
Feb 23 2016 01:38
^
mfaraya
@mfaraya
Feb 23 2016 01:38
ok so .smaller-image{width:100px;}
it did not resize my img though
Daniel Dut A.
@DanielDut
Feb 23 2016 01:39
.smaller-image { width: 100px; height: 100px; }
Don Card
@dondeleoniii
Feb 23 2016 01:39
thanks guys! xoxo
Jesse Goetz
@jessegoetz
Feb 23 2016 01:39
danieldut i did that i also added .container-fluid above the style what am i still doing wrong?
i mean in the style
Tony
@Rogers187
Feb 23 2016 01:40
Help
CamperBot
@camperbot
Feb 23 2016 01:40

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Patricio Yumbillo
@pyumbillo
Feb 23 2016 01:40
Specifically is a CSS rule for control the width
mfaraya
@mfaraya
Feb 23 2016 01:41
img element should have the class smaller-image and image should be 100px wide
how can I meet that criteria
Jesse Goetz
@jessegoetz
Feb 23 2016 01:41
thanks DanielDut got it
Megha Dubey
@dubeymegha
Feb 23 2016 01:44
How will we put zoom browser 100% in the image tag of CSS ?
Daniel Dut A.
@DanielDut
Feb 23 2016 01:45
@jessegoetz, when I looked at the code, many things still missing:
You need to have this kind of structure (at minimum) to have a semantic markup;
<html> <head> <title></title> <CSS + JS definitions/links HERE> </head> <body> <YOUR MAIN CONTENT HERE, e.g. what is provided to you in the challenge> </body> </html>
Patricio Yumbillo
@pyumbillo
Feb 23 2016 01:48
Exactly Dmfaraya
About @dubeymegha
CamperBot
@camperbot
Feb 23 2016 01:48
:star: 17 | @dubeymegha | http://www.freecodecamp.com/dubeymegha
Dr. Paul Kenneth Shreeman
@pkshreeman
Feb 23 2016 01:48
This works up to a point..what am I missing here? for smallest common multiple
function smallestCommons(arr) {
  var multiplied = 1;
  var number;
  var max;
  var arraynumber = [];
   //setting the high/low values to fixed variables...
  if (arr[0]>arr[1]){
     number =  arr[1];
    max = arr[0];
  }
  else{
    number = arr[0];
    max = arr[1];
  }  
  while (max >= number){
    if (multiplied % max !==0){multiplied *= max;}
    max-=1;
  }

  return multiplied; 

}

smallestCommons([1,13]);
podiumvoting
@podiumvoting
Feb 23 2016 01:51
what's a button element
is that just a
wait nevermind i'm stupid
Megha Dubey
@dubeymegha
Feb 23 2016 01:52
@pyumbillo ?? not getting .
Marouane Fawzi
@Glamarouane
Feb 23 2016 01:59
guys why is there like a 10px difference between the border of my layout and the border of bootstrap's .container?
Jesse Goetz
@jessegoetz
Feb 23 2016 02:02
thanks danieldut but once again i copied that from the challenge they were giving i actually know that because i have already built some basic sites thats one thing that really stumps me about the way this teaches it has definetly things missing from stuff they should of showed me first like head and title and the way it asks questions just makes no sense well at least to me but i really want those certificates so oh well itll just help me debug things in the future which is a hard part of some of the other stuff id do thanks again
Pawan
@pawan92
Feb 23 2016 02:04
damn daniel
Matt Burd
@EskimoBurd
Feb 23 2016 02:07

I submitted my tribute page and i got the requirements done on it I think, it was accepted and I got credit it seems for completing it.

my question is is it actually completed and checked off? would it tell me when i went to submit it if it wasn't correct?

Brian Hall
@bhallja
Feb 23 2016 02:10
hello world
CamperBot
@camperbot
Feb 23 2016 02:10

welcome to FreeCodeCamp @bhallja!

Kyle Biancardi
@KyleBiancardi
Feb 23 2016 02:11
hello guys i am having issues with keeping my overlaying text on my container image to stay responsive. please help.
how do you insert your code again?
HTML
<div class="fluid-contianer">
<div class="container">
<img id="image" src="http://res.cloudinary.com/dozrfe1oc/image/upload/v1456189309/portfolioimg_vuwrbq.jpg">
<p id="text1">Portfolio</p>
<p id="text2">Kyle Biancardi</p>
</div>
<body>

</body>
</div>
CSS

container {

max-width:100%;
position: relative;
}

image {

position: absolute;
max-width:100%;
left: 0;
top: 0;
}

text1 {

z-index: 100;
position: absolute;
color: black;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 9em;
font-weight: bold;
margin:10px;
}

text2{

z-index: 100;
position: absolute;
color: white;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 5em;
font-weight: bold;
margin:15%;

}

Tikh
@atikh
Feb 23 2016 02:21
if my target is an ID, why would I target a specific child of an element in jQuery like this: $(".target:nth-child(2)").addClass("animated bounce”); versus $(“#target:nth-child(2)").addClass("animated bounce");
the “.” signifies class I thought?
and whenever you reference an ID you use #?
Ali ato
@aliato
Feb 23 2016 02:27
Hello world
CamperBot
@camperbot
Feb 23 2016 02:27

welcome to FreeCodeCamp @aliato!

Adam
@Siberware
Feb 23 2016 02:28
@atikh There should be a class called “target” also
Tikh
@atikh
Feb 23 2016 02:28
@Siberware ah, I see! so that # & . logic would still apply?
Adam
@Siberware
Feb 23 2016 02:28
@atikh You are correct # references ids
Tikh
@atikh
Feb 23 2016 02:29
if target was just an ID, i would use "#target:nth-child..."
@Siberware
Adam
@Siberware
Feb 23 2016 02:30
@atikh Yes, but in that challenge I think you have to change more than one by referencing the class=“target"
Tikh
@atikh
Feb 23 2016 02:30
got it! thakns @Siberware :)
Adam
@Siberware
Feb 23 2016 02:30
@atikh and you do that with a single line
@atikh You’re welcome!
Ken
@phanlinhkhuong
Feb 23 2016 02:38
Will FCC have a course about PHP?
renren89
@renren89
Feb 23 2016 02:44
most likely not
Rafael J. Rodriguez
@Rafase282
Feb 23 2016 02:45
no php
MD Alsaffar
@Cyberistic
Feb 23 2016 02:50
@phanlinhkhuong Quincy Larson talked about it in one of his latest quora answers
max77p
@max77p
Feb 23 2016 02:58
hey guys general question
lets assume you need a static picture aligned centrally when viewed in mobile
is it better practice to do this through css or jquery?
renren89
@renren89
Feb 23 2016 03:00
is the site/app dynamic?
you can do centering pretty easy with css flexbox
max77p
@max77p
Feb 23 2016 03:01
no static site
just wondering what is better practicec
renren89
@renren89
Feb 23 2016 03:03
Good practice to have both. You can do well with each but far better with both
css for animations and JS to trigger animations
J. Wiles
@ForMM82
Feb 23 2016 03:16

<style>
h2 {color: blue;}CatPhotoApp
</style>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

My h2 element should be blue. Does anyone know what I'm missing?
Alfredo Morales
@Frittoss
Feb 23 2016 03:20
@ForMM82 Although you styled it so your h2 elements show up in blue, you didn't actually write the h2 element out in your html.
<h2>this is blue</h2>
Ryan
@LionOver
Feb 23 2016 03:24

<img src="https://bit.ly/fcc-relaxing-cat"img="smaller.image">

<style>
smaller-image {
width: 100px;
}
</style>

I'm completely stuck...how do I size an image?
Kinshuk Sen
@kinshuksen
Feb 23 2016 03:24
@LionOver give your <img> a class of smaller-image
<img src="https://bit.ly/fcc-relaxing-cat" class="smaller.image">
<img src="https://bit.ly/fcc-relaxing-cat" class="smaller-image">
Alfredo Morales
@Frittoss
Feb 23 2016 03:26
also, you need to fix your css so its .smaller-image { etc; }
otherwise it'll assume smaller-image in an element, not a class.
Kinshuk Sen
@kinshuksen
Feb 23 2016 03:26
And HTML is compiled top to bottom, so a good practice will be to keep your <style> tags above your elements
Alfredo Morales
@Frittoss
Feb 23 2016 03:27
Thats one thing I don't really like about the way FCC works, they should at least have a simple template so that people understand style tags are meant to be placed within your <head> tags
Jeff
@OnlineJobsPlus
Feb 23 2016 03:43
@LionOver how's it going? did yo get it to work?
devonwilson1
@devonwilson1
Feb 23 2016 03:49
i added the #cat-photo-element{
background-color: green;
} to css style can someone tell me what the code looks like and where i add it to my id attribute in form

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
#cat-photo-element {
background-color: green;
}
.gray-background {
background-color: gray;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

trying to take what i added in css style and put it in my form element but not sure what the code would look like or where it would go
Kinshuk Sen
@kinshuksen
Feb 23 2016 03:51
@devonwilson1 your current <form> id is set to "cat-photo-form"
for CSS to recognise the ID, you will have to change it to match the CSS # style
change the id to be cat-photo-element
Jeff
@OnlineJobsPlus
Feb 23 2016 03:56
Those id's can get tricky. you have to check your code carefully, otherwise you could get crazy for a few minutes or hours :D
devonwilson1
@devonwilson1
Feb 23 2016 03:56
i changed the form to element and it was wrong
the assignment is use an id attribute to style an element
so there can only be one id attribute for form?
Jeff
@OnlineJobsPlus
Feb 23 2016 04:01
which challenge is this @devonwilson1 ?
Ryan
@LionOver
Feb 23 2016 04:02
Yes, that did help. I'm still learning the syntax.
Harshil Mistry
@mistryharshil
Feb 23 2016 04:03

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.gray-background {
background-color: gray;
}
#cat-photo-form{background-color: green;}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

this is how it should be @devonwilson1
Brett
@BLayman
Feb 23 2016 04:05
This message was deleted
This message was deleted
Harshil Mistry
@mistryharshil
Feb 23 2016 04:09
can anyone solve no 77 query for me ??
Jeff
@OnlineJobsPlus
Feb 23 2016 04:20
what's "no 77 query"? ideally, you solve things by yourself before you check the solution or ask for help
Harshil Mistry
@mistryharshil
Feb 23 2016 04:26
i tried to solve it but seems an error.
@Jsilver1
Alejandro Uranga Reyes
@auranga
Feb 23 2016 04:28
:)
Jeff
@OnlineJobsPlus
Feb 23 2016 04:29
@mistryharshil what is "no 77 query"? you should share the link so people can look into it
Harshil Mistry
@mistryharshil
Feb 23 2016 04:29
Your div element should have the class container-fluid.
Make sure each of your div elements has a closing tag.
Make sure you have nested all HTML elements in .container-fluid.
@Jsilver1
sidewinder56mm
@sidewinder56mm
Feb 23 2016 04:30
I just have a quick question about the assignment pages (I believe that is what they would be called). I'm currently on assignment #38 and going to sign out, when I return tomorrow I will have to go through each page to get to my next assignment. How would I be able to get around this and get direct access to my next assignment when I re-sign into Code Camp?
cannelflow
@cannelflow
Feb 23 2016 04:31
@sidewinder56mm use http://www.freecodecamp.com/map
@mistryharshil which exercise?
Harshil Mistry
@mistryharshil
Feb 23 2016 04:33
exercise no 77 @cannelflow
sidewinder56mm
@sidewinder56mm
Feb 23 2016 04:34
@cannelflow Thank you for that info. That will save me a bunch of time...
CamperBot
@camperbot
Feb 23 2016 04:34
sidewinder56mm sends brownie points to @cannelflow :sparkles: :thumbsup: :sparkles:
:star: 821 | @cannelflow | http://www.freecodecamp.com/cannelflow
Jeff
@OnlineJobsPlus
Feb 23 2016 04:34
@sidewinder56mm try clicking/starting with your profile (or the map). FCC tracks your progress
cannelflow
@cannelflow
Feb 23 2016 04:35
this is http://www.freecodecamp.com/map and its difficult to find exercise 77 here @mistryharshil pls give exercise name
sidewinder56mm
@sidewinder56mm
Feb 23 2016 04:36
@Jsilver1 Thank you.
CamperBot
@camperbot
Feb 23 2016 04:36
sidewinder56mm sends brownie points to @jsilver1 :sparkles: :thumbsup: :sparkles:
:star: 186 | @jsilver1 | http://www.freecodecamp.com/jsilver1
Rex Schrader
@SaintPeter
Feb 23 2016 04:41
This message was deleted
oops
@mistryharshil The exercises are not numbered in any way. The numbers in the upper right corner are your brownie points. While you do get one for each challenge you complete, that is not the only way to get them. You'll need to look at the title/name of the challenge you are working on.
Jeff
@OnlineJobsPlus
Feb 23 2016 04:46
yeah, I asked him twice about the link, or at least he should give the challenge title
Harshil Mistry
@mistryharshil
Feb 23 2016 05:06
Use Responsive Design with Bootstrap Fluid Containers @Jsilver1
Harshil Mistry
@mistryharshil
Feb 23 2016 05:12
its done. thanks anyways
L Yeh
@PhotoGeek1
Feb 23 2016 05:13
Hi - I'm doing the bootstrap module and I don't what bootstrap is.
Is it a pre-defined CSS sheet with pre-defined classes out there on the interwebs that we can call up for mobile devices? That's what I'm sort of getting.
Davinw
@Davinw
Feb 23 2016 05:14
Not just for mobile devices, it's designed to accommodate pretty much every common display device. It's from Twitter originally
L Yeh
@PhotoGeek1
Feb 23 2016 05:16
Ok, so we no longer need to create a separate mobile site for the various devices?
Thanks @Davinw
CamperBot
@camperbot
Feb 23 2016 05:16
photogeek1 sends brownie points to @davinw :sparkles: :thumbsup: :sparkles:
:star: 128 | @davinw | http://www.freecodecamp.com/davinw
Arpit Saxena
@arpit-saxena
Feb 23 2016 05:17
http://codepen.io/FreeCodeCamp/full/VemmoX/.
Can anyone tell me how to build a page where the content and the background is moving like in this example? I always wondered how to do it. Please explain it simply. I am a newbie
You know, the background is still and the content is moving
Davinw
@Davinw
Feb 23 2016 05:18
@PhotoGeek1 Np! And correct, the general idea with a responsive design is that you can spend a little more effort building a site that will adopt to all sorts of displays, instead of having to make separate ones for every different type of display. It does take more planning than just building a site designed around a particular desktop resolution, for instance, but not much more. Payoff definitely worth the work
Arpit Saxena
@arpit-saxena
Feb 23 2016 05:18
Or I don't know what it is
@Davinw Help me
philipsiu
@philipsiu
Feb 23 2016 05:26
Hi. Can anyone help with the challenge "Seek and Destroy"?
Vignesh Kumar
@VigneshKumarWiki
Feb 23 2016 05:44
anybody is there who is proficient in java ?
Reynaldo Rodriguez
@RrodGtHb
Feb 23 2016 05:45
I know a little bit since I'm taking programming 1.
Jason Karlsven
@JayV30
Feb 23 2016 05:45
@arpit-saxena basically what you want to study is the css background properties, you will need to set a few in order to achieve that effect. Most importantly, you will want to set background-attachment: fixed;. That will keep your background fixed in place while your content continues to scroll.
Jeff
@OnlineJobsPlus
Feb 23 2016 05:46
@arpit-saxena there's a part on the FCC map where u will learn about this and more ( responsive design plus css, html, and a lot more)
Vignesh Kumar
@VigneshKumarWiki
Feb 23 2016 05:55
i need a help to learn java in a fast track mode
Arpit Saxena
@arpit-saxena
Feb 23 2016 05:59
@JayV30 @Jsilver1 Thanks
CamperBot
@camperbot
Feb 23 2016 05:59
arpit-saxena sends brownie points to @jayv30 and @jsilver1 :sparkles: :thumbsup: :sparkles:
:star: 364 | @jayv30 | http://www.freecodecamp.com/jayv30
:star: 187 | @jsilver1 | http://www.freecodecamp.com/jsilver1
anand3740
@anand3740
Feb 23 2016 06:11
hello world
CamperBot
@camperbot
Feb 23 2016 06:11

welcome to FreeCodeCamp @anand3740!

anand3740
@anand3740
Feb 23 2016 06:13
thnx camperbot
Caleb Martin
@caleb272
Feb 23 2016 06:14
@VigneshKumarWiki i used to be but not anymore
Jeff
@OnlineJobsPlus
Feb 23 2016 06:15
hello @anand3740 , welcome!
Kevin Townson
@ktown5422
Feb 23 2016 06:18
code is life
hamzawy
@almasterhamzawy
Feb 23 2016 06:18
hello
devonwilson1
@devonwilson1
Feb 23 2016 06:18
can someone please remind me what a css class called pink-text would look like
and what it looks like applied to an elemen(h1)

Prioritize One Style Over Another
Sometimes your HTML elements will receive multiple styles that conflict with one another.

For example, your h1 element can't be both green and pink at the same time.

Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?

Create a CSS class called pink-text that gives an element the color pink.

Give your h1 element the class of pink-text.

Jeff
@OnlineJobsPlus
Feb 23 2016 06:20
hello @almasterhamzawy
@devonwilson1 it depends on what that class has inside it (properties).
ok now that you posted the info... for that challenge, just follow the instructions
i think the lesson for that challenge is about overrirding... or more appropriately, about precedence
devonwilson1
@devonwilson1
Feb 23 2016 06:23
its precedence you wanna find out which style precedes the other
Jeff
@OnlineJobsPlus
Feb 23 2016 06:23
yeah
devonwilson1
@devonwilson1
Feb 23 2016 06:23
i just need to know how to create the class that not only has pink text i did that but now how do i name it pink-text
instead of it saying color: pink

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
color: pink;
</style>

<h1 class="pink-text">Hello Wo

how do i name the class "color pink" pink-text
and I'm still not sure why my h1 element took the pink only difference between pink and the green was that the green came first and that h1 has "pink" embedded in it.
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:28
@devonwilson1 to create a pink-text class, you need to go into your css (in the <style> </style> bit
devonwilson1
@devonwilson1
Feb 23 2016 06:28
right
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:28
and use the dot notation for a class
.pink-text
Jeff
@OnlineJobsPlus
Feb 23 2016 06:29
you just name it .pink-text
devonwilson1
@devonwilson1
Feb 23 2016 06:29
instead of color?
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:29
so it’d be .pink-text { color: pink; }
before, you had it on your body element
now, you want a class called .pink-text that has it applied
you applied it properly to your h1, so that should fix it!
Jeff
@OnlineJobsPlus
Feb 23 2016 06:31
you can name the class anything u want, but for this challenge u need to sort of follow the instruction and use the name "pink-text". the color property (or others) would have to go inside the class
devonwilson1
@devonwilson1
Feb 23 2016 06:31
great thank you that worked but now the h1 text is no longer pink
f my life lol

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
.pink-text{color: pink;}
}
</style>

<h1 class="pink-text">Hello World!</h1>

Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:32
ah — you’ve put your .pink-text class inside of another element, body
each class, ID, element, or anything else you’re calling out in CSS needs its own curly braces
so you have body { color: green; .pink-text {color: pink;} }
Jeff
@OnlineJobsPlus
Feb 23 2016 06:32
yeah, u need to put the pink-text bit outside the body, but still inside the style tags
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:32
but they can’t be nested like that
should be body {color: green;} .pink-text {color: pink;}
devonwilson1
@devonwilson1
Feb 23 2016 06:33
ah i see! is that because it only applies to the body and not any other elements(h1)?
thank you guys
Jeff
@OnlineJobsPlus
Feb 23 2016 06:33
it's a separate property. it's like your body is colored green, while your hand is colored pink. something like that
devonwilson1
@devonwilson1
Feb 23 2016 06:34
i didn't even realize i was "nested" inside body
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:34
They’re different selectors
Vignesh Kumar
@VigneshKumarWiki
Feb 23 2016 06:34
hey buddies, i need to create an android app on my own. but im not not proficient in java. help me pls
Jeff
@OnlineJobsPlus
Feb 23 2016 06:34
yeah, u have to be mindful of the separations @devonwilson1
devonwilson1
@devonwilson1
Feb 23 2016 06:34
makes since, is there any way to nest and still overpower or use description to only manipulate a separate element from the one you are nested inside?
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:34
“body” is a selector, “h1” is a selector, any class that you make like “.pink-text” or any ID you make like “#pink-text” — they are all selectors
And you can’t put selectors inside of each other. Each one has to be separate
devonwilson1
@devonwilson1
Feb 23 2016 06:35
for sure! great lesson
Jeff
@OnlineJobsPlus
Feb 23 2016 06:35
yeah, u can override or overpower as u say, if that's what u want in certain cases
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:36
As far as I know, you can’t nest selectors in CSS
You can do that sort of thing in Sass, which is a pre-processor for CSS, but that’s a whole other deal haha
Jeff
@OnlineJobsPlus
Feb 23 2016 06:38
@saylu, yes, i'm not referring to that specifically. i'm saying he can override in general (based on his question. but i admit his question is a bit unclear)
Thomas Honeyman
@thomashoneyman
Feb 23 2016 06:39
Yea, that’s right @Jsilver1 — I’m just referring to nesting
You can certainly override by applying CSS to a general selector, then to a more specific one. The more specific one overrides.
:clap:
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:39
heyas @VigneshKumarWiki .. you'll need to learn java...same as I'm doing now for my app....you'll need other code skills too...and you'll need to learn how to manuever the android app studio
Jeff
@OnlineJobsPlus
Feb 23 2016 06:40
yes, that's it, specificity. thanks @saylu
CamperBot
@camperbot
Feb 23 2016 06:40
jsilver1 sends brownie points to @saylu :sparkles: :thumbsup: :sparkles:
:star: 286 | @saylu | http://www.freecodecamp.com/saylu
Zak
@zakriazubair
Feb 23 2016 06:46

'<!DOCTYPE html>

<html>
<head>
<title>Matching Game!</title>
<style>
img {
position: absolute;
}

        div {
            position: absolute;
        }

        #leftSide {
            width: 500px;
            height: 500px;
        }

        #rightSide {
            width: 500px;
            height: 500px;
            left: 500px;
            border-left: 1px solid black;
        }
    </style>
    <script>
        function generateFaces() {
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");

            var this_img = document.createElement("img");
            this_img.src = "smile.png";

            var random_top = Math.random() * 400;
            random_top = Math.floor(random_top);
            this_img.style.top = random_top + "px";

            var random_left = Math.random() * 400;
            random_left = Math.floor(random_left);
            this_img.style.left = random_left + "px";

            theLeftSide.appendChild(this_img);

        }
    </script>
</head>

<body id="theBody" onload="generateFaces()">
    <h1>Matching Game</h1>
    <p>Click on the extra smiling face on the left.</p>

    <div id="leftSide">

    </div>

    <div id="rightSide">

    </div>


</body>

</html>'

cna anyone help me? i want to show an image but cant make the code to work
Jeff
@OnlineJobsPlus
Feb 23 2016 06:48
which challenge is this? @zakriazubair
Zak
@zakriazubair
Feb 23 2016 06:48
not a challenge, its a week 3 assignment for Coursera's Full Stack Web Development course
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:50
i didnt know coursera offered that course
is it free or paid course?
Zak
@zakriazubair
Feb 23 2016 06:51
free
just click on the request financial aid link
its pretty good in combination with FCC
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:51
hmm i'll take a look
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:53
thank you @zakriazubair
CamperBot
@camperbot
Feb 23 2016 06:53
rogue00 sends brownie points to @zakriazubair :sparkles: :thumbsup: :sparkles:
:star: 46 | @zakriazubair | http://www.freecodecamp.com/zakriazubair
Zak
@zakriazubair
Feb 23 2016 06:55
anyone here can help out with nodes in Javascript?
Radouane ARCHE
@ELARCHA
Feb 23 2016 06:56
helllo please can help me don't understand this question :Inherit Styles from the Body Element
Jeff
@OnlineJobsPlus
Feb 23 2016 06:57
@ELARCHA it means to copy,emulate the style properties from those seen inside the body element
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:58
I dm new and havent learned nodes yet @zakriazubair
mohammed adnan
@adhu56
Feb 23 2016 06:58
atleast any link
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 06:58
I'm new*
Jeff
@OnlineJobsPlus
Feb 23 2016 06:59
this room is mainly for FCC challenges, @zakriazubair so topics would quite vary. did u get any help from Coursera students
Zak
@zakriazubair
Feb 23 2016 07:00
Their community isnt that active
Jeff
@OnlineJobsPlus
Feb 23 2016 07:00
i see
Radouane ARCHE
@ELARCHA
Feb 23 2016 07:02

id this <style>
body {
background-color: green;
font-family:Monospace;
}
h1{
font-family:Monospace inherit;
color:green inherit;
}
</style>

<h1>Hello World</h1>
please i'm blocked

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:02
you could maybe make a room for their students to fraternize here on gitter
@zakriazubair
stimulate them if possible
Zak
@zakriazubair
Feb 23 2016 07:02
I ll try
Jeff
@OnlineJobsPlus
Feb 23 2016 07:03
which challenge is that, @ELARCHA ? any link to that challenge?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:03
do they have any sort of class mate communications over there? are they even using gitter etc/
Radouane ARCHE
@ELARCHA
Feb 23 2016 07:04
it is that challenge:Inherit Styles from the Body Element
i don't understand what you must do
Jeff
@OnlineJobsPlus
Feb 23 2016 07:05
give us the link to that, some people might be able to help
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:06
which challenge number @ELARCHA
all you must do is change text color and font
Jeff
@OnlineJobsPlus
Feb 23 2016 07:09
@ELARCHA Inherit Styles from the Body Element -- this means whatever style the body element has will be applied to all other elements inside <body> </body>
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:09
what is your questions exactly @ELARCHA
Radouane ARCHE
@ELARCHA
Feb 23 2016 07:09
hey @Rogue00 the number is 53
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:09
yes
Zak
@zakriazubair
Feb 23 2016 07:10
@Rogue00 No they have a discussion forum feature there, but it isnt interactive like Gitter and ppl dont respond
Jeff
@OnlineJobsPlus
Feb 23 2016 07:10
just follow the instructions @ELARCHA and let us know exactly where u get stuck
Radouane ARCHE
@ELARCHA
Feb 23 2016 07:10
how can use it? Mr @Jsilver1
Jeff
@OnlineJobsPlus
Feb 23 2016 07:10
use what?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:10

<style>
body {
background-color: white;
color: blue;
font-family: San Seriff;
}

</style>

<h1>Hello World</h1>

like this
Johnathan Brown
@Legend28469
Feb 23 2016 07:11

Can someone help me with the Wikipedia viewer? It shows undefined everytime for my first item and the description doesn’t always show up. Also it stops at 3 for some strange reason.

http://codepen.io/Legend28469/pen/MKdpXm?editors=0010

khalsa777
@khalsa777
Feb 23 2016 07:11
heyy juz finished portfolio..... plzzz plzzz give critical review http://codepen.io/khalsa777/full/ZQdooB/
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:11
inside the body tags you have set the background to white, feature color to blue set the font i the body section to a certain style
the challenge instructions are to the right of the challenge page
the map will bring a drop down menu of the next and more challenges down the list
you only need to create the style elements within the body tags to complete that challenge
Johnathan Brown
@Legend28469
Feb 23 2016 07:12

@khalsa777 they give reviews here

https://gitter.im/FreeCodeCamp/CodeReview

However, I love the design
Jeff
@OnlineJobsPlus
Feb 23 2016 07:14
@khalsa777 it would be great if you vary your font sizes/headings
Mihir Dutta
@mihirdutta
Feb 23 2016 07:15

Hi, I'm unable to call the Wikipedia API from CodePen. Here's my code

$(document).ready(function() {
$("form").on("submit", function(event) {
event.preventDefault();
$.getJSON("https://en.wikipedia.org/w/api.php", {
action: "query",
titles: encodeURIComponent($("form > input").val()),
prop: "revisions",
rvprop: "content",
format: "json",
}, function(data) {
// do something with data
});
});
});

Radouane ARCHE
@ELARCHA
Feb 23 2016 07:15
thank you Mr @Rogue00 it is work
CamperBot
@camperbot
Feb 23 2016 07:15
elarcha sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:star: 138 | @rogue00 | http://www.freecodecamp.com/rogue00
khalsa777
@khalsa777
Feb 23 2016 07:15
@Legend28469 posted there too
Mihir Dutta
@mihirdutta
Feb 23 2016 07:15
Sorry,
$(document).ready(function() {
  $("form").on("submit", function(event) {
    event.preventDefault();
    $.getJSON("https://en.wikipedia.org/w/api.php", {
      action: "query",
      titles: encodeURIComponent($("form > input").val()),
      prop: "revisions",
      rvprop: "content",
      format: "json",
    }, function(data) {
      // do something with data
    });
  });
});
khalsa777
@khalsa777
Feb 23 2016 07:16
@Jsilver1 plz clarify more
Mihir Dutta
@mihirdutta
Feb 23 2016 07:19
Anyone?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:19
im sorry but im still new and not to that projct yet...
JEGuitarist
@JEGuitarist
Feb 23 2016 07:19

Hi, can anyone explain why my !important tag isn't working? I can't seem to figure it out lol

`` <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

orange-text {

color: orange;

}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>

<h1 id="orange-text" class="pink-text !important; blue-text" style="color: white">Hello World!</h1>

CamperBot
@camperbot
Feb 23 2016 07:19

welcome to FreeCodeCamp @JEGuitarist!

JEGuitarist
@JEGuitarist
Feb 23 2016 07:19
well..that failed lol
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:21
whats this ! behind "pink-text
?
JEGuitarist
@JEGuitarist
Feb 23 2016 07:21
What's the proper markup for the code tag so that's more legible?
Mihir Dutta
@mihirdutta
Feb 23 2016 07:21
@JEGuitarist you're supposed to place the !important tag within the property area, like so
.class-selector { propName: propValue; !imporant}
Sorry, the semi colon comes at the end
.class-selector { propName: propValue !imporant;}
JEGuitarist
@JEGuitarist
Feb 23 2016 07:24
That should be proper then, right? !important should come after pink, since the challenge wants the font to be pink
Mihir Dutta
@mihirdutta
Feb 23 2016 07:25
.pink-text {color: pink !important;}
within an html tag, it'll be within the style attribute, and not the class attribute
JEGuitarist
@JEGuitarist
Feb 23 2016 07:27
Well what's weird is that I have all my checkmarks except for the h1 being pink.. lol. I lose a check if I put !important anywhere else.
I totally understand what you're saying, just doesn't make sense entirely on the challenge

"Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and in-line styles.

Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink."

whoops
just figured it out lol
I needed to edit the class and add !important to that.
Like you were saying
But up inside the css
Mihir Dutta
@mihirdutta
Feb 23 2016 07:29
Yeah
JEGuitarist
@JEGuitarist
Feb 23 2016 07:29
not sure why that confused me so much haha, thanks for the help :)
Mihir Dutta
@mihirdutta
Feb 23 2016 07:32
Sure, no problem
Jeff
@OnlineJobsPlus
Feb 23 2016 07:42
@JEGuitarist you need to remove "!important;" on this line: <h1 id="orange-text" class="pink-text !important; blue-text" style="color: white">Hello World!</h1> (that was supposed to be put "inside the css")
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:43
would you guys be willing to give me advice on my tribute project?
Jeff
@OnlineJobsPlus
Feb 23 2016 07:47
@rogue00 nice. try to play around with the font type and sizes
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:48
I think im going to add some bootstrap columns...that will fix my issue with the bullet points
ill reduce the font size for the h2 portion and I can look at some more font styles...I really was looking for a script sort of font for this
Jeff
@OnlineJobsPlus
Feb 23 2016 07:49
yeah, you can play around with a few columns (for those bullet points)
check this out @rogue00 https://www.google.com/fonts
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:52
yep...thats where i got my current font.,...tho tbh i didnt spend a lot of time there choosing it...ill go back and look because id really like a cursive script type or old english style
thanks for the tip @Jsilver1 :)
CamperBot
@camperbot
Feb 23 2016 07:53
rogue00 sends brownie points to @jsilver1 :sparkles: :thumbsup: :sparkles:
:star: 188 | @jsilver1 | http://www.freecodecamp.com/jsilver1
Jeff
@OnlineJobsPlus
Feb 23 2016 07:54
yes, i think a script type would look awesome on that page. but try not to overdo it :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:54
no...im trying to keep it simple...in the spirit of the black knight as it were
Jeff
@OnlineJobsPlus
Feb 23 2016 07:54
haha
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:55
the information there is fictional tho...im a writer before learning code so i wanted to use those skills in this particular challenge :)
rahim
@rahim4a5
Feb 23 2016 07:55
i got a confusion on Override All Other Styles by using Important...can anybody help me..
Your pink-text class should have the !important keyword to override all other declarations.
Your h1 element should be pink.
gts00k
@gts00k
Feb 23 2016 07:56
what's an alternative to Math.pow ?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 07:56
i had some trouble with that one too
im sorry, i dont know @gts00k
rahim
@rahim4a5
Feb 23 2016 07:57

body {
background-color: black;
font-family: Monospace;
color: green;
}

orange-text {

color: orange;

}
.pink-text {
color: pink ;
}
.blue-text {
color: blue;
}
</style>

<h1 id="orange-text" class="pink-text !imporatnt blue-text" style="color: white " >Hello World!</h1>

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:00
i think you need to place the !important tag within your style tags
pink-text {
JEGuitarist
@JEGuitarist
Feb 23 2016 08:00
Yep, just had this issue
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:00
color: pink !important;}
Jeff
@OnlineJobsPlus
Feb 23 2016 08:00
that's awesome @Rogue00 ... @rahim4a5 scroll up and check out JEguitarist's post. it seems u encountered the same issue
JEGuitarist
@JEGuitarist
Feb 23 2016 08:01

place important like so

.pink-text{
color:pink;
!important;}

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:01
pink-text {
color:pink !important;}
JEGuitarist
@JEGuitarist
Feb 23 2016 08:01
whoops, no semi after color:pink
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:01
like that i think
JEGuitarist
@JEGuitarist
Feb 23 2016 08:01
er no
I think there is a semi
lol
Jeff
@OnlineJobsPlus
Feb 23 2016 08:01
no. should have no semi colon after pink
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:02
no..the semi colon closes the statement
it would interupt the color change if you placed it before the !important label
i think....im new
Jeff
@OnlineJobsPlus
Feb 23 2016 08:03
im referring to @JEGuitarist post above. yours was the correct one @Rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:03
righty yes thank you @Jsilver1
CamperBot
@camperbot
Feb 23 2016 08:03
rogue00 sends brownie points to @jsilver1 :sparkles: :thumbsup: :sparkles:
:warning: rogue00 already gave jsilver1 points
hakanozer98
@hakanozer98
Feb 23 2016 08:03

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.gray-background {
background-color: gray;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

It says your div elements background should gray
What am i doing wrong?
JEGuitarist
@JEGuitarist
Feb 23 2016 08:06
That should work..
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:06
<div class="background-color : gray">
JEGuitarist
@JEGuitarist
Feb 23 2016 08:07
Proper class entry would be as you did <div class="gray-background">
Elior Boukhobza
@mallowigi
Feb 23 2016 08:07
try to use background instead of background-color
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:07
yes just background
JEGuitarist
@JEGuitarist
Feb 23 2016 08:09
No, it should be background-color I believe
hakanozer98
@hakanozer98
Feb 23 2016 08:09
Didnt work just background
JEGuitarist
@JEGuitarist
Feb 23 2016 08:10
what check boxes are you missing?
rahim
@rahim4a5
Feb 23 2016 08:10
guys still it didnt working...

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

orange-text {

color: orange;

}
.pink-text {
color: pink !imporatnt ;
}
.blue-text {
color: blue;
}
</style>

<h1 id="orange-text" class="pink-text blue-text" style="color: white " >Hello World!</h1>

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:10
.gray-background {
background-color: gray;
}
within your style tags
hakanozer98
@hakanozer98
Feb 23 2016 08:11
Your div element should have a gray background.
JEGuitarist
@JEGuitarist
Feb 23 2016 08:11
You typoed important @rahim4a5
rahim
@rahim4a5
Feb 23 2016 08:11
thank u @JEGuitarist
CamperBot
@camperbot
Feb 23 2016 08:11
rahim4a5 sends brownie points to @jeguitarist :sparkles: :thumbsup: :sparkles:
:star: 61 | @jeguitarist | http://www.freecodecamp.com/jeguitarist
rahim
@rahim4a5
Feb 23 2016 08:12
thank u @Rogue00
CamperBot
@camperbot
Feb 23 2016 08:12
rahim4a5 sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:star: 139 | @rogue00 | http://www.freecodecamp.com/rogue00
JEGuitarist
@JEGuitarist
Feb 23 2016 08:12
 <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
  .gray-background {
    background-color: gray;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
Jeff
@OnlineJobsPlus
Feb 23 2016 08:12
those typos and lack of "/" or ";" and many others get tricky haha
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:12
youre welcome glad i could help :)
JEGuitarist
@JEGuitarist
Feb 23 2016 08:12
That's how it should be done..though I don't see any difference between the two
Sorry, fixed the mess there lol
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:14
lol
i've already learned a lot
Caleb Martin
@caleb272
Feb 23 2016 08:15
can someone tell me why my call to the weather api isn’t working http://codepen.io/thecoder15/pen/mVNywj?editors=0010
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:15
i'm gonna study hard and go all the way....like teenagers on prom night ah haha
:P
rahim
@rahim4a5
Feb 23 2016 08:16
guys ..still it displaying ....Your pink-text class should have the !important keyword to override all other declarations.
hakanozer98
@hakanozer98
Feb 23 2016 08:16
Thank you very much i solved
rahim
@rahim4a5
Feb 23 2016 08:16

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

orange-text {

color: orange;

}
.pink-text {
color: pink !important ;
}
.blue-text {
color: blue;
}
</style>

<h1 id="orange-text" class="pink-text blue-text" style="color: white " >Hello World!</h1>

Caleb Martin
@caleb272
Feb 23 2016 08:16
haha Rogue00 all the way bitches
JEGuitarist
@JEGuitarist
Feb 23 2016 08:16
Congrats @hakanozer98 ;)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:17
I can understand that...i have one of those projects going too
its not a game but im ncdaa
Caleb Martin
@caleb272
Feb 23 2016 08:18
?ncdaa
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:18
hm yea wrong chat room
ndcaa my mistake
its an international non disclosure agreement
Caleb Martin
@caleb272
Feb 23 2016 08:19
o that was meant for me right
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:19
yes
Caleb Martin
@caleb272
Feb 23 2016 08:19
also have you completed the weather challenge
JEGuitarist
@JEGuitarist
Feb 23 2016 08:20
You should just have to add !important after color: pink like you did
Try resetting the code and trying it again
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:20
im working on beginners development projects
specifically my tribute right now
JEGuitarist
@JEGuitarist
Feb 23 2016 08:21
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
It should be formatted like that
@rahim4a5
Seems pretty interesting @Rogue00 ! Nice work :)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:24
thank you @JEGuitarist
CamperBot
@camperbot
Feb 23 2016 08:24
rogue00 sends brownie points to @jeguitarist :sparkles: :thumbsup: :sparkles:
:star: 62 | @jeguitarist | http://www.freecodecamp.com/jeguitarist
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:24
the info is fiction except for the code of chivalry....i wrote it to combine my skills a bit and have a littloe fun
im ging to make a few changes...clean it up a little before i submit
JEGuitarist
@JEGuitarist
Feb 23 2016 08:25
I'd definitely like to read more about it, sounds pretty cool
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:26
that snippet is just off the top of my head...i could write a full length novel on it but it would take a little bit
and drag me from learning to code
mebbe laters :)
JEGuitarist
@JEGuitarist
Feb 23 2016 08:27
sweet :P
Alright, I'm off to bed, have fun everybody haha.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:27
im still working on my recent manuscript...thats on the shelf atm....a steampunkish civil war fiction about the creation of a union special forces team and their assignment to a prototype ironclad monitor class warship
night bud :)
JEGuitarist
@JEGuitarist
Feb 23 2016 08:27
Steampunk + civil war sounds awesome
rahim
@rahim4a5
Feb 23 2016 08:28
thanku @JEGuitarist
JEGuitarist
@JEGuitarist
Feb 23 2016 08:28
definitely continue that one :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:28
yea..with ninja and experimental steam tech wep systems etc
JEGuitarist
@JEGuitarist
Feb 23 2016 08:28
No problem @rahim4a5 :)
Caleb Martin
@caleb272
Feb 23 2016 08:28
JEGuitarist
@JEGuitarist
Feb 23 2016 08:28
Alright.. lol off to bed, night everyone
rahim
@rahim4a5
Feb 23 2016 08:29
gudnt @JEGuitarist :smile:
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:29
night bud...sorry caleb im not that far yet
Caleb Martin
@caleb272
Feb 23 2016 08:29
by
Adrian Chira
@adrianchira
Feb 23 2016 08:30
@caleb272 you need to get an API key in order to work.
Caleb Martin
@caleb272
Feb 23 2016 08:31
i put it in there
@adrianchira
Rita Alfonso
@alfonsotech
Feb 23 2016 08:31
@Rogue00 I just finished mine just this minute too! It looks like you are using Bootstrap, yes? Do you want the white space/borders along the edges (like in the example given) or is their not being there intentional?
BTW, here is a link to my tribute page: http://codepen.io/alfonsotech/full/MKNwwp/ Let me know what you think...
James
@Moebiusfan
Feb 23 2016 08:37
Hi, I'm just not getting the lesson on nesting the thumbs up icon with my Like button using Bootstrap. Her is my code <button class="btn btn-block btn-primary">Like<a ><i class="fa fa_thumbs_up"></i></button> Can anyone help me out?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:37
nice @alfonsotech
i omitted the whitespace border for mine but honestly im still playing with the style of the page
i'm not sure about that bootstrap column....
Adrian Chira
@adrianchira
Feb 23 2016 08:39
@caleb272 just seen that but now I’ve noticed that you need some ‘+’ signs when you concatenate the string for the url
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:39
also not sure i like how those bullet points sit with my text centered the way i have it
Rita Alfonso
@alfonsotech
Feb 23 2016 08:39
@Rogue00 Well, if you want to add the white space border to see what it looks like (might be nice!), you can wrap your entire body in <div class="container"></div> tags and it will automatically give you that look, via bootstrap.
Caleb Martin
@caleb272
Feb 23 2016 08:39
@alfonsotech what do you mean it works
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:40
i just wrapped it in the container-fluid
can i use the div container with the container-fluid or is it necessary?
if so...which comes first? container or container-fluid?
Rita Alfonso
@alfonsotech
Feb 23 2016 08:42
@Rogue00 I had that problem yesterday with another webpage I was working on. If you add this to CSS, it'll fix that problem. It will center the text, no bullets:
ul {
    list-style-type: none;
    padding:0;
    margin:0;
}
@Rogue00 You can put a container inside a container, np, but it might be superfluous/unnecessay.
@Rogue00 The order will change how your page behaves when it is made larger or smaller. Fluid will behave differently. Try each and see which one you like best. You can check this out: https://www.youtube.com/watch?v=1dRePKQHie4 or
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:46
o thats better...awesome..thanks for the great tips @alfonsotech :)
CamperBot
@camperbot
Feb 23 2016 08:47
rogue00 sends brownie points to @alfonsotech :sparkles: :thumbsup: :sparkles:
:star: 285 | @alfonsotech | http://www.freecodecamp.com/alfonsotech
Rita Alfonso
@alfonsotech
Feb 23 2016 08:47
@Rogue00 YW!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:48
i think i can change the font to something more suitable and ill be finished :)
darn..the old english font i want not available except formoney bleh
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 08:55
darn...new font not showing :(
why would the font show on code pen but not here?
dratt
Anna Sakoyan
@ansakoy
Feb 23 2016 08:59
@Moebiusfan <a> looks out of place. <button class="btn btn-block btn-primary">Like<i class="fa fa_thumbs_up"></i></button> This should work I think.
Rita Alfonso
@alfonsotech
Feb 23 2016 09:00
@Rogue00 There are some typos in your code that may be intierfearing. I took a look and debugged it, check it out here: http://codepen.io/alfonsotech/pen/pgMjmB
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:01
its not showing the font tho
Rita Alfonso
@alfonsotech
Feb 23 2016 09:01
@Rogue00 That's cause I forked your earlier version.
Anna Sakoyan
@ansakoy
Feb 23 2016 09:02
@Moebiusfan ah, it's also fa-thumbs-up, dashes instead of undesrscores.
Rita Alfonso
@alfonsotech
Feb 23 2016 09:02
I took out your <script> tags in your CSS panel - those tags are used to put css in an html doc.
I also added <body> tags and some other stuff. I'll take a look at your lastest version now.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:03
ty
i didnt realize you were doing that
where can i see what you did?
@alfonsotech
Rita Alfonso
@alfonsotech
Feb 23 2016 09:04
@Rogue00 here is my fork of your pen: http://codepen.io/alfonsotech/pen/pgMjmB
Joel Bemis
@jbemis
Feb 23 2016 09:05
hey guys! i’m trying to troubleshoot and could use some insight...
why doesn’t the timer read 00:00:00? shouldn’t my javascript be affecting it?
Jack Lyons
@JackEdwardLyons
Feb 23 2016 09:07
hey guys i am having trouble with a simple RegEx challenge in Code Wars http://www.codewars.com/kata/56a3f08aa9a6cc9b75000023/train/javascript
basically i need to Write a simple regex to validate a username.
heres my code function validateUsr(username) { var res = /[A-Za-z0-9_ ]{4,16}/g; return res.test(username); }
i get 7/10 and wondering why not 10/10
Rita Alfonso
@alfonsotech
Feb 23 2016 09:08
@Rogue00 If you hit the "tidy"button, it will aling your code so you can better see what you are doing. Also, your classes of .row and .col-sm-4 need to be inside their own container div.
hakanozer98
@hakanozer98
Feb 23 2016 09:09

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

.gray-background {
background-color: gray;
}

#cat-photo-form {

background-color: green
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://bit.ly/fcc-relaxing-cat"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

Rita Alfonso
@alfonsotech
Feb 23 2016 09:09
Also, I changed your column to col-sm-12 to get the text to sit in the middle.
hakanozer98
@hakanozer98
Feb 23 2016 09:09
Your form element should have background color green
James
@Moebiusfan
Feb 23 2016 09:10
@ansakoy Thanks, those comments help me resolve the issue. One more questions, though. I am confused over using the <a> tag. Perhaps I misunderstood one of the earlier lessons, but I thought it was used to nest.
CamperBot
@camperbot
Feb 23 2016 09:10
moebiusfan sends brownie points to @ansakoy :sparkles: :thumbsup: :sparkles:
:star: 270 | @ansakoy | http://www.freecodecamp.com/ansakoy
Rita Alfonso
@alfonsotech
Feb 23 2016 09:11
@jbemis Not sure what you mean. Can you rephrase?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:11
thats all very helpful Thank you @alfonsotech
CamperBot
@camperbot
Feb 23 2016 09:11
rogue00 sends brownie points to @alfonsotech :sparkles: :thumbsup: :sparkles:
:warning: rogue00 already gave alfonsotech points
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:11
still not showing my new font
maybe not supported?
Rita Alfonso
@alfonsotech
Feb 23 2016 09:12
@Rogue00 Where did you get the font name from?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:12
google fonts
Rita Alfonso
@alfonsotech
Feb 23 2016 09:13
@Rogue00 You probably need to add a google font script, if that is where you got it from.
Jeff
@OnlineJobsPlus
Feb 23 2016 09:13
@jbemis i havent reached that challenge yet. just curious: was "00:25:00" set manually?
yes, u need to add google font script
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:13
how do i do that?
Jeff
@OnlineJobsPlus
Feb 23 2016 09:13
in html and css
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:14
in html and css?
Rita Alfonso
@alfonsotech
Feb 23 2016 09:14
@Rogue00 Okay, so at google fonts, you will need to get the script tag to add to the bottom of your code, right before your closing </body? tag.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:14
you mean the link to the font in html and the class attribute in css?
Jeff
@OnlineJobsPlus
Feb 23 2016 09:14
like this in html: <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
Rita Alfonso
@alfonsotech
Feb 23 2016 09:14
^
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:15
i have it at the top of my code
below the div class container
Jeff
@OnlineJobsPlus
Feb 23 2016 09:15
sorry, u dont have to put the script in css . just declare or mention it inside the css
Rita Alfonso
@alfonsotech
Feb 23 2016 09:15
it needs to be at the bottom right b closing body tag
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:15
ive done that too
Rita Alfonso
@alfonsotech
Feb 23 2016 09:15
let me check....
nope, it's not there
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:16
at the bottom you say?
ive just moved it from the top is why its not there
so the font link goes at the bottom just before the closing body tag? is that correct or....
i thought it went at the top...but im not sure does it go before or inside the div class container?
yea...still not working
blehh
Jeff
@OnlineJobsPlus
Feb 23 2016 09:20
im not checking your pen... but the line of code (google font) can be put on top (html).... if some script tag (javascript) is not that necessary (or u want your code to run/display faster), you can put it at the bottom
Anna Sakoyan
@ansakoy
Feb 23 2016 09:20
@Moebiusfan <a> is normally used as an anchor tag with href attribute to place a hyperlink, like <a href="http://example.com">Some text or image</a>.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:20
does it need to be inside the div container tag or outside?
@Jsilver1
Jeff
@OnlineJobsPlus
Feb 23 2016 09:21
oh, inside the <head> . div container is inside <body>, right? @rogue00 google font code would have to be put above the <body> , inside <head>
James
@Moebiusfan
Feb 23 2016 09:21
Ahh - thanks again. Just got it confused.
anthonygallina1
@anthonygallina1
Feb 23 2016 09:22
@Rogue00 you have it in your body Needs to be in the head I would click the gear on html and put it in there Or load it from your CSS
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:22
i just noticed that and corrected
Jeff
@OnlineJobsPlus
Feb 23 2016 09:23
did it work?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:23
i just lost my entire project >.>
Jeff
@OnlineJobsPlus
Feb 23 2016 09:24
i think it did work, didn't it?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:24
i hit backspace and everything is gone
Jeff
@OnlineJobsPlus
Feb 23 2016 09:24
the font has changed
try right click, Undo
anthonygallina1
@anthonygallina1
Feb 23 2016 09:24
@Rogue00 seeing it in both places now here
@Rogue00 try Ctrl z
Jeff
@OnlineJobsPlus
Feb 23 2016 09:25
or control Z (I havent used codepen yet)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:25
this my first time
got my project back..1 sec
Jeff
@OnlineJobsPlus
Feb 23 2016 09:25
it looks good haha. much better than the first one u posted earlier :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:25
nope..dam
Jeff
@OnlineJobsPlus
Feb 23 2016 09:26
must be an issue with your browser? the font has changed. i think @anthonygallina1 sees it too
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:26
im using chrome
i see it in the browser...just not in this gitter chat
Rita Alfonso
@alfonsotech
Feb 23 2016 09:27
@Rogue00 this syntax is not right:
body {
  background-color: #d3d3d3;
}

{
  text-align: center
}
Jeff
@OnlineJobsPlus
Feb 23 2016 09:27
u forgot this part on top of your html: <link href='https://fonts.googleapis.com/css?family=IM+Fell+English:400italic' rel='stylesheet' type='text/css'>
anthonygallina1
@anthonygallina1
Feb 23 2016 09:28
@Rogue00 Code pen seets up dif than a file you would ftp
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:28
does it need to be in the head?
or in the main html document?
wows this little tidbit has become confusing
Jeff
@OnlineJobsPlus
Feb 23 2016 09:28
yeah, above and outside <body>
html
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:29
i have it there...and also in the head portion in the gear drop down
anthonygallina1
@anthonygallina1
Feb 23 2016 09:29
@Rogue00 yes but to my understanding that area of tags <head> is accessed through the gear
Jeff
@OnlineJobsPlus
Feb 23 2016 09:29
not really confusing @rogue00, you just need to compare your code since u accidentally deleted it
anthonygallina1
@anthonygallina1
Feb 23 2016 09:30
@Rogue00 mostly have to deal with the body in code pen It is diff
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:31
ok...
Jeff
@OnlineJobsPlus
Feb 23 2016 09:31
yes, i see that piece of code inside the gear
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:31
i have it in the head portion
Jeff
@OnlineJobsPlus
Feb 23 2016 09:31
so, what's the issue now?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:31
i also have it in the main html area above the body tag
and i think i fixed the incorrect syntax @alfonsotech mentioned
i have all this itme been able to see the font in codepen
before even messing with it
but it doesnt show when i share in gitter
Rita Alfonso
@alfonsotech
Feb 23 2016 09:32

It doesn't hurt to have

<html>
  <head>
  </head>

  <body>
  </body>
</html>

Structure in your codepen. That way you get used to having it there.

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:32
doesnt show correctly*
Jeff
@OnlineJobsPlus
Feb 23 2016 09:33
the font change does show if u click on the pen (and view it in another browser tab)
anthonygallina1
@anthonygallina1
Feb 23 2016 09:33

@Rogue00

<link href='https://fonts.googleapis.com/css?family=IM+Fell+English:400italic' rel='stylesheet' type='text/css'>

If you pull this out of your body you will see you are laoding it twice.

Rita Alfonso
@alfonsotech
Feb 23 2016 09:33
put the google font tag in between your <head></head> tags
Damaris Muange
@ndush
Feb 23 2016 09:34
Your div element should have the class container-fluid.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:34
should i use container or container-fluid? can i use both? or should i not?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:36
hmm so weird...I'm sure thats all right now
anthonygallina1
@anthonygallina1
Feb 23 2016 09:37
you may want to add this to gear head section also <meta name="viewport" content="width=device-width, initial-scale=1.0">.
@Rogue00 looks responsive all ready Never mind
Damaris Muange
@ndush
Feb 23 2016 09:39
what is meant by div element should have the class container-fluid
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:39
its good except it doesnt seem to be reflecting that font outside of codepen
<div class="container-fluid"> </div> @ndush
wrap your code in that bud
well dang..that font looks really good
Rita Alfonso
@alfonsotech
Feb 23 2016 09:41
@Rogue00 Outside of codepen?
anthonygallina1
@anthonygallina1
Feb 23 2016 09:41
@Rogue00 yup thats what I meant by it is dif than a file you would ftp
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:41
when i share it here is what I mean
Damaris Muange
@ndush
Feb 23 2016 09:41
Thank you
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:42
it doesnt reflect the font changes in the gitter chat...where else can I see it?
Rita Alfonso
@alfonsotech
Feb 23 2016 09:42
@Rogue00 gotcha
Richard Andrews
@Whiplash5057
Feb 23 2016 09:43
Hey guys ..need help
anthonygallina1
@anthonygallina1
Feb 23 2016 09:43
@Rogue00 italics? I see italics here.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:43
yes...
Richard Andrews
@Whiplash5057
Feb 23 2016 09:43
My JS is wrong I guess !!:-(
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:43
not a good idea?
Rita Alfonso
@alfonsotech
Feb 23 2016 09:43
@Whiplash5057 What do you need help with?
Richard Andrews
@Whiplash5057
Feb 23 2016 09:43
trying the random quote project
I want the button to generate a random letter from the array
Damaris Muange
@ndush
Feb 23 2016 09:44
how do i nest all HTML elements in .container-fluid.
Richard Andrews
@Whiplash5057
Feb 23 2016 09:44
@alfonsotech
anthonygallina1
@anthonygallina1
Feb 23 2016 09:44
@Rogue00 the font is loading in the example above here.
Rita Alfonso
@alfonsotech
Feb 23 2016 09:44
@Whiplash5057 let me take a look...
Richard Andrews
@Whiplash5057
Feb 23 2016 09:45
@ndush just create a <div class = "container-fluid"> in the begining and the end
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:45
put this at the top of your html <div class="container-fluid">
and then put </div> at the end
Damaris Muange
@ndush
Feb 23 2016 09:46
got it
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:46
how do i share an image in here?
anthonygallina1
@anthonygallina1
Feb 23 2016 09:47
@Rogue00 you can drag drop in the text input box where you type
Or link
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:48
Black Knight text issue.png
thats the font i should be displaying
thanks for your patience guys thanks @Jsilver1 @alfonsotech @anthonygallina1
CamperBot
@camperbot
Feb 23 2016 09:49
rogue00 sends brownie points to @jsilver1 and @alfonsotech and @anthonygallina1 :sparkles: :thumbsup: :sparkles:
:star: 909 | @anthonygallina1 | http://www.freecodecamp.com/anthonygallina1
:star: 286 | @alfonsotech | http://www.freecodecamp.com/alfonsotech
:star: 189 | @jsilver1 | http://www.freecodecamp.com/jsilver1
anthonygallina1
@anthonygallina1
Feb 23 2016 09:51

@Rogue00

<!-- <div class="container"> -->

    <div class="container-fluid">

this works but make sure your div is closed

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:52
im sure it is
let me double check this code
can you guys see the change in the font on your end? maybe its my browser like you said altho im not sure how that would affect gitter
Rita Alfonso
@alfonsotech
Feb 23 2016 09:54
@Whiplash5057 I took a look but I don't know how to help you, sorry. I took a look at mine and it's a bit different. Maybe someone else can help....
Richard Andrews
@Whiplash5057
Feb 23 2016 09:55
@alfonsotech I got the mistake bro ...thanks anyway :smile:
CamperBot
@camperbot
Feb 23 2016 09:55
whiplash5057 sends brownie points to @alfonsotech :sparkles: :thumbsup: :sparkles:
:star: 287 | @alfonsotech | http://www.freecodecamp.com/alfonsotech
Rita Alfonso
@alfonsotech
Feb 23 2016 09:56
@Whiplash5057 Oh good! (p.s. I'm a lady coder :smile:)
Richard Andrews
@Whiplash5057
Feb 23 2016 09:57
@alfonsotech Sorry ... !!!:-)
Jeff
@OnlineJobsPlus
Feb 23 2016 09:57
haha. interesting @alfonsotech
Rita Alfonso
@alfonsotech
Feb 23 2016 09:57
Okay, I have to go work on my calculator now, laters! NP @Whiplash5057
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:57
thanks for all your help and advice @alfonsotech
CamperBot
@camperbot
Feb 23 2016 09:57
rogue00 sends brownie points to @alfonsotech :sparkles: :thumbsup: :sparkles:
:warning: rogue00 already gave alfonsotech points
Jeff
@OnlineJobsPlus
Feb 23 2016 09:58
that's the font showing @Rogue00
Richard Andrews
@Whiplash5057
Feb 23 2016 09:58
Damn u reached so far ...!!cool cool ..!! @alfonsotech
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:58
much appreciated :)
Rita Alfonso
@alfonsotech
Feb 23 2016 09:58
@Rogue00 totally welcome!
Maxime Pétrin
@Qcabove1
Feb 23 2016 09:59
5am clock yet, im off to sleep guys, night
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 09:59
i'm sorry what @Jsilver1 where do you mean?
Richard Andrews
@Whiplash5057
Feb 23 2016 10:00
Hey guys if I have to change a style like background-color on JS ....How could I do that ....??
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:00
ive just removed the individual class text center tags...not needed with the div class and css to align text center
Jeff
@OnlineJobsPlus
Feb 23 2016 10:00
no worries. i was just referring to your post earlier. the font u wanted is showing
@Rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:00
hmm that would be lovely
nope..not here still that old one blehh
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:03
it looks great in my codepen
Jeff
@OnlineJobsPlus
Feb 23 2016 10:03
forget abt it, it shows fine on codepen @Rogue00 :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:04
ok...
i do hate to waste a bunch of time on it
but i dont like mistakes either
the code is clean now..I learned a lot from this little fiasco in any case :)
thanks guys..you were a load of help :)
anthonygallina1
@anthonygallina1
Feb 23 2016 10:05
@Jsilver1 does rogue need container and then container-fluid both?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:06
I dont think so...but the container fluid makes it responsive right? and the div container gives the image a nice clean boundary
which is whyim using both
Daniel Tait
@4xDMG
Feb 23 2016 10:08
hey guys. Can anyone give me a hand with the Everything Be True intermediate algorithm challenge?
FitFoodt
@FitFoodt
Feb 23 2016 10:08
:eyes:
anthonygallina1
@anthonygallina1
Feb 23 2016 10:08
@Rogue00 I dont have atom on this system so cant easily check the tags
FitFoodt
@FitFoodt
Feb 23 2016 10:08
You are ahead of me..
Not to algor anything atm.
Daniel Tait
@4xDMG
Feb 23 2016 10:09
@FitFoodt Where are you up to?
Jeff
@OnlineJobsPlus
Feb 23 2016 10:10
not sure, maybe it depends on what he wants @anthonygallina1 ? container gives fixed width while container-fluid fills the available width
FitFoodt
@FitFoodt
Feb 23 2016 10:10
@4xDMG jQuery
Richard Andrews
@Whiplash5057
Feb 23 2016 10:11
@Jsilver1 got it thanks
CamperBot
@camperbot
Feb 23 2016 10:11
whiplash5057 sends brownie points to @jsilver1 :sparkles: :thumbsup: :sparkles:
:star: 190 | @jsilver1 | http://www.freecodecamp.com/jsilver1
FitFoodt
@FitFoodt
Feb 23 2016 10:11
Next challenge is "learning how to script tags and document ready work"
No clue what any of that means so, yeah.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:12
ive just double checked the font scripting
everything should be good
@anthonygallina1
anthonygallina1
@anthonygallina1
Feb 23 2016 10:12
@Jsilver1 thank you
CamperBot
@camperbot
Feb 23 2016 10:12
anthonygallina1 sends brownie points to @jsilver1 :sparkles: :thumbsup: :sparkles:
:star: 191 | @jsilver1 | http://www.freecodecamp.com/jsilver1
Daniel Tait
@4xDMG
Feb 23 2016 10:13
@FitFoodt You're nearly up to the fun parts
anthonygallina1
@anthonygallina1
Feb 23 2016 10:13
@Rogue00 thank you
CamperBot
@camperbot
Feb 23 2016 10:13
anthonygallina1 sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:star: 140 | @rogue00 | http://www.freecodecamp.com/rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:13
you guys have been huge helps...thanks a bunch @anthonygallina1 @Jsilver1 @alfonsotech
CamperBot
@camperbot
Feb 23 2016 10:13
rogue00 sends brownie points to @anthonygallina1 and @jsilver1 and @alfonsotech :sparkles: :thumbsup: :sparkles:
:warning: rogue00 already gave alfonsotech points
:warning: rogue00 already gave jsilver1 points
:warning: rogue00 already gave anthonygallina1 points
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:14
the font doesnt show here like i want but its working right..I think the italics setting may have something to do with why it doesnt show correctly in gitter
Daniel Tait
@4xDMG
Feb 23 2016 10:15
@Rogue00 Nice tribute page
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:15
do you think it looks pretty good overall? codewise along with general presentation...Like finished work?
anthonygallina1
@anthonygallina1
Feb 23 2016 10:15
@Rogue00 maybe your browser is chaching?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:16
thanks @4xDMG
CamperBot
@camperbot
Feb 23 2016 10:16
rogue00 sends brownie points to @4xdmg :sparkles: :thumbsup: :sparkles:
:star: 220 | @4xdmg | http://www.freecodecamp.com/4xdmg
FitFoodt
@FitFoodt
Feb 23 2016 10:16
@4xDMG I noticed!! The Basic FEDP (50hr) challenge bracket is next... :+1:
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:16
could be...its def overworked...probly due for a clean
Daniel Tait
@4xDMG
Feb 23 2016 10:18
@FitFoodt Good luck, mate!
FitFoodt
@FitFoodt
Feb 23 2016 10:22
@4xDMG :game_die: :game_die: I have better odds than Vegas with all these free resources at my(literally) fingertips!
Daniel Tait
@4xDMG
Feb 23 2016 10:23
@FitFoodt Haha +1:
oops
@FitFoodt :+1:
FitFoodt
@FitFoodt
Feb 23 2016 10:24
So far I have been able to solve all my own problems with the wiki, gitter and google. Just pay attention to this chat to see what people are asking as it might shortly be something I get stuck on in the future :worried:
Ashraful Islam
@iashraful
Feb 23 2016 10:25
@FitFoodt fear not mortal. For thee shall learneth sooo very much that thee shall be a master soon
Jeff
@OnlineJobsPlus
Feb 23 2016 10:26
haha
@FitFoodt your approach is awesome for getting unstuck: wiki, gitter and google :+1:
Daniel Tait
@4xDMG
Feb 23 2016 10:29
@FitFoodt thats a good idea.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:29
youre beginning your tribute and portfolio for bfed @FitFoodt
takes 5 minutes or less to set up codpen...I've been building my tribute most of the night....I think I'm finished with it now
FitFoodt
@FitFoodt
Feb 23 2016 10:30
@iashraful :smile:
Ashraful Islam
@iashraful
Feb 23 2016 10:31
I think the pair programming was a blessing, I learned a lot of good stuff from people
don't know why FCC decided to remove it
:worried:
FitFoodt
@FitFoodt
Feb 23 2016 10:32
@Rogue00 I've seen people posting their tributes but honestly did not want to ask if it was related to the hunger games :wink2:
Now I know!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:32
tbh i'm very used to ding things alone...its very refreshing to have people to assist...even with advice is a very great thing :)
well...mine looks like it could be related to the hunger games lol
but most dont look like that i think
Ashraful Islam
@iashraful
Feb 23 2016 10:33
^ each for his own idea man
:D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:34
thats one of the things I realy like....all the diversity...ideas and pov
its veryinteresting to see the different projects and angles different people use to meet the same ends
Ashraful Islam
@iashraful
Feb 23 2016 10:34
but... I find some people making super weird unprofessional portfolio pages which is kind of ... weird
I think I've spoken too much
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:35
the tribute I knew exactly what i was going to build
for my portfolio....I have no idea
I think I might skip the portfolio and start learning java for now
Ashraful Islam
@iashraful
Feb 23 2016 10:37
I'd suggest you go to dribbble and lookup some portfolio page designs and get design paralysis and finally feel bad about not being able to implement anything like those :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:37
ooo haha
I may do that
:P
Ashraful Islam
@iashraful
Feb 23 2016 10:37
^ I actually had that exprience
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:38
I'm sure youre not alone in that
Ashraful Islam
@iashraful
Feb 23 2016 10:38
there is actually term called dribblisation on the web
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:38
yes..people put letters together and call them words
sometimes they are...and sometimes not
dribblisation sounds like some basketball foul
Ashraful Islam
@iashraful
Feb 23 2016 10:39
dribblisation: over beautification of design without proper care for actual user experience or implementation possibilities
:D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:40
i see
ive taken some instruction covering user design experience
Ashraful Islam
@iashraful
Feb 23 2016 10:40
:open_mouth: you are turning out to be cooler than expected @Rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:41
altho most of my practical application for user design has been done with free software extensions...blogger etc
thanks @iashraful i was wondering when someone would notice :P
CamperBot
@camperbot
Feb 23 2016 10:41
rogue00 sends brownie points to @iashraful :sparkles: :thumbsup: :sparkles:
:warning: rogue00 already gave iashraful points
Ashraful Islam
@iashraful
Feb 23 2016 10:41
@Rogue00 don't flatter yourself :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:42
ah haha
if i get any flatter my belt will no longer hold my pants up
Ashraful Islam
@iashraful
Feb 23 2016 10:42
I shall watch some TV now and decide on a new design for my weather app now
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:42
nice
I'm not there yet but interested in building those projects
Ashraful Islam
@iashraful
Feb 23 2016 10:47
muahahaha ... wait till you meet ajax and async face of js :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:48
I'm not ready yet..but I will be when its time :)
Aleksis Zalitis
@pixenix
Feb 23 2016 10:48
Hello
anthonygallina1
@anthonygallina1
Feb 23 2016 10:49
@Rogue00 yes you will ;)
@pixenix Hello
anthonygallina1
@anthonygallina1
Feb 23 2016 10:52
@radheyIndia Awesome!
Good job!
Works good here.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:52
Yaaay!! @radheyIndia
the text flows below the text box here....maybe i should clean n restart this junk pc now
anthonygallina1
@anthonygallina1
Feb 23 2016 10:53
@Rogue00 :) hey it runs
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:54
it does..and its been good to me while ive been putting it through the paces these past months
anthonygallina1
@anthonygallina1
Feb 23 2016 10:54
LOL
Lionel Mangoua
@bobeezy
Feb 23 2016 10:54
Hi guys, i am stucked in challenge "Change the Font Size of an Element"
my instruction is: "Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%."
There is my code but it is still faillin

<style>
.red-text {
color: red;
font-size: 16px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

anthonygallina1
@anthonygallina1
Feb 23 2016 10:55
@bobeezy dont let this throw you Browser and Text zoom should be at 100% they are talking about your browser settings
Lionel Mangoua
@bobeezy
Feb 23 2016 10:56
by default my chrome browser is 100%
anthonygallina1
@anthonygallina1
Feb 23 2016 10:56
good
you got that part covered
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:56
same...I think all you need to do is give your p element a font size of 16px
Lionel Mangoua
@bobeezy
Feb 23 2016 10:57
am so confused now, because my code looks right, my browser is at 100%, but it is still failing
David Suilea
@Foryah
Feb 23 2016 10:57
well, it said to do that for the p tag right ? you do it for the class .red-text
isn't that the issue ?
anthonygallina1
@anthonygallina1
Feb 23 2016 10:58
Yes your code I dont see a p{ } in style
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:59
p {font-size: 16px;}
Lionel Mangoua
@bobeezy
Feb 23 2016 10:59
let me try it
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 10:59
it needs to be within your style element
and im useful....badabing
:)
would anyone care to share their portfolio with me so i can see some good examples?
Lionel Mangoua
@bobeezy
Feb 23 2016 11:01
There is instruction about that: "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)."
this is what i have done:
<style>
.red-text {
color: red;
font-size: 16px;
}
</style>
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:02
you need to create a seperate class for p font size
Lionel Mangoua
@bobeezy
Feb 23 2016 11:02
<p class="red-text">jfsglkdhgjl</p>
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:03
<style>
.red-text {
color: red;
font-size: 16px;
}
p {
</style>
shoot >.<
Lionel Mangoua
@bobeezy
Feb 23 2016 11:03
Am not suppose to create a new class for that: "Do not add a class attribute to your new p element."
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:03
<style>
.red-text {
color: red;
font-size: 16px;
}
p { font-size: 16px;}
</style>
Lionel Mangoua
@bobeezy
Feb 23 2016 11:03
-You need 2 p elements with Kitty Ipsum text.
-Make sure each of your p elements has a closing tag.
-Your p element should contain the first few words of the provided additional kitty ipsum text.
-Do not add a class attribute to your new p element.
-Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.
David Suilea
@Foryah
Feb 23 2016 11:04
<style>
 .red-text {
  color: red;
  font-size: 16px;
  }
 p {
  font-size:16px;
 }
</style>
Something like that
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:04
yep..like that
Lionel Mangoua
@bobeezy
Feb 23 2016 11:04
Thank you!!!! it works
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:05
anyone willing to share their portfolio so I can see good examples please?? @iashraful @Jsilver1 @anthonygallina1 @radheyIndia @Foryah
please and thank you :)
Mohamed
@mohamed-avatarinweb
Feb 23 2016 11:06
Guys I want to share my CV to see any mistakes, anybody have experience??
Is there someone who has experience?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:06
heyas @Foryah .. you sort of look like dr house :)
David Suilea
@Foryah
Feb 23 2016 11:06
I've not been active in free code camp for like... 6 months :) Not sure what you mean by portfolio ?
I do, don't I ? :)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:07
haha yea
David Suilea
@Foryah
Feb 23 2016 11:07
You kinda look like a pirate too :)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:07
ah haha...why yesh..yesh I do :P
David Suilea
@Foryah
Feb 23 2016 11:07
Hohoho, and a bottle of rum ! :)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:08
it suits me even if it doesnt resemble me much lol
anthonygallina1
@anthonygallina1
Feb 23 2016 11:09
@Rogue00 what?
And I thought you looked like that
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:09
well...building a developers portfolio is one of the beginners front end web developers projects
anthonygallina1
@anthonygallina1
Feb 23 2016 11:09
I have been decieved?
jk
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:09
ive finished my tribute so i'm wanting to see some good examples of personal portfolio...
tribute topic format was easy...a professional portfolio on the other hand....
o youve ont been decievd @anthonygallina1 i drink rum and my monkey brings me smokes regularly :P
anthonygallina1
@anthonygallina1
Feb 23 2016 11:11
@Rogue00 my nephew was in a few pirates of the caribean films
charles grisham stunts
does that count?
Arrr the Black Pearl
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:14
interesting tidbit i learned recently...in the carribean islands...during the pirate hey days around 1600-1700s.....pirates pretty much ruled the ports in the carribean...nassau, port royal, tortuga etc...Pipes were very inexpensive and also easily broken....back then they would give free pipe when you bought tobacco for smoking...and brothels/pubs/taverns would often supply new pipes to patrons who had broken theirown....today pipes, pieces and whole artifacts, are found quite frequently in the carribean islands...all over the place so I understand
I'm a wealth of odd historical knowledge...sort of a hisory nerd among other things
history*
anthonygallina1
@anthonygallina1
Feb 23 2016 11:15
We sail for Tortuga!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:15
tortuga actually sank
is no more
anthonygallina1
@anthonygallina1
Feb 23 2016 11:16
Well that changes everything.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:16
the entire pirate population that inhabited that island was also lost
haha yea..
anthonygallina1
@anthonygallina1
Feb 23 2016 11:16
:)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:16
history is full of interesting tidbits :)
a person could learn a lot from learning history...history...as you know..often repeats itself..
mainly because most forget the lessons of the past
i feel pretty good about my tributepage
i think i might skip building my professional portfolio for now and move into learning java
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:20
For all you pirate lovers -
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:20
uh oh..thats me
actually its the wenches i loves not the pirates but go ahead
:P
Sufiyan
@ymohammad
Feb 23 2016 11:21
@Rogue00 could you please share your tribute page? I would like to see.
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:21
The republic of pirates by Colin Woodard is a great history on the topic.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:21
that actually doesnt sound familer...I've watched tons of documentaries...I'll need to check that one out :)
Stefan
@st3fun1
Feb 23 2016 11:22
wow very nice @Rogue00 i like the font
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:23
is it about the island of nassau or port royal? 2 different time periods and ages of pirates there
hank you @st3fun1
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:23
My sister had a pirate wedding in key west a couple of years back. Pirate ship. Pirate captain. Wrenches galore and we even shot my dads ashes at unsuspecting yachters- it was quite spectacular.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:23
thank you @st3fun1
CamperBot
@camperbot
Feb 23 2016 11:23
rogue00 sends brownie points to @st3fun1 :sparkles: :thumbsup: :sparkles:
:star: 132 | @st3fun1 | http://www.freecodecamp.com/st3fun1
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:24
sweet!! I'm originally from Tamp Bay...gasparilla the pirate ship jose gaspar sits in the canal
huge festival in feb
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:25
It's Caribbean based. Been a couple of years.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:25
i love pirate lore as much as i do the knights of old and the templars etc....
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:25
Mot read like a novel. But told an interesting history.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:25
yea i bet...ive been to the keys but thats as far into the carribean as ive managed
i know a fair bit about their history....ive spent more time studying the templars and the early american conflicts tbh...still...i loves some pirate lore
n booty ah haha .. who doesnt love booty?
:P
i have a pirate flag flying now on my flagpole that says "Surrender the Booty" ah haha
Joe Trey - Adventure Hermit
@AdventureHermit
Feb 23 2016 11:31
Good point. I've been to carribean. Bahamas. St. Thomas and St. John. Beautiful places. I'd have no issue checking out in either of the "saints"
Hopping a flight back to denver - and snow - right now - So much for that fantasy!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:32
I'm living in indiana now
fortunately the weather is quickly turning to spring for us here...I'm way tired of winter
Jeff
@OnlineJobsPlus
Feb 23 2016 11:39
move to tropical countries, like ours (Philippines) :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:40
that takes more money than I have now @Jsilver1
and tbh i think id love living in the carribean but I'm not sure I could handle the bill
the phillipines would probably be great too but again..that money thing
Kristada673
@Kristada673
Feb 23 2016 11:42
Hey guys, I am in need of some help here. So, I am doing the tutorial on HTML coding, and in one of them, I need to write code to diminish the size of an image. I am writing this code:
<style>
.smaller-image {
width: 100px;
}
</style>
But it doesn't seem to work. I am struggled for a few minutes with it. Can anyone help me out? Thanks!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:44
what do you mean by diminish? reduce the size or reduce gradually?
Kristada673
@Kristada673
Feb 23 2016 11:44
reduce
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:44
offhand i would say reduce the pixel attribute
60px 40px im not sure what the challenge requires
Balint Kata
@balintkatt
Feb 23 2016 11:45
apply the class to the img element
@Kristada673
Kristada673
@Kristada673
Feb 23 2016 11:46
Ok, got the error! I defined that class alright, but I was not applying the class to the img element. Thanks @balintkatt Stupid me... :(
CamperBot
@camperbot
Feb 23 2016 11:46
kristada673 sends brownie points to @balintkatt :sparkles: :thumbsup: :sparkles:
:star: 24 | @balintkatt | http://www.freecodecamp.com/balintkatt
Balint Kata
@balintkatt
Feb 23 2016 11:46
your welcome :) @Kristada673
David Suilea
@Foryah
Feb 23 2016 11:47
Hehe @balintkatt , you applied Occams's Razor to figure that one out ? :)
Balint Kata
@balintkatt
Feb 23 2016 11:48
nope, I was doing that part like 10 minutes before and got tha same problem :P
David Suilea
@Foryah
Feb 23 2016 11:49
:D Usually nobody thinks about the most obvious reason :D
Solberg
@BuLbaR
Feb 23 2016 11:49
@balintkatt good work =P
Jeff
@OnlineJobsPlus
Feb 23 2016 11:51
@Rogue00 the Philippines could be a cheaper version of the carribean. we are surrounded by water all over. we have some of the best beaches in the world :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:52
I can imagine...I would love to visit...and I probably would never want to leave
@Jsilver1
Jeff
@OnlineJobsPlus
Feb 23 2016 11:54
you wouldn't want to leave because people are nice in general. and your money will go a long way. live like a pirate, and maybe even buy some islands :D
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:55
that would be awesome ah haha
seriously
maybe ill make a lot of money and someday Ill be headed your way @Jsilver1 :)
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 11:56
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>

  <p>Click here for <a href="#">cat photos</a>.</p>

  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>

  <img src="http://bit.ly/fcc-running-cats" class="img-responsive">
  <div class="col-xs-4">
  <div class="row">
  <button class="btn btn-block btn-primary col-">Like</button>
  <button class="btn btn-block btn-info">Info</button>
  <button class="btn btn-block btn-danger">Delete</button>
  </div>
  <div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>

    <button type="submit">Submit</button>

  </form>
</div>
Jeff
@OnlineJobsPlus
Feb 23 2016 11:56
haha, you don't need a lot to live here :D @Rogue00
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 11:57
the proplem is : Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:57
yes but it takes a lot to reloate from the united states
relocate
it costs us money coming and going over here
Solberg
@BuLbaR
Feb 23 2016 11:57
@MahmoudHmaid make a <div> element and give it the class "col-xs-4"
Remember to close the <div>
Do this for all Buttons
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 11:58
show me code up
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 11:58
maybe someday I will be able to visit at least
faraz
@silentarrowz
Feb 23 2016 11:58
hi, I have almost completed my weather app. but it seems like it's giving me the wrong temperature. could you tell me if there's anything wrong with my code??
take a look here - http://codepen.io/silentarrowz/pen/YwoGMB
Solberg
@BuLbaR
Feb 23 2016 11:58

<button class="btn btn-block btn-primary col-">

Here you have a bit to much code

Jeff
@OnlineJobsPlus
Feb 23 2016 11:58
inside <div class=row>, you need separate divs for each button
Gabriele Sani
@gabryatfendor
Feb 23 2016 11:59
sorry to bother: on lesson in JS about map method to iterate array the website keep saying I should not change original array
Jeff
@OnlineJobsPlus
Feb 23 2016 11:59
@MahmoudHmaid
Gabriele Sani
@gabryatfendor
Feb 23 2016 11:59
here’s my code

var oldArray = [1,2,3,4,5];

// Only change code below this line.

var newArray = oldArray;

oldArray.map(function(val,index){newArray[index] = val+3;});

Solberg
@BuLbaR
Feb 23 2016 11:59
@MahmoudHmaid <div class= col-xs-4> your button </div>
Did you get it @MahmoudHmaid ?
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:00
don't work
show me code
Solberg
@BuLbaR
Feb 23 2016 12:01
You must put <div> before the button and </div after the butten
and then assign it a class
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:01
 <div class="col-xs-4">
  <div class="row">
  <button class="btn btn-block btn-primary">Like</button>
  <button class="btn btn-block btn-info">Info</button>
  <button class="btn btn-block btn-danger">Delete</button>
  </div>
  </div>
Solberg
@BuLbaR
Feb 23 2016 12:02
yes that is right
but you have to do it for EACH button
now you have done it with all three buttons
Alex
@vici30
Feb 23 2016 12:02
Hey everyone. I want to have a centered image that's inside a div which is exactly the same size as the image, except for the bottom which is 25px larger (so that I have a place to write a caption for that image). How do I achieve this with HTML and CSS?
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:02
1-Your buttons should all be nested within the same div element with the class row. <<<<<<<<<<<<<< this true
2-Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4. <<<<<<<<<<this false
Solberg
@BuLbaR
Feb 23 2016 12:02
one <div> with class for each button
and close it after each button
Yes
@MahmoudHmaid that means you should make a DIV for each button. 3 of them
not one for 3 buttons but 3 for 3
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:03
ok, i am try now
Solberg
@BuLbaR
Feb 23 2016 12:03
@MahmoudHmaid good luck =)
Alex
@vici30
Feb 23 2016 12:04
@BuLbaR help? :D
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:04

$(document).ready(function() {
$("button").addClass("");
$(".btn").addClass("animated shake");
$("#target1").addClass("btn-primary");
$("button").addClass("");

});

how Only add one class with each of your three selectors.?

Solberg
@BuLbaR
Feb 23 2016 12:04
@vici30 ofcourse
Alex
@vici30
Feb 23 2016 12:04
@BuLbaR I want to have a centered image that's inside a div which is exactly the same size as the image, except for the bottom which is 25px larger (so that I have a place to write a caption for that image). How do I achieve this with HTML and CSS?
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:04
@BuLbaR thanks
CamperBot
@camperbot
Feb 23 2016 12:04
mahmoudhmaid sends brownie points to @bulbar :sparkles: :thumbsup: :sparkles:
:star: 239 | @bulbar | http://www.freecodecamp.com/bulbar
Solberg
@BuLbaR
Feb 23 2016 12:04
@no problem !
@MahmoudHmaid no problem!
Alex
@vici30
Feb 23 2016 12:05
@BuLbaR I tried making a container class but I can't get the sides of the div to not be as wide as my page
Mahmoud Hemaid
@MahmoudHemaid
Feb 23 2016 12:05
^^"
Alex
@vici30
Feb 23 2016 12:05
@BuLbaR I tried display:block and text-align:center
Solberg
@BuLbaR
Feb 23 2016 12:05
@vici30 you can use margin-left and margin-right
margin-left 20%;
inside the class in CSS
http://codepen.io/bulbar/pen/rxRRwL Look at this code and see if you can get some inspiration
Alex
@vici30
Feb 23 2016 12:06
@BuLbaR ok, but that uncenters my image
and yes, I am trying to make the tribute page, without looking at its code unless I'm really stuck :D
Solberg
@BuLbaR
Feb 23 2016 12:07
oh
you are doing the tribute page
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:07

Only add one class with each of your three selectors.

$("button").addClass("");
$(".btn").addClass("animated shake");
$("#target1").addClass("btn-primary");

Solberg
@BuLbaR
Feb 23 2016 12:07
yea, then you should not look at the code @vici30
Alex
@vici30
Feb 23 2016 12:07
@BuLbaR I know
That's why I'm here. Been googling for 2 hours
Solberg
@BuLbaR
Feb 23 2016 12:08
@vici30 if you make a frame and then use margin-left: 10%; and margin-right: 10%; then the frame should be center and adjust for mobile view
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:09
will this work for what youre after @vici30
<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
Solberg
@BuLbaR
Feb 23 2016 12:09
@vici30 if you put a picture inside the frame end give it the same margin on each side then the picture wil be center
adjust margin for your fitting
Alex
@vici30
Feb 23 2016 12:09
@BuLbaR Thanks, it worked!
CamperBot
@camperbot
Feb 23 2016 12:09
vici30 sends brownie points to @bulbar :sparkles: :thumbsup: :sparkles:
:star: 240 | @bulbar | http://www.freecodecamp.com/bulbar
Solberg
@BuLbaR
Feb 23 2016 12:09
@vici30 glad to help
!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:10
sweet! :)
Solberg
@BuLbaR
Feb 23 2016 12:10
@Rogue00 its the first time i sit and help =P its good.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:11
same...first time ive really known enough to help anyone myself
@BuLbaR
I'm still new :P
rockin my tribute tho ah haha
Solberg
@BuLbaR
Feb 23 2016 12:11
@Rogue00 yea me too
@Rogue00 kinda stuck in javascript.
Kris Tarling
@KrisTarling
Feb 23 2016 12:12
amazing.. chrome crashed and codepen autosaved a blank page over my pen :'(
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:12
im not sure if i should do my portfolio first...or maybe wait and start the java challenges
naah @KrisTarling . check yuor settings
you should find your pen and be able to re open nd edit
Kris Tarling
@KrisTarling
Feb 23 2016 12:16
@Rogue00 Tried, failed. It emptied all of the fields when it crashed and saved them for some reason
and yeah, it seemed odd to make a portfolio with nothing in it
Jeff
@OnlineJobsPlus
Feb 23 2016 12:18
@KrisTarling try to keep a copy regularly next time :D
Kris Tarling
@KrisTarling
Feb 23 2016 12:18
@Jsilver1live and learn
LouLuigi
@LouLuigi
Feb 23 2016 12:19
how do I nest an anchor element inside a p element
Solberg
@BuLbaR
Feb 23 2016 12:20
assign it a class in css maybe? <p class=anchorClass>
Kris Tarling
@KrisTarling
Feb 23 2016 12:24
@LouLuigi `<p><a href="link-here">link text here</a>regular text here</p>
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:24
Dang @KrisTarling I'm sorry to hear that bud :(
sorry for the late reply...phone rang
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:27

Target the same element with multiple jQuery Selectors

Only add one class with each of your three selectors.

how?
Alex
@vici30
Feb 23 2016 12:29
@mohannadsawalhi example (place this in document ready function):
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
@mohannadsawalhi It means that you can target the same thing base on its id, class or name
@mohannadsawalhi And you target stuff with $(" ")
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:31
yeah
Alex
@vici30
Feb 23 2016 12:31
@BuLbaR U still there?
@mohannadsawalhi does it work?
Solberg
@BuLbaR
Feb 23 2016 12:32
@vici30 bearly =P
Alex
@vici30
Feb 23 2016 12:32
@BuLbaR one more thing
Solberg
@BuLbaR
Feb 23 2016 12:32
@vici30 yea
Alex
@vici30
Feb 23 2016 12:32
@BuLbaR I'm trying to center my bullet list, but keep the text aligned left
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:32
not work
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:32
you pull an all nighter building tribute same as me @BuLbaR
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:32
$("button").addClass("animated");
$(".btn").addClass("animated shake");
$("#target1").addClass("btn-primary");
$("button").addClass("");
Solberg
@BuLbaR
Feb 23 2016 12:33
@vici30 the bullet list is a real pain
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:33
is afternoon now where you live isnt it?
Solberg
@BuLbaR
Feb 23 2016 12:33
@Rogue00 i did.
@Rogue00 yea
Alex
@vici30
Feb 23 2016 12:33

@mohannadsawalhi ```

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
});
</script>
```

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:33
just &30 am for me but will be a long day shoo
hmm 7:30 am*
Alex
@vici30
Feb 23 2016 12:34
@BuLbaR why? looks simple. I tried nesting stuff, but it always get overridden
Solberg
@BuLbaR
Feb 23 2016 12:34
@vici30 the bullet list can be put inside a frame insde your main frame. and then use margin to allign the frame boarders inside your main frame. Pur the bulletlist inside that inner frame
i think that is a "too complicated" way of doing things but i found it perfect for html design pages
mohannadsawalhi
@mohannadsawalhi
Feb 23 2016 12:35
thank you so much @vici30 :*
CamperBot
@camperbot
Feb 23 2016 12:35
mohannadsawalhi sends brownie points to @vici30 :sparkles: :thumbsup: :sparkles:
:star: 130 | @vici30 | http://www.freecodecamp.com/vici30
Alex
@vici30
Feb 23 2016 12:35
@BuLbaR k I'll try. do I put the <ul> or the <li> elements inside the inner frame?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:35
$("button").addClass("animated shake");
Alex
@vici30
Feb 23 2016 12:35
@mohannadsawalhi :*
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:35
i think you can put those elements together instead of in seperate brackets
Solberg
@BuLbaR
Feb 23 2016 12:36
@vici30 yea!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:37
also..someone gave me a nice tip for the bullet points
Solberg
@BuLbaR
Feb 23 2016 12:37
yea give
i think they are a boitch
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:37
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
add this to your css
Damaris Muange
@ndush
Feb 23 2016 12:38
how to create a new button element with the text "Like"
Solberg
@BuLbaR
Feb 23 2016 12:38
first create a button element
Alex
@vici30
Feb 23 2016 12:39
@Rogue00 doesn't work. actually breaks it (removes bullet points). Also still not alligned
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:39
@ndush <button class="btn">Like</button>
Solberg
@BuLbaR
Feb 23 2016 12:39
have you done that @ndush
what he said
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:39
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:39
@ndush If you want to add more class than add it.
Damaris Muange
@ndush
Feb 23 2016 12:39
yea
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:40
how are you trying to aling @vici30 mine is center alinment
body {
background-color: #d3d3d3; text-align: center
}
in the css
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:41
@Rogue00 Nice decoration. But your font is too much small to read. Increase the font-size.
Alex
@vici30
Feb 23 2016 12:42
@Rogue00 I need the text aligned to the left, but the entire block to be centered
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:43
is that better?
@Minhazul-islam
i think to do that you will need to create bootstrap columns @vici30
and then use margin settings
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:47
@Rogue00 That looks great!
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 12:47
thank you @Minhazul-islam
CamperBot
@camperbot
Feb 23 2016 12:47
rogue00 sends brownie points to @minhazul-islam :sparkles: :thumbsup: :sparkles:
:star: 204 | @minhazul-islam | http://www.freecodecamp.com/minhazul-islam
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:48
@vici30 Do you want container center and the paragraph at left?
Alex
@vici30
Feb 23 2016 12:55
@Minhazul-islam Yes
Minhazul Islam
@Minhazul-islam
Feb 23 2016 12:58
@vici30 If you are using bootstrap than every container by default will be centered. For text-alignment left give class text-left to your element, such as <p class="text-left" >dummy text</p>
Alex
@vici30
Feb 23 2016 13:00
@Minhazul-islam so I should boostrap my <ul> ?
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:00
@vici30 I didn't understand.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:02
if you put your ul into a bootstrap container it will be auto centered
Alex
@vici30
Feb 23 2016 13:03

@Minhazul-islam

<div class ="row">
<div class=" something here? ">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
</div>

I mean like this?

Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:03
then you will need to use the text-left as suggested
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:04
@vici30 give class="text-left" to your <ul> element
Alex
@vici30
Feb 23 2016 13:06
@Minhazul-islam Doesn't work. Text is still centered (I'm using body{ text-align:center} in my CSS
@Minhazul-islam Actually, I had made a mistake. But it still doesn't work. Text is aligned left, but the block is not centered :(
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:07
@vici30 Are using codepen. If, than please give your link here. I'll check
Alex
@vici30
Feb 23 2016 13:08
@Minhazul-islam ok but it's ugly I started yesterday :)
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:08
@vici30 It's allright. You will do better soon.
Alex
@vici30
Feb 23 2016 13:08
@Minhazul-islam I hope so :)
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:09
stick with it and you will @vici30
i felt good about my tribute but now to portfolio I am feeling overwhelmed
Alex
@vici30
Feb 23 2016 13:09
@Rogue00 will do
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:10
I am only just in front of you...we are in this together buddy :)
Alex
@vici30
Feb 23 2016 13:10
@Rogue00 Haha I just wanted to say that to you
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:10
@vici30 Your ul element is at left. What's the problem?
Luciano Hakime Dutra
@lucianohd
Feb 23 2016 13:11
@vici30 i find it great! just need some little ajustments :D
hstaoqian
@hstaoqian
Feb 23 2016 13:11
hello
Alex
@vici30
Feb 23 2016 13:11
@Minhazul-islam I want it to be centered, but with the text aligned to the left (of that centered block). Am I clear enough? :worried:
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:11
@hstaoqian Hello.
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:11
I think it looks pretty good too
Alex
@vici30
Feb 23 2016 13:11
@hstaoqian Hi
@Rogue00 What, mine? pff
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:12
o ha..dont be modest
where is the last awesome web page you coded?
Alex
@vici30
Feb 23 2016 13:12
@Rogue00 Whaat, it looks nothing like the example they have
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:12
neither does mine
Alex
@vici30
Feb 23 2016 13:13
@Rogue00 I have never coded a web page
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:13
and neither have i
Alex
@vici30
Feb 23 2016 13:13
@Rogue00 Until now I guess
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:13
until this
my first one too...not as perfect as id like...but we have plenty of time to perfect these page techniques
Alex
@vici30
Feb 23 2016 13:14
@Rogue00 Haha cool
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:14
believe me..when you begin looking at building portfolio next...you will wish you were doing tribute again
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:15
@vici30 I hope you are looking for this.....
http://codepen.io/Minhazul-Islam/pen/PZMGVg?editors=1100
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:15
btw im not really a deadpool fan but i like the theme of your page
Luciano Hakime Dutra
@lucianohd
Feb 23 2016 13:15
i'll first finish my javascript then i'll try the tribute...
Alex
@vici30
Feb 23 2016 13:15
@Rogue00 Oh I did that because I had no inspiration
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:15
@vici30 You have many typo in your code.
Alex
@vici30
Feb 23 2016 13:15
@Minhazul-islam Yes! How did you do that?
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:16
i knew already what my tribute would be....i even wrote a fictional background to complete what id planned
a wonderful combination of my skills...this particular project was much fun :)
he forked your project and took a copy for his own
:P
Alex
@vici30
Feb 23 2016 13:17
@Rogue00 Nah, I meant the actual alignment in the code, but I found it
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:17
oh nice :)
Alex
@vici30
Feb 23 2016 13:17
@Minhazul-islam Oh well, I need to spell-check then
Luciano Hakime Dutra
@lucianohd
Feb 23 2016 13:17
@Rogue00 when i read the black knight i though of the one on monty python
Ghost
@ghost~56bd2077e610378809c105cd
Feb 23 2016 13:17
well my information is fiction except for the code of chivalry
i hoped to entice people to read
Minhazul Islam
@Minhazul-islam
Feb 23 2016 13:18
@vici30 It's bootstrap grid system. Make another div after <div class="row">. And give it class <div class="col-sm-10 col-sm-offset-1">. It means your div will have one column freespace at left and right. To know more visit bootstrap official site