These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Jan 2017
Adam Morris
@Adam-Morris
Jan 07 2017 00:03
Anyone got any ideas on how to center my buttons? http://codepen.io/Amorris/pen/KapqZG
Adrián José Díaz Güilamo
@adrian96guilamo
Jan 07 2017 00:04
Please check if there's any <div> </div > left
<!-- Search bar and submit button -->
    <div class="row"> <!-- filas -->
        <div class="col-xs-7"> <!-- columna -->
            <input type="text" class="form-control" placeholder="cat photo URL" required>
            <!-- required : require input from user -->
        </div>
        <div class="col-xs-5">
            <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> <!-- <i></i> to insert icons --> Submit</button>
        </div>
  </div>
Adam Morris
@Adam-Morris
Jan 07 2017 00:04
Are you asking if you have closed all of your open <div>'s?
If you are, then yes.
You have
Adrián José Díaz Güilamo
@adrian96guilamo
Jan 07 2017 00:05
it keeps telling me this: Make sure each of your div elements has a closing tag.
Adam Morris
@Adam-Morris
Jan 07 2017 00:08
I'm not sure. Looks okay to me
Pieter Stokkink
@forkerino
Jan 07 2017 00:13
Is this all your code @adrian96guilamo ? Or is there more on the page?
Reggie
@Reggie01
Jan 07 2017 00:13
@adrian96guilamo are you using a lint tool? I checked using html validator. Had to add html, head, title, body tags first, then it was valid
Adrián José Díaz Güilamo
@adrian96guilamo
Jan 07 2017 00:13
It's just part of it @forkerino
Pieter Stokkink
@forkerino
Jan 07 2017 00:14
@adrian96guilamo then probably some <div> was still open above it and you need to close it.
Adam Morris
@Adam-Morris
Jan 07 2017 00:15
Probably not the best idea to post it in the chat, but ok.
Adrián José Díaz Güilamo
@adrian96guilamo
Jan 07 2017 00:17
sorry , my mistake It was supose to be the last part XD
Reggie
@Reggie01
Jan 07 2017 00:18
@adrian96guilamo validator says your <div class="container-fluid"> is still open
Nick McCord
@Thrillxlordz
Jan 07 2017 00:22
How can i make a link that takes you to twitter, with a message already typed and ready to be tweeted?
Adrián José Díaz Güilamo
@adrian96guilamo
Jan 07 2017 00:22
@Reggie01 you are life saver ... no words
Nick McCord
@Thrillxlordz
Jan 07 2017 00:24
@Adam-Morris Thanks!
CamperBot
@camperbot
Jan 07 2017 00:24
:cookie: 121 | @adam-morris |http://www.freecodecamp.com/adam-morris
thrillxlordz sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
Nick McCord
@Thrillxlordz
Jan 07 2017 00:33
how can i include a variable in an href link?
Adam Morris
@Adam-Morris
Jan 07 2017 00:33
What do you mean "a variable"?
Nick McCord
@Thrillxlordz
Jan 07 2017 00:34
this is about me putting something in a tweet message bar, and i have several variables that are randomly selected to tweet. These variables are just strings like "Hello World" or something like that
Adam Morris
@Adam-Morris
Jan 07 2017 00:34
I'm not sure sorry
Nick McCord
@Thrillxlordz
Jan 07 2017 00:35
thanks anyways
Matthew Carstensen
@Nomnisang
Jan 07 2017 00:57
Good evening! I've made it to Challenge 1 where I'm supposed to build a tribute page using Code Pen. Does this challenge require me to feature a true person, such as an historical figure, or can I feature a fictional character if I so choose?
Adam Morris
@Adam-Morris
Jan 07 2017 00:57
On the left hand side of your page, It has "User Story". Those are the only requirements.
Yu could do it about your pet rock if you wanted to
Matthew Carstensen
@Nomnisang
Jan 07 2017 00:59
Awesome! I'll mess about and see what I come up with. Thank you!
Adam Morris
@Adam-Morris
Jan 07 2017 00:59
No problem
Krikor Ailanjian
@kailanjian
Jan 07 2017 01:02
For the tictactoe game it is ok if the computer plays badly right?
like randomly
YassineZel
@YassineZel
Jan 07 2017 01:17
Hello , a web page a created recently is being displayed too small or too large for other computer screans , whats the easiest way to fix that without bootstrap ? like style="width:100%" in the body would work ? thanks in advance
i created*
Nick McCord
@Thrillxlordz
Jan 07 2017 01:26
I made a link to send a tweet, but the tweet i want to send has semicolons in it. For some reason the sentence i want to tweet gets cut off at the semicolon. Any help in fixing this issue would be nice
Adam Morris
@Adam-Morris
Jan 07 2017 01:26
can you link your code or codepen?
buiphuking
@buiphuking
Jan 07 2017 01:26
has anyone has free time, i want to ask something..... ????????
YassineZel
@YassineZel
Jan 07 2017 01:27
my question is answered thx anyway
Adam Morris
@Adam-Morris
Jan 07 2017 01:27
@buiphuking Sure, I will try to help you.
@YassineZel What was the solution?
buiphuking
@buiphuking
Jan 07 2017 01:28
http://pathlab.webhubz.com/
the element with backgroud-color: blue above footer, how to do it, i mean jquery or css, plz guide my a little bit
Adam Morris
@Adam-Morris
Jan 07 2017 01:31
In your CSS file, if your element has a class target you can do .target { <!-- CSS stuff --> } and that will change the styling of the element
DevRice
@DevRice
Jan 07 2017 01:31
Hello! Can someone help me create a button to tweet out a quote on the "Build a Random Quote Machine" project?
Max Kula
@maxen3
Jan 07 2017 01:32
Guys i need help with jquery. I cant get the fadeIn function to work
@maxen3 Link to your code / codepen?
Max Kula
@maxen3
Jan 07 2017 01:32
yeah
ohh wait
i figured it out now
Adam Morris
@Adam-Morris
Jan 07 2017 01:34
@maxen3 Nice!
Max Kula
@maxen3
Jan 07 2017 01:34
when the dislpay: none; you cant hover the element right?
DevRice
@DevRice
Jan 07 2017 01:34
@Adam-Morris Hm.. I don't think so because I think you have to do the button from JavaScript or JQuery because the quote is located there
Adam Morris
@Adam-Morris
Jan 07 2017 01:34
I don't believe so.
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:35
Hello, ive been getting stuck on the portfolio zipline ; I want to place different hover styles onto my different link elements but i must forgetting or doing something incorrectly. this is my first time asking in chat room for anything so excuse my novelty.
Max Kula
@maxen3
Jan 07 2017 01:35
Well that was stupid of me, sry for wasting time.
Adam Morris
@Adam-Morris
Jan 07 2017 01:36
@N3M3SIS20 Can you please link your code / codepen?
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:36
sure
DevRice
@DevRice
Jan 07 2017 01:38
Does anyone know how to create a button to tweet out a quote in the "Build a Random Quote Machine" project? Here's the link to my code: http://codepen.io/DevRice/pen/LxVWWj/
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:38
@Adam-Morris
Adam Morris
@Adam-Morris
Jan 07 2017 01:38
?
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:39
@Adam-Morris it is a mock up. fyi the picture and words have no meaning other than practice(except for the links)
Adam Morris
@Adam-Morris
Jan 07 2017 01:41
So, what are you wanting?
When you hover over the buttons you want to have a hover effect?
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:41
yes
Adam Morris
@Adam-Morris
Jan 07 2017 01:43
Ah, to do that you add this to your CSS (using your "twitter" button as an example): #twitter:hover { color: blue; } that will make the text blue when you hover over the button.
If you want to make the transition between those two more smooth, you can use transitions: http://www.w3schools.com/css/css3_transitions.asp
Jonathan Tuer
@N3M3SIS20
Jan 07 2017 01:50
Ah yes i see, thank you!. i found it on w3schools as well but must have overlooked that. This transition tutorial looks certainly useful as well, thank you again.
Adam Morris
@Adam-Morris
Jan 07 2017 01:50
No problem
buiphuking
@buiphuking
Jan 07 2017 01:56
@Adam-Morris can boostrap do that?
Adam Morris
@Adam-Morris
Jan 07 2017 01:57
@buiphuking Do what?
buiphuking
@buiphuking
Jan 07 2017 01:57
http://pathlab.webhubz.com/
the thing above footer
Adam Morris
@Adam-Morris
Jan 07 2017 01:58
I'm not sure what you mean, you can do that with regular HTML and CSS.
buiphuking
@buiphuking
Jan 07 2017 01:59
can you send me a link guide how to do this?
Adam Morris
@Adam-Morris
Jan 07 2017 02:00
I'm not really sure how to help, this is all I can think of http://www.w3schools.com/tags/tag_footer.asp
Alan Sato
@Halfcreative
Jan 07 2017 02:34
Hey all, I'm having trouble calling the OpenWeatherMaps API, due to the different origin. Someone pointed me to try JSONP but I'm not quite sure how to implement it into my code. Here's my codepen with a bunch of comments explaining what i do. I've already scrapped the crappy implementation i was attempting as it didnt seem remotely close to what i needed. https://codepen.io/halfcreative/pen/BpaPKx?editors=0010
Christopher Ryder
@cryder9898
Jan 07 2017 02:44
somone who has done wikipedia viewer, I'm doing something wrong with my getJSON function http://codepen.io/cryder9898/pen/oBgdQP
Alan Sato
@Halfcreative
Jan 07 2017 02:45
@cryder9898 you're having the same error as me
@cryder9898 can't make http requests while using https. the workaround is jsonp. In your case though i think you can just add an s to the url as wikipedia might support it
I'm stuck on how to implement jsonp though
Christopher Ryder
@cryder9898
Jan 07 2017 02:48
@Halfcreative yes, getting jsonp is just using the callback=? in the url from what stackoverflow says http://stackoverflow.com/questions/3873636/no-response-from-mediawiki-api-using-jquery
but i'm doing something wrong
this is what i've been looking at which seems to indicate theres a little more to it
this other resource might help you too
lmk if you make any developments
DJ Pelland
@dna113p
Jan 07 2017 03:08
@cryder9898 @Halfcreative There are some weird caveats to doing requests from one domain to another or from http to https in order to protect users.
Alan Sato
@Halfcreative
Jan 07 2017 03:09
@dna113p at this point im just gonna switch api's to one that supports https
Christopher Ryder
@cryder9898
Jan 07 2017 03:09
@Halfcreative I got the JSON working
Alan Sato
@Halfcreative
Jan 07 2017 03:10
@cryder9898 can i see?
just a star?
oh origin=*?
Christopher Ryder
@cryder9898
Jan 07 2017 03:10
Alan Sato
@Halfcreative
Jan 07 2017 03:11
i don't think that will help me, as i can't make a https call
Christopher Ryder
@cryder9898
Jan 07 2017 03:11
@Halfcreative why
i took out the "s" and it still works
Alan Sato
@Halfcreative
Jan 07 2017 03:12
@cryder9898 the API for OpenWeatherMaps doesnt support it
Christopher Ryder
@cryder9898
Jan 07 2017 03:12
ahhh
DJ Pelland
@dna113p
Jan 07 2017 03:12
@Halfcreative Yeah I remember the weird thing with the weather one was that you had to load unsecurely with http in order to access the free open weather api... which then prevents you from using the browser geolocation which must be used on https. My solution was to use an unsecure IP location api rather than using the built in geolocation.
Christopher Ryder
@cryder9898
Jan 07 2017 03:12
@Halfcreative I used weather underground api
Alan Sato
@Halfcreative
Jan 07 2017 03:13
@dna113p @cryder9898 gonna try APIXU , cus it wa linked earlier today
@cryder9898 @dna113p thanks for working with me tho
CamperBot
@camperbot
Jan 07 2017 03:13
halfcreative sends brownie points to @cryder9898 and @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @cryder9898 |http://www.freecodecamp.com/cryder9898
:cookie: 348 | @dna113p |http://www.freecodecamp.com/dna113p
Christopher Ryder
@cryder9898
Jan 07 2017 03:19
I have a question, why doesnt my query value return the text i enter in the search box http://codepen.io/cryder9898/pen/oBgdQP
Alan Sato
@Halfcreative
Jan 07 2017 03:20
@cryder9898 you're calling the wikipedia search for dog
@cryder9898 gotta change the url to match the search
Christopher Ryder
@cryder9898
Jan 07 2017 03:21
yes, but i have a console.log(query) which should return what I type inside the textbox, right? @Halfcreative
when I run it it shows "" in the console
Alan Sato
@Halfcreative
Jan 07 2017 03:23
im getting a mixed content error from your codepen, could you change it back to having an s
Christopher Ryder
@cryder9898
Jan 07 2017 03:27
nvm I got it
@Halfcreative im re-learning forms, when I get a text from a FORM field in JQuery I need to use var query = $('#search').val();
buiphuking
@buiphuking
Jan 07 2017 03:49

i have a html like this:

<div><a>VIEW MORE</a></div>
i set div backgroud-color: white and a color: black
what i want to do is when i hover : div backgroud-color change to black and a color change to white, but i can't do that
plz help!!!!!!!!!!!!!!!!!!

Adam Morris
@Adam-Morris
Jan 07 2017 03:52
@buiphuking Link code please?
Your <div> and <a> are different elements
Alan Sato
@Halfcreative
Jan 07 2017 04:31
@buiphuking if you're still awake, you can change the css such that "div a:hover" has a different background color and text color
@buiphuking but it's preferable if you give your div an ID or a class to specify
Adam Faraj
@adamfaraj
Jan 07 2017 04:38
Hello all
I'm trying to build my portfolio webpage
https://codepen.io/FreeCodeCamp/full/YqLyXB/How do I make that line in between the
How do I make that line in between the 1st paragraph and the skills
the same line is seen after the word Portfolio
and Contact Me
Ashok Bishnoi
@kingashok29
Jan 07 2017 04:57
I'm building Wikipedia viewer app and each time I try to make request, it gives me this error - Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Alan Sato
@Halfcreative
Jan 07 2017 04:59
@kingashok29 can i see the codepen?
Bryden Uyehara
@d0peU
Jan 07 2017 04:59
So I'm just starting the portfolio webpage thing and as I look at the video and example I can't help but notice that I don't know how to do most of the things in the preview portfolios. Is this something we will come back to and add things to as we learn them or do i just need to go back and study lessons I may have forgotten
Alan Sato
@Halfcreative
Jan 07 2017 05:00
@d0peU there are a few things that you will have to search on your own, but for the most part you can do everything in the example. go back and study some lessons you may have forgotten, and for things that you don't see, just try and search it up!
Adam Faraj
@adamfaraj
Jan 07 2017 05:01
Can someone help me with that line part?
Alan Sato
@Halfcreative
Jan 07 2017 05:01
@d0peU Also don't feel like you have to make it look like the example. There are a tone of different ways to go about it
@adamfaraj sorry lemme take a look
Ashok Bishnoi
@kingashok29
Jan 07 2017 05:02

@Halfcreative here is js code -

new Vue({
  el: "#form",
  data: {
    query: '',
    error: '',
    results: [],
    api : 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=',
  },
  methods: {
    submitForm() {
      axios({
        method: 'post',
        url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=' + this.query,
        headers: {
          'Content-Type' : 'application/json',
          'Access-Control-Allow-Origin': 'https://en.wikipedia.org/wiki/'
        },
      }).then(function(response) {
             console.log(response);
           })
           .catch(function(error) {
             this.query = error;
           });
    }
  }
})

I'm using Vue.js

Alan Sato
@Halfcreative
Jan 07 2017 05:03
I'm sorry i'm not familiar with Vue.js, There were people earlier on here just making a traditional getJSON call.
@kingashok29 this will take me a sec to learn Vue.js
Ashok Bishnoi
@kingashok29
Jan 07 2017 05:04
so if i do $.getJSON() then will this work or not @Halfcreative
Alan Sato
@Halfcreative
Jan 07 2017 05:06
@adamfaraj it seems they use <hr class="star-bright"/>. but you may want to come up with your own deviders
Adam Faraj
@adamfaraj
Jan 07 2017 05:06
so a line break, then style the line break?
Alan Sato
@Halfcreative
Jan 07 2017 05:06
@kingashok29 the notation and stuff you do will be a little different
Adam Faraj
@adamfaraj
Jan 07 2017 05:07
<hr class="line-break">
Alan Sato
@Halfcreative
Jan 07 2017 05:07
@adamfaraj that is one of many ways yes, some use the font-awesome deviders
Adam Faraj
@adamfaraj
Jan 07 2017 05:07
thanks @Halfcreative
CamperBot
@camperbot
Jan 07 2017 05:07
adamfaraj sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @halfcreative |http://www.freecodecamp.com/halfcreative
Alan Sato
@Halfcreative
Jan 07 2017 05:08
@adamfaraj don't forget to show off your portfolio page when you are done! feedback is always great
Adam Faraj
@adamfaraj
Jan 07 2017 05:09
well i started all over again
i wasn't happy with my initial
hensn5250
@hensn5250
Jan 07 2017 05:12
Adam is that page completed
?
Adam Faraj
@adamfaraj
Jan 07 2017 05:12
nope
i gave up on it
starting fresh
Alan Sato
@Halfcreative
Jan 07 2017 05:12
haha a ton of adams in here
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 07 2017 05:12
I would love some help with the random quote machine project. Would someone be willing to look at my code pen? http://codepen.io/coltenv/pen/mRJOZP
hensn5250
@hensn5250
Jan 07 2017 05:12
Why?
Adam Faraj
@adamfaraj
Jan 07 2017 05:13
i had unnecessary classes and id
Alan Sato
@Halfcreative
Jan 07 2017 05:13
@ColtenVanTussenbrook You're getting an error "math is not defined"
hensn5250
@hensn5250
Jan 07 2017 05:13
Colten have not gotten there yet, so..
Adam Faraj
@adamfaraj
Jan 07 2017 05:13
my form page is all messed up
Alan Sato
@Halfcreative
Jan 07 2017 05:13
@ColtenVanTussenbrook pressign ctrl shift j will open console to show you errors
Adam Faraj
@adamfaraj
Jan 07 2017 05:13
i learned more stuff about HTML and CSS after I started
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 07 2017 05:14
@Halfcreative that's good to know, I'll take a look at that. Thank you
CamperBot
@camperbot
Jan 07 2017 05:14
coltenvantussenbrook sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @halfcreative |http://www.freecodecamp.com/halfcreative
hensn5250
@hensn5250
Jan 07 2017 05:14
yea HTML is usually the culprit
its the arithmetics of Web Dev
algebra
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 07 2017 05:15
@Halfcreative I don't see anything in the console for some reason
Alan Sato
@Halfcreative
Jan 07 2017 05:15
@ColtenVanTussenbrook I think the challenge also asks you to pull the quotes from an API, but i could be mistaken
@ColtenVanTussenbrook math needs to be capitalized
Adam Faraj
@adamfaraj
Jan 07 2017 05:15
does anyone here actually work at a web dev?
as a*
what text editing program do you use? Notepad++, Sublime, etc?
Adam Morris
@Adam-Morris
Jan 07 2017 05:16
I got a job to develop a web page for my dad's friend once. I got $100 from it
I use sublime text but I am thinking of switching to Atom
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 07 2017 05:16
@Halfcreative I was going to use an API for the twitter link, but you're probably right. I guess it will be good to do it like this first to get a handle on JavaScript
@Halfcreative and yep, that's the issue, math wasn't capitilized. Thanks for catching that
CamperBot
@camperbot
Jan 07 2017 05:17
:warning: coltenvantussenbrook already gave halfcreative points
coltenvantussenbrook sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
Joe Escobedo
@joeEscob1023
Jan 07 2017 05:17
Ok so im working on the tribute page project and I'm trying to use columns and rows but i dont think i really understand how they work. HEELP
Alan Sato
@Halfcreative
Jan 07 2017 05:17
@ColtenVanTussenbrook http://codepen.io/halfcreative/pen/Xprrwm here's my codepen for my first quote machine for guidence
hensn5250
@hensn5250
Jan 07 2017 05:18
Not web dev'er but use atom and sublime
Joe Escobedo
@joeEscob1023
Jan 07 2017 05:18
bootstrap in general has been kind of tricky for me
Alan Sato
@Halfcreative
Jan 07 2017 05:19
@TacoJoe it can be a little tricky but it helps to look online at how the colomns and rows are aligned
hensn5250
@hensn5250
Jan 07 2017 05:20
um did not mean to do that
Alan Sato
@Halfcreative
Jan 07 2017 05:21
@TacoJoe if you can't watch the video, heres some in depth reading https://www.sitepoint.com/understanding-bootstrap-grid-system/
Adam Faraj
@adamfaraj
Jan 07 2017 05:21
@hensn5250 i downloaded sublime. it doesn't look pretty like i thought it would. no pretty colors. didn't try to guess tags like Notepadd++ did
Alan Sato
@Halfcreative
Jan 07 2017 05:21
@adamfaraj atom is free to my knowledge and looks great
hensn5250
@hensn5250
Jan 07 2017 05:21
adam you have to get the packages for it
Joe Escobedo
@joeEscob1023
Jan 07 2017 05:22
thanks! @Halfcreative ill be sure to watch it!
CamperBot
@camperbot
Jan 07 2017 05:22
tacojoe sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @halfcreative |http://www.freecodecamp.com/halfcreative
Alan Sato
@Halfcreative
Jan 07 2017 05:22
haha the video was from @hensn5250 but thank you
hensn5250
@hensn5250
Jan 07 2017 05:22
sublime is >>>>>>>> notepad++ and I'm a big fan of notepad++
CamperBot
@camperbot
Jan 07 2017 05:22
halfcreative sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @hensn5250 |http://www.freecodecamp.com/hensn5250
Adam Faraj
@adamfaraj
Jan 07 2017 05:22
@Halfcreative thanks! i'll look into it.
@hensn5250 you mean buy it?
CamperBot
@camperbot
Jan 07 2017 05:22
adamfaraj sends brownie points to @halfcreative and @hensn5250 :sparkles: :thumbsup: :sparkles:
:warning: adamfaraj already gave halfcreative points
:cookie: 121 | @hensn5250 |http://www.freecodecamp.com/hensn5250
hensn5250
@hensn5250
Jan 07 2017 05:23
not buy , download
Alan Sato
@Halfcreative
Jan 07 2017 05:23
I think it doesn't quite matter what text editor you use, its all about the craftsman not his tools
Adam Faraj
@adamfaraj
Jan 07 2017 05:23
i did download it.
hensn5250
@hensn5250
Jan 07 2017 05:23
it has a download manager in it
Adam Faraj
@adamfaraj
Jan 07 2017 05:23
ahh
gotcha
hensn5250
@hensn5250
Jan 07 2017 05:23
kinda like how browser have add ons
thanks for the points
sparklie3
@sparklie3
Jan 07 2017 05:24
i'm trying to build this design in css: https://dribbble.com/shots/2145451-Compact-Login
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 07 2017 05:25
@Halfcreative cool, I'll check it out
sparklie3
@sparklie3
Jan 07 2017 05:25
i don't have the transitions or the post method working, but any thoughts?
Adam Faraj
@adamfaraj
Jan 07 2017 05:27
what's the difference between <section> and <div>?
Alan Sato
@Halfcreative
Jan 07 2017 05:28
@adamfaraj they are both differnt tools to identify sections of your html.
Alan Sato
@Halfcreative
Jan 07 2017 05:28
div is more versatile, and section more rigid in use
hensn5250
@hensn5250
Jan 07 2017 05:28
nothing other than there lable/usage
div is more general?
Alan Sato
@Halfcreative
Jan 07 2017 05:29
div can be commonly used to identify one element, while section is better for a bunch of elements
Adam Faraj
@adamfaraj
Jan 07 2017 05:30
so they're saying try to avoid the use of div
Note: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
hensn5250
@hensn5250
Jan 07 2017 05:31
The HTML <div> element (or HTML Document Division Element) is the generic container for flow content. The HTML <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.
Alan Sato
@Halfcreative
Jan 07 2017 05:31
@adamfaraj thats all coding practice ettiquate, as in the real world you are probably sharing code with others, and doing div's for everything can make it hard for people to read and use your code
JD Tadlock
@jdtdesigns
Jan 07 2017 05:32
@kingashok29 You still need help with Vue?
Adam Faraj
@adamfaraj
Jan 07 2017 05:34
@hensn5250 flow content?
hensn5250
@hensn5250
Jan 07 2017 05:37
copied the definition. I assumed flow content ~= content
Adam Faraj
@adamfaraj
Jan 07 2017 05:38
cool. thanks @hensn5250
CamperBot
@camperbot
Jan 07 2017 05:38
adamfaraj sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:warning: adamfaraj already gave hensn5250 points
Adam Faraj
@adamfaraj
Jan 07 2017 05:39
so quick question. it says to not look at the page source for the example. but i am. in real world jobs, do you not look at other people codes to help you out?
hensn5250
@hensn5250
Jan 07 2017 05:39
thx again
Chris
@cli53
Jan 07 2017 05:41
@adamfaraj Study other people's code, but don't pass it on as your own or copy it
hensn5250
@hensn5250
Jan 07 2017 05:41
yea i thought about that too. I think its good to look if you get stuck but not to start looking immediately
Clara Mae Wells
@run-cmw
Jan 07 2017 05:41
I just saw a notification and saw that someone said <div> should be used as a last resort. Really? They're all over the tribute page I just did. That's what I practiced; how else does one divide rows and columns for the Bootstrap grid?
JD Tadlock
@jdtdesigns
Jan 07 2017 05:42
@kingashok29 Here's an example using vue-resource to get the Wikipedia results http://jsbin.com/yixogod/edit?html,js,output
Chris
@cli53
Jan 07 2017 05:42
@adamfaraj It's like doing math, understand the structure and how certain elements affect the page but don't copy the answers from the back of the book everytime you need help
hensn5250
@hensn5250
Jan 07 2017 05:42
right
Adam Faraj
@adamfaraj
Jan 07 2017 05:43
there are so many elements that i didn't know existed. like <section>. i found that out by looking at the source code. do you guys just remember all the elements?
hensn5250
@hensn5250
Jan 07 2017 05:44
if you get theory only from FCC you will get stuck on these projects because for me at least these exercises are quite easy and hard to remember when needed
Chris
@cli53
Jan 07 2017 05:45
@adamfaraj There really isn't TOO many, just enough where if you practice using them for appropriate content, you'll get use to it.
@adamfaraj For example, the basic model for HTML so far has involved, section, article, nav, footer, aside, and header
Clara Mae Wells
@run-cmw
Jan 07 2017 05:45
@hensn5250 What else do you use?
hensn5250
@hensn5250
Jan 07 2017 05:45
books
tutorials
adam if you have google chrome a great app to get is Dev Docs . It has a reference for all popular languages except Java and you can download the content for offline viewing.
its like a dictionary for web dev
Adam Faraj
@adamfaraj
Jan 07 2017 05:48
dev docs! awesome
@cli53 i mean...it feels like there's a lot
Clara Mae Wells
@run-cmw
Jan 07 2017 05:49
Is anyone willing to answer a feedback question about my tribute page (first basic project)?
hensn5250
@hensn5250
Jan 07 2017 05:49
sure
JD Tadlock
@jdtdesigns
Jan 07 2017 05:50
@adamfaraj These are 'languages' you're learning. I tend to tell people it's like learning 3 spoken languages from scratch. Some are not as complex as others, but none are simple.
Clara Mae Wells
@run-cmw
Jan 07 2017 05:50
http://tracktribute.surge.sh/ Is there a way to simplify my <script></script> by giving multiple body attributes at once instead of doing three separate attributes?
I was attempting to not use an external or head CSS and instead practice Bootstrap and jQuery.
Bad idea?
JD Tadlock
@jdtdesigns
Jan 07 2017 05:53
@run-cmw It's good to learn Css before moving to frameworks like Bootstrap.
jQuery is the opposite in my opinion. I'd start with jQuery then learn vanilla js
As far as using jQuery to set the css, I woudn't do that unless it's a dynamic feature of the site that changes on some condition.
Clara Mae Wells
@run-cmw
Jan 07 2017 05:55
I'm already fairly comfortable with CSS; I remember it from high school (a little over 10 years ago, but I caught on to that a lot quicker than Bootstrap and jQuery).
JD Tadlock
@jdtdesigns
Jan 07 2017 05:55
10 years lol
Clara Mae Wells
@run-cmw
Jan 07 2017 05:55
Okay, thanks.
JD Tadlock
@jdtdesigns
Jan 07 2017 05:55
css has come lightyears in 10 years
hensn5250
@hensn5250
Jan 07 2017 05:55
@run-cmw Don't know. Can check. I think using the CSS would be more practical though.
JD Tadlock
@jdtdesigns
Jan 07 2017 05:55
it's hugely more massive in functionality now
Clara Mae Wells
@run-cmw
Jan 07 2017 05:59
@jdtdesigns Yeah, everything has. The basics are still the same though. There wasn't much to the tribute project, so I was trying to practice the unfamiliar concepts instead of relying on HTML and CSS. But I also don't want to do something impractical (like the jQuery bit).
@hensn5250 Thanks.
CamperBot
@camperbot
Jan 07 2017 06:00
run-cmw sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @hensn5250 |http://www.freecodecamp.com/hensn5250
JD Tadlock
@jdtdesigns
Jan 07 2017 06:01
@run-cmw Nothin wrong with playing around with new things. Just giving you tips to guide you in the right direction. ;)
Clara Mae Wells
@run-cmw
Jan 07 2017 06:01
@jdtdesigns Thank you
CamperBot
@camperbot
Jan 07 2017 06:01
run-cmw sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 811 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
hensn5250
@hensn5250
Jan 07 2017 06:01
Thx. Checked but couldn't find a way to .
JD Tadlock
@jdtdesigns
Jan 07 2017 06:02
you can also do this @run-cmw
$('.el').css({
  backgroundColor: 'red',
  color: 'orange',
  fontFamily: 'Lato, sans-serif'
});
Clara Mae Wells
@run-cmw
Jan 07 2017 06:02
No problem. I searched, too. I'll see which books are best to supplement FCC so I don't learn any bad habits.
I tried that with rgb values, but it didn't work. I wanted specific colors :/
Oh wait! I used the element instead of a class, but that shouldn't matter should it?
Hm...I also may have used double quotes. Let me try again.
JD Tadlock
@jdtdesigns
Jan 07 2017 06:06
@run-cmw rgb works fine and you can also use hex
backgroundColor: 'rgb(0, 0, 0)'
double or single quotes will work
Adam Faraj
@adamfaraj
Jan 07 2017 06:06
@jdtdesigns how did you copy code like that?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:06
i code a lot so i use singles to go faster
Adam Faraj
@adamfaraj
Jan 07 2017 06:07
<input type="submit" value="Send">
mine comes up like this
JD Tadlock
@jdtdesigns
Jan 07 2017 06:07
@adamfaraj type 3 back ticks and hit enter
Adam Faraj
@adamfaraj
Jan 07 2017 06:07
\\<input type="submit" value="Send">
///<input type="submit" value="Send">
JD Tadlock
@jdtdesigns
Jan 07 2017 06:07
back ticks are ```
Adam Faraj
@adamfaraj
Jan 07 2017 06:07
damn
JD Tadlock
@jdtdesigns
Jan 07 2017 06:08
usually right before 1 on the keyboard
Adam Faraj
@adamfaraj
Jan 07 2017 06:08
```<input type="submit" value="Send">
JD Tadlock
@jdtdesigns
Jan 07 2017 06:08
hit enter after the ticks
then start typing
Adam Faraj
@adamfaraj
Jan 07 2017 06:08
<input type="submit" value="Send">
oh wow
Clara Mae Wells
@run-cmw
Jan 07 2017 06:08
Nice.
Adam Faraj
@adamfaraj
Jan 07 2017 06:09
@jdtdesigns thanks
CamperBot
@camperbot
Jan 07 2017 06:09
adamfaraj sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Adam Faraj
@adamfaraj
Jan 07 2017 06:09
<h2>Contact Me</h2>
      <form id="contact-info">

    <input type="text" name="name" placeholder="Name"><br>

    <input type="text" name="email" placeholder="Email Address"><br>

    <input type="text" name="phone number" placeholder="Phone Number"><br>

    <input type="message" name="message" placeholder="Message">
        <br>
    <input type="submit" value="Send">
why isn't my message text box not lining up with name, email, and phone?
hensn5250
@hensn5250
Jan 07 2017 06:13
what do you mean by lining up they all seem lined up
try changing type-message to type-text
Adam Faraj
@adamfaraj
Jan 07 2017 06:17
that was it
hensn5250
@hensn5250
Jan 07 2017 06:19
cool
Adam Faraj
@adamfaraj
Jan 07 2017 06:19
<input type="text" name="message" placeholder="Message" rows="15">
the height isn't changing?
man, i got so much to learn
JD Tadlock
@jdtdesigns
Jan 07 2017 06:21
@adamfaraj Here's how you can go about it. I changed some html, and added css to the css panel. You shouldn't use <br>'s to separate content. Use margin and padding. I also changed the 'message' to a <textarea> which is what you should use for a 'message' input. ;)
http://codepen.io/jdtadlock/pen/KapyYE?editors=0100
Adam Faraj
@adamfaraj
Jan 07 2017 06:24
.row, .column {
  display: flex;
}

.column {
  flex-direction: column;
}
what is this mean
what does*
honeylovescode
@honeylovescode
Jan 07 2017 06:24
I need to create links to jump to my different content on my site in code pen, I believe they are called hyperlinks, but I am not sure.
hensn5250
@hensn5250
Jan 07 2017 06:25
he was missing the closing form tag wasnt he>
?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:25
@hensn5250 Yes
and the div and section
Adam Faraj
@adamfaraj
Jan 07 2017 06:25
@honeylovescode this was my code
```
<nav>
<ul id="nav" style="list-style-type:none"> <li id="list-menu"><a href="#contact"> CONTACT</a></li> <li><a href="#port"> PORTFOLIO</a></li> <li><a href="#"> ABOUT </a> </li>
honeylovescode
@honeylovescode
Jan 07 2017 06:26
@adamfaraj thanks I will look at it.
CamperBot
@camperbot
Jan 07 2017 06:26
honeylovescode sends brownie points to @adamfaraj :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @adamfaraj |http://www.freecodecamp.com/adamfaraj
Adam Faraj
@adamfaraj
Jan 07 2017 06:26
damn. i'm like trying to rush through this
how long did it take you guys to become good at HTML and CSS?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:27
@adamfaraj Have no doubt. This stuff will take a minimum 2 to 3 years to get intermediate at for the average person.
It's not a get rich quick trade ;)
Adam Faraj
@adamfaraj
Jan 07 2017 06:28
@jdtdesigns your code is so much prettier than mine
JD Tadlock
@jdtdesigns
Jan 07 2017 06:28
mastering css alone can take years
honeylovescode
@honeylovescode
Jan 07 2017 06:28
I'm still don't understand how to do it.
hensn5250
@hensn5250
Jan 07 2017 06:29
yea I think its a matter of how often than how long
Adam Faraj
@adamfaraj
Jan 07 2017 06:29
i'm really trying to break into the field
hensn5250
@hensn5250
Jan 07 2017 06:29
same here
Adam Faraj
@adamfaraj
Jan 07 2017 06:29
working as a chemist now. i need a career change
@honeylovescode ```
honeylovescode
@honeylovescode
Jan 07 2017 06:30
I mean I still don't get how to create inner links, I'm not sure what they are called
Adam Faraj
@adamfaraj
Jan 07 2017 06:30
<div class="Menu">
<nav>
<ul id="nav" style="list-style-type:none"> <li id="list-menu"><a href="#contact"> CONTACT</a></li> <li><a href="#port"> PORTFOLIO</a></li> <li><a href="#"> ABOUT </a> </li>
</ul>
</nav>
</div>
JD Tadlock
@jdtdesigns
Jan 07 2017 06:30
@adamfaraj Web Dev is very lucrative, but it doesn't come fast. It's one of the hardest fields to learn these days in my opinion.
Adam Faraj
@adamfaraj
Jan 07 2017 06:31
i've bought books on JS, because i've heard that's the hardest of HTML, CSS, and JS
 <div class="Menu">
  <nav>
    <ul id="nav" style="list-style-type:none"> <li id="list-menu"><a href="#contact"> CONTACT</a></li> <li><a href="#port"> PORTFOLIO</a></li> <li><a href="#"> ABOUT </a> </li>
    </ul>
  </nav>
  </div>
JD Tadlock
@jdtdesigns
Jan 07 2017 06:32
@honeylovescode in html5 you can just use the nav tag and nest hyperlinks inside
<nav>
  <a href="somelink">Some Link</a>
  <a href="somelink">Some Link</a>
  <a href="somelink">Some Link</a>
</nav>
@adamfaraj JS is definitely the most complex, but html and css are beasts of their own.
hensn5250
@hensn5250
Jan 07 2017 06:33
@honeylovescode use ID attributes. That is give the thing you want to link to on your page an ID-name then create a link somewhere else on the page with the ID-name as the value in the href attribute
JD Tadlock
@jdtdesigns
Jan 07 2017 06:33
JS is a programming language which are always massive.
honeylovescode
@honeylovescode
Jan 07 2017 06:34
@hensn5250 ok, will try it thanks
CamperBot
@camperbot
Jan 07 2017 06:34
honeylovescode sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @hensn5250 |http://www.freecodecamp.com/hensn5250
Adam Faraj
@adamfaraj
Jan 07 2017 06:37
@jdtdesigns i'm trying to find:
.column {
  flex-direction: column;
}
the column part in the HTML code
nevermind
found it
JD Tadlock
@jdtdesigns
Jan 07 2017 06:38
@adamfaraj That just makes a flex container a column instead of a row. display: flex is set to 'row' by default
Adam Faraj
@adamfaraj
Jan 07 2017 06:40
```form input, form textarea {
form input, form textarea {
form input, form textarea {
  width: 260px;
  padding: 5px 10px;
  font-family: sans-serif;
  font-size: 1em;
  margin-bottom: 5px;
}
so the form input and form textarea comes from
<form id="contact-info" class="column">
      <input type="text" name="name" placeholder="Name">
      <input type="text" name="email" placeholder="Email Address">
      <input type="text" name="phone number" placeholder="Phone Number">
      <textarea name="message" placeholder="Message"></textarea>
the first word from the <form> tag and the <input> tag nested in it?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:42
@adamfaraj Correct. You can select nested elements by adding them after the parent in css.
and to select the element tags themselves you just use the element name
you can select with id's and classes too and a ton more ways
Adam Faraj
@adamfaraj
Jan 07 2017 06:43
yeah. with periods and #
JD Tadlock
@jdtdesigns
Jan 07 2017 06:43
but the the common way is classes
right
Adam Faraj
@adamfaraj
Jan 07 2017 06:43
where did you learn html and css?
what was the best source for you?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:44
input[type="text"] { 
  background: red;
}
will select only inputs of type text
i learned from all over
i've spent thousands on course training, use youtube all the time, google, tons more :P
the learning never stops in web dev
Adam Faraj
@adamfaraj
Jan 07 2017 06:46
which has helped the most?
have you found a job as a web dev?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:47
I've freelanced for awhile and now I'm creating course content myself. I also work for a church as the web admin, creating the website and all the staff, business management stuff.
Adam Faraj
@adamfaraj
Jan 07 2017 06:48
do you like your job?
JD Tadlock
@jdtdesigns
Jan 07 2017 06:49
I love coding, so yes. It can be a job in some areas though. I've done a lot of WordPress work which is very boring to me.
My new love is Firebase and Vue
Adam Faraj
@adamfaraj
Jan 07 2017 06:53
i'm been teaching myself for about a month now
started with HTML and CSS
JD Tadlock
@jdtdesigns
Jan 07 2017 06:58
nice
Adam Faraj
@adamfaraj
Jan 07 2017 07:00
my logo is huge
<li id="logo"><a href><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"></a>    </li>
#logo {
  float: left;
  height: auto; 
    width: auto; 
  max-width: 300px; 
    max-height: 300px;
}
it made my nav bar huge
i want it nested in the nav bar
how do i accomplish that
Adam Faraj
@adamfaraj
Jan 07 2017 07:07
got it
Joe Escobedo
@joeEscob1023
Jan 07 2017 07:57
how do you get text to stay in a certain spot when you're making the page bigger or smaller?
Im working on the tribute page and i moved my page by mistake and noticed my text was moving around while everything was staying in place
Adam Morris
@Adam-Morris
Jan 07 2017 08:05
try position: fixed, maybe?
Linda
@Mee0wth
Jan 07 2017 08:13
help1.png
Can someone help me with this? I'm not sure what I'm doing wrong... I thought I understood with someone's help...but I'm still not sure
Arin
@arinarjani
Jan 07 2017 08:15
@Mee0wth look at your addClass(). Look closely
It is a syntax error
Also, look at the jquery addClass() docs to see how you use addClass() and how you pass in arugements
( google: "jquery addclass" )
Linda
@Mee0wth
Jan 07 2017 08:17
@arinarjani that's helpful. Thank you!
CamperBot
@camperbot
Jan 07 2017 08:17
mee0wth sends brownie points to @arinarjani :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @arinarjani |http://www.freecodecamp.com/arinarjani
Darth Skywalker
@adityaparab
Jan 07 2017 08:18
@Mee0wth : There is a space between ") and .addClass
it should not be there
Arin
@arinarjani
Jan 07 2017 08:19
@adityaparab that is not how you help mate
Darth Skywalker
@adityaparab
Jan 07 2017 08:19
names of classes that you pass into .addClass should be in quotes
Linda
@Mee0wth
Jan 07 2017 08:19
@adityaparab OOOOOOOOHHHHHH
Darth Skywalker
@adityaparab
Jan 07 2017 08:20
@arinarjani : Party in vegas mate! Enjoy :D
Linda
@Mee0wth
Jan 07 2017 08:20
@adityaparab The quotes was what did it. Thank you!!!
CamperBot
@camperbot
Jan 07 2017 08:20
mee0wth sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 791 | @adityaparab |http://www.freecodecamp.com/adityaparab
Linda
@Mee0wth
Jan 07 2017 08:20
Thank you all for your input!!!
Arin
@arinarjani
Jan 07 2017 08:20
No, just work
Darth Skywalker
@adityaparab
Jan 07 2017 08:20
Isee
@Mee0wth :+1:
Arin
@arinarjani
Jan 07 2017 08:20
Which I am currently doing
Will be off soon
Darth Skywalker
@adityaparab
Jan 07 2017 08:20
@arinarjani :+1:
Arin
@arinarjani
Jan 07 2017 08:21
Are you in Vegas?
Darth Skywalker
@adityaparab
Jan 07 2017 08:21
No!
Vegas is something that I don't want on a daily basis
Linda
@Mee0wth
Jan 07 2017 08:35
Hi guys, one more question. I've learned html, css and now jquery...but I'm trying to figure out how all these fit together
It seems html is like the framework and everything else is to alter the style of the page... but jquery can do most of the things css can do
so why even use css?
gargtushar
@gargtushar
Jan 07 2017 08:36
if js is disabled in ur browser, will ur jquery work?
Coy Sanders
@coymeetsworld
Jan 07 2017 08:38
html is used to structure your page, css is to style it, javascript including jquery gives it behavior @Mee0wth
@gargtushar nope
jquery is javascript
Linda
@Mee0wth
Jan 07 2017 08:40
@coymeetsworld ooooh. Thanks!
CamperBot
@camperbot
Jan 07 2017 08:40
mee0wth sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1747 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 07 2017 08:41
no problem @Mee0wth
Linda
@Mee0wth
Jan 07 2017 08:52
LOL
HAHAHAHAHA
Darth Skywalker
@adityaparab
Jan 07 2017 08:54
@Mee0wth now if you wanna make him talk or make him do anything as you bid, add in js
Linda
@Mee0wth
Jan 07 2017 08:54
That's the best example I have ever received. Now it all makes sense. The world makes sense now
coffeebeanzz
@coffeebeanzz
Jan 07 2017 08:55
Lol thx @adityaparab :)
CamperBot
@camperbot
Jan 07 2017 08:55
coffeebeanzz sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 794 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Jan 07 2017 08:57
@Mee0wth @coffeebeanzz :+1:
E Smith
@mas1321
Jan 07 2017 08:59
Hey guys, I'm building my portfolio just using HTML/CSS.. are you still able to add an interactive nav bar without using bootstrap? or is bootstrap the only way to make it very interactive? Thanks.. mine is looking very "static" right now if you catch my drift...
and in the example project is the portfolio featured using bootstrap? it's frustrating using all those col-spans
Darth Skywalker
@adityaparab
Jan 07 2017 09:01
@mas1321 If you don't wanna do it yourself, use bootstrap. If you don't want to use bootstrap then you will have to implement the code that makes your html elements interactive
bootstrap just relieves you from the responsibility doing repeating things.
if using col spans is frustrating, I can imagine you falling to the dark side of the force if you are told to do it all using good ole' media queries way :D
E Smith
@mas1321
Jan 07 2017 09:16
lol although i'm not to familiar with media queries but it doesn't sound nice. I will check out the bootstrap themes. Thanks @adityaparab
CamperBot
@camperbot
Jan 07 2017 09:16
:cookie: 795 | @adityaparab |http://www.freecodecamp.com/adityaparab
mas1321 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jan 07 2017 09:17
@adityaparab no need to learn both html and css. you can also use photoshop for some nice transformations :)
@adityaparab realy nice that pict
Deepanshu Bendale
@deepanshubendale
Jan 07 2017 09:21
@sorinr how ?
i am new here, just joined today any tips ?
E Smith
@mas1321
Jan 07 2017 09:23
@deepanshubendale when you get to the projects I would recommend using JSFiddle instead of codeine for code you want to keep private. Codepen shares your code with everyone even if you aren't ready to share it yet.
JSFiddle keeps it private.
Sorin Ruse
@sorinr
Jan 07 2017 09:25
@deepanshubendale i was just kidding. you have to learn html and css also to style your html. there is no other way :)
gargtushar
@gargtushar
Jan 07 2017 09:27
@coymeetsworld yes, that's why I asked her that question
Deepanshu Bendale
@deepanshubendale
Jan 07 2017 09:28
@mas1321 thanks i'll swih over to it
CamperBot
@camperbot
Jan 07 2017 09:28
deepanshubendale sends brownie points to @mas1321 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @mas1321 |http://www.freecodecamp.com/mas1321
Deepanshu Bendale
@deepanshubendale
Jan 07 2017 09:29
switch over *
@sorinr cant use animated gifs instead of setting up a slider ?
LOL !
Sorin Ruse
@sorinr
Jan 07 2017 09:31
@deepanshubendale lol
jolio007
@jolio007
Jan 07 2017 10:46
Hey guys! I've been trying to add a background image to my webpage on codepen but it doesn't work. I've tried the code below on the wschool website and it worked
background-image:url ("http://res.cloudinary.com/dgtbggegh/image/upload/v1483785501/dark_embroidery_sm3bgx.png") ;
can someone check my https://codepen.io/jolio007/pen/OXZLyG I can't see what's wrong
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 10:48
@jolio007 I don't think if codepen allows external images. Upload image on dropbox and try the url
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 10:53
oh i see
Linda
@Mee0wth
Jan 07 2017 10:55
Does anyone know how this grid system works? <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">...I'm a bit confused on it even after reading about the grid stystem on bootsrap
When I input this and run it, nothing comes out the other end. Is this an invisible grid?
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 10:56
@Mee0wth Grid is invisible until you add contents
I can explain you the grid :)
Linda
@Mee0wth
Jan 07 2017 10:57
.<
Darth Skywalker
@adityaparab
Jan 07 2017 10:58
@Mee0wth :try putting borders on your divs like
div[class^="col-"]{
  border: 1px solid black;
  height:100px;
}
then try resizing your screen
Linda
@Mee0wth
Jan 07 2017 10:58
@NitinNair89 generally, are grid systems used for lists? or... anything really that needs to be divided right? like tables... and such?
@adityaparab oh, I'm guessing that outlines the invisible grid
Darth Skywalker
@adityaparab
Jan 07 2017 11:00

@Mee0wth : no. Not for lists. Grids (semantically) are part of responsive design. responsive design means your content on page adjusts itself depending on the screen size you see it on.

If you see 4 column layout on desktop screen, the same page will show the same columns stacked one above the other if you view it on mobile device.

that is a gist of responsive design.
Sorin Ruse
@sorinr
Jan 07 2017 11:01
@jolio007 here an working example
Linda
@Mee0wth
Jan 07 2017 11:02
@adityaparab Ohhh. You're amazing, thank you!
CamperBot
@camperbot
Jan 07 2017 11:02
:cookie: 801 | @adityaparab |http://www.freecodecamp.com/adityaparab
mee0wth sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
jolio007
@jolio007
Jan 07 2017 11:04
Sweet thanks @sorinr
CamperBot
@camperbot
Jan 07 2017 11:04
jolio007 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1046 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 07 2017 11:05
@jolio007 welcome
Cory O'Dell
@coryodell28
Jan 07 2017 11:13
can I get someone to help me out with my portfolio? Trying to get my text centered on a background image and for the life of me I can't get it. Tried position-relative, position-absolute on the necessary div's, changing different css alignments - no luck.
here's my codepen for the project http://codepen.io/coryodell/pen/Xpbrgq
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:18
@coryodell28 Which text?
please remove all the <head> tag contents from your HTML window in codepen. You can link bootstrap directly via settings
Cory O'Dell
@coryodell28
Jan 07 2017 11:19
The h1 and h4 text
and when I delete the head text it eliminates the collapsible menu functionlity
I loaded jQuery and bootstrap.js through codepen but for whatever reason that wont work
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:21
include bootstrap css as well
Cory O'Dell
@coryodell28
Jan 07 2017 11:21
Yeah, it's included
I added the head text well after
Due to the menu difficuluties
c0d0er
@c0d0er
Jan 07 2017 11:24
in the following codepen, what is the use for the redux code in this codepen? what is the difference if not use Redux here? if i delete all the redux code, and it comes the same result. 2nd question, why add then the whole redux code works?
http://codepen.io/c0d0er/pen/VPYRqW?editors=0010
Stoica Valentin
@stoicavali91
Jan 07 2017 11:24
hi guys. I don't understand very well API and JSON. I don't know how I find JSON attributes. Can someone help me? I am currently working at wikipedia viewer
Cory O'Dell
@coryodell28
Jan 07 2017 11:25
@NitinNair89 does it have something to do with the div classes?
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:26
@coryodell28 the import order should be jquery first, bootstrap next
then, keep only the body content in html, remove the rest
Cory O'Dell
@coryodell28
Jan 07 2017 11:27
got it, that fixed the menu at least.
thanks @NitinNair89 - any suggestions for the h1 and h4 elements centered on the image?
CamperBot
@camperbot
Jan 07 2017 11:27
coryodell28 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:27
Ok good, now remove all the CSS styles you gave for text-vcenter class
Cory O'Dell
@coryodell28
Jan 07 2017 11:28
done
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:28
@coryodell28 Then, modify your div to this:
<div class="text-vcenter text-center">
the 'text-center' bootstrap class will center any text content inside its parent container
you can still add more styles inside your text-vcenter or remove it. :)
Cory O'Dell
@coryodell28
Jan 07 2017 11:29
yeah thats what I originally tried, and it just centers the text at the top of the screen. It seems like it's not recognizing the "size" of the image to determine where the center is. If that makes sense
I saved it, if you want to take a look at it now
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:30
ok, what next @coryodell28 ?
you want it vertically centered as well?
Cory O'Dell
@coryodell28
Jan 07 2017 11:31
yeah, I did the vertical-align: middle earlier and that didnt work either
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:32
@coryodell28 Ok, then use the margin trick. Try margin: 50vh 0 0 0; for your text-vcenter class
this will assign a margin-top to 50% of the viewport height (vh)
Cory O'Dell
@coryodell28
Jan 07 2017 11:34
Ahhhhhh yes! Thank you. I've been googling and banging my head against the desk for the last hour trying to figure that out
I need to learn some more CSS I see
thank you @NitinNair89
CamperBot
@camperbot
Jan 07 2017 11:34
coryodell28 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: coryodell28 already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 11:34
You will learn it in due course of time @coryodell28 :)
Glad i could be of help
Linda
@Mee0wth
Jan 07 2017 11:42
@arinarjani ?
Tingxuan Zhang
@tingxuanz
Jan 07 2017 13:11
blob
Hi, can anyone help me with my "Build a Personal Portfolio Webpage" project? http://codepen.io/shangzki/pen/vgOdmw?editors=1100
why there is a gap between 2 divs
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:15
@tingxuanz Your grid is not proper.
Tingxuan Zhang
@tingxuanz
Jan 07 2017 13:15
blob
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:16
<div class="col-md-1"> this means the element will take 1 column on medium screens
Also, navigation items should be done using <ul> and <li> tags
jolio007
@jolio007
Jan 07 2017 13:17
Hey guys! I made a <di></div> in which I added a <h1> and a <li> inside. My div has a background set to red. the header has a red background whereas the list isn't covered by red - https://codepen.io/jolio007/pen/OXZLyG
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:18
@tingxuanz Please check these examples - http://getbootstrap.com/getting-started/#template It will help you get started easily
Tingxuan Zhang
@tingxuanz
Jan 07 2017 13:19
@NitinNair89 thank u!
CamperBot
@camperbot
Jan 07 2017 13:19
tingxuanz sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:19
@tingxuanz Welcome! Let me know if you need help :)
@jolio007 the list items change background color on HOVER.. What do you want?
jolio007
@jolio007
Jan 07 2017 13:20
on hover?
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:21
yes.. move your mouse on them @jolio007
jolio007
@jolio007
Jan 07 2017 13:21
@NitinNair89 It doesn't do that for me. Also I don't want them to do that. I want the background to always be there
Ahhhh I know i made a mistake thank you
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:22
@jolio007 :D
That's good
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:33
Hi, i need help with float labels
in one of the form sections, I can't click on the input area covered by the label. However in the rest of the form, I don't face any such problem.
Pieter Stokkink
@forkerino
Jan 07 2017 13:38
@relentless-coder can you show us the code?
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:42
@forkerino wait, i'll post the codepen link
Deepanshu Bendale
@deepanshubendale
Jan 07 2017 13:44
@jacobus-brogly :+1:
Pieter Stokkink
@forkerino
Jan 07 2017 13:44
@jacobus-brogly Looks amazing. I played several games and came up with a bug: in my last game, I let the AI win on the last move, but got the message that there was a tie.
I am also able to win a game (just found out), which shouldn't be possible according to the instructions.
jacobus-brogly
@jacobus-brogly
Jan 07 2017 13:46
@forkerino not sure what you mean do you have a screenshot?
Pieter Stokkink
@forkerino
Jan 07 2017 13:48
iwon.png
Sorry, don't have a screenshot of the tie that was an AI win
But here you can see I won a game.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 13:49
Do I need to learn AJAX to do the Wikipedia Viewer? I'm really confused. I don't get how to use the API.
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:49
Pieter Stokkink
@forkerino
Jan 07 2017 13:50
iwonagain.png
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:53
@playingwithinfinity yes, you'd need to know a little bit of AJAX. lookup net ninja's tutorial on youtube. Also, don't freak out. The documents for APIs are easy to follow through.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 13:54
@relentless-coder What documents for API? I don't get a single thing.
Will Pittman
@willpittman432
Jan 07 2017 13:54
Hello, can anyone help me with this issue? First off, I do most of my coding on IE. Now when I set a background img on codepen, it is visible in IE but not firefox. Here is my code: background-image: url('https://cdn.pixabay.com/photo/2016/08/20/01/08/gaming-1606694_960_720.png'); Is there something I should be doing differently? Thanks.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 13:56
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 13:56
check the firefox browser console (dev tools) for any errors.
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:56
@playingwithinfinity the service whose API you'd want to use, they provide with an easy to follow along document.
@playingwithinfinity yes. there is a whole playlist on AJAX.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 13:57
@relentless-coder I don't find Wikipedia's documentation easy.
@Mee0wth There are bootstrap tables. Look it up on the bootstrap website.
Ayush Bahuguna
@relentless-coder
Jan 07 2017 13:59
@playingwithinfinity first understand AJAX, then all you'd have to do is to replace the url, plus a few more easy things.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 14:00
@relentless-coder Okay.
Pieter Stokkink
@forkerino
Jan 07 2017 14:02
@relentless-coder I have no idea how to solve your problem. MDN gives only two examples for the <label> tag and they both work when clicked. However, they are not giving an example where the label is inside the input field. Perhaps the element is covering the input field.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Ayush Bahuguna
@relentless-coder
Jan 07 2017 14:03
but it is working for a different section in th same form. I have gone through each line, and they are same sections.
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:03
@forkerino yeah lol, if yuo read correctly it is mentioning the pawn for the NEXT GAME, so it is correct
Ayush Bahuguna
@relentless-coder
Jan 07 2017 14:05
@forkerino it worked. Lol, I had mentioned input's name instead of the id. thanks for looking up things.
CamperBot
@camperbot
Jan 07 2017 14:05
relentless-coder sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 554 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Jan 07 2017 14:05
@relentless-coder :+1:
@jacobus-brogly Ah, they changed the project so you don't have to build an a.i. that never loses. I thought it was part of the specs. Either way, the first bug still holds, I intentionally lost a game and the popup said that I tied.
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:08
@forkerino your screenshot said someone was winning ,not "a tie"
if you can reproduce an incorrect result , that would be nice
playingwithinfinity
@playingwithinfinity
Jan 07 2017 14:09
@relentless-coder These AJAX tutorials are way too hard to understand.
Pieter Stokkink
@forkerino
Jan 07 2017 14:10

@jacobus-brogly Yes, that was the second 'bug' which was a 'bonus user story', not required. I thought it was required.

Anyway. I reproduced the first bug:

game.png
result.png
It said tie when I actually lost
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:11
@forkerino great find
they changed the requirements for 1st cert, this program is for the older version
Pieter Stokkink
@forkerino
Jan 07 2017 14:12
ah ok.
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:12
not sure about second "bug"
the "tie" is great find, easy to fix
thanks @forkerino
CamperBot
@camperbot
Jan 07 2017 14:13
jacobus-brogly sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 555 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Jan 07 2017 14:13
@jacobus-brogly :+1:
Ayush Bahuguna
@relentless-coder
Jan 07 2017 14:13
@playingwithinfinity dude give it some time. You won't get it in just 5 minutes. If it's language/accent problem, then you can lookup some other tutorials
Abdelrahman
@ARhman
Jan 07 2017 14:17
@playingwithinfinity Actually, freecodecamp teaches nothing on its own. It just sets a path of challenges that forces you to learn.
playingwithinfinity
@playingwithinfinity
Jan 07 2017 14:20
@ARhman That's true.
But overall the learning process is way slower than I expected.
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:26
I disagree. For absolute beginners, the learning curve is large.
But yes, they should have more in-depth challenges on topics
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:26
@NitinNair89 , what is absoluute beginner?
playingwithinfinity
@playingwithinfinity
Jan 07 2017 14:26
@NitinNair89 That's exactly what I meant.
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:26
I think is best to use FCC as guide to learn , learn more by reading JS books
my CSS/JS skills come from reading books
not FCC
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:27
@jacobus-brogly Absolute Beginners refer to those who are totally new to web development technologies.. starting from HTML, etc.
@jacobus-brogly I love learn-by-doing... :D
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:28
@NitinNair89 if you dont read books then it will be long road for you, but do what is best for you
some books have lots of exercises, not worry about "doing"
only
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:29
I don't get time to read books now a days, that's why
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:29
lol ok
you have time in this chat though))
:P
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:30
I am not just "chatting".. I am doing something on my website
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:31
great
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:35
where can i learn CSS SVG ?
I don't get a good website to learn it :(
*didn't
Andrew
@Aalis
Jan 07 2017 14:40
please help. dropdown menu in navbar overlaping image. how do i fix it? https://codepen.io/aalis/pen/egmmeW
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:45
@NitinNair89 i know a good book
@Aalis nice
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:49
@jacobus-brogly is e-book available?
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:50
all my books are pdf
yes all boosk have pdf version
is normal
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:51
pls suggest, i thought you were talking about the usual books, i can read pdf
I am sure you can find bootleg))
I learned svg from this
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:52
@Aalis Please remove the height from your navbar CSS: height: 50px;
jacobus-brogly
@jacobus-brogly
Jan 07 2017 14:52
you dont have time to read usual books, but pdf is not a problem,)))) ok
:P
I gotta go, take care you all)
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 14:53
366 pages??? OMG
@jacobus-brogly Bye.. Cya :wave:
Andrew
@Aalis
Jan 07 2017 15:04
@NitinNair89 thx it helped
CamperBot
@camperbot
Jan 07 2017 15:04
aalis sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:09
Welcome! Glad i could be of help @Aalis :)
André
@pennyJack
Jan 07 2017 15:12
Hey guys! Can somebody recommend a hoster for my images (e.g. for implementation / linking into my Portfolio Page on Codepen etc.), who values privacy? I mean, apparently there are plenty of choices out there, but I don't just wanna upload them on the first server that comes along. I'd like to still have control over my files, if you know what I mean.
Sorin Ruse
@sorinr
Jan 07 2017 15:21
@pennyJack cloudinary is nice
André
@pennyJack
Jan 07 2017 15:24
@sorinr Thanks! Looks pretty good! :)
CamperBot
@camperbot
Jan 07 2017 15:24
pennyjack sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1047 | @sorinr |http://www.freecodecamp.com/sorinr
badalsaibo
@heyDante
Jan 07 2017 15:32
How does one add animation while linking to a specific content in a webpage?
Ava
@AvaM
Jan 07 2017 15:33

The system is not accepting the ".smaller-image" code I'm using for the CatPhotoApp task. Here is the full style code I'm using: <style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

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

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

This might be easier to read:
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

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

.smaller-image {width: 100px;
}
</style>
badalsaibo
@heyDante
Jan 07 2017 15:34
  • .smaller-image {
make smaller-image content properly like the others
Ava
@AvaM
Jan 07 2017 15:36
@heyDante I tried this code also, as you're saying - do you see the error?:
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

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

img {.smaller-image {width: 100px;
}
}
</style>
badalsaibo
@heyDante
Jan 07 2017 15:38
can you give the chapter name?
Ava
@AvaM
Jan 07 2017 15:38
@heyDante ok, one sec - let me look
badalsaibo
@heyDante
Jan 07 2017 15:40
try this code
.smaller-image {
width: 100px;
}
you have written in in-correct order
Ava
@AvaM
Jan 07 2017 15:40
@heyDante It's called "Size Your Image" - it's the 6th one listed under Front End Development Certification "HTML5 and CSS"
badalsaibo
@heyDante
Jan 07 2017 15:42

@AvaM

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

h2 {
font-family: Lobster, Monospace;
}

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

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

Ava
@AvaM
Jan 07 2017 15:43
The first code I tried was using what you have: .smaller-image {width: 100px;
}
Perhaps I have to push "enter"
they have to be on separate lines like you have it
Let me try
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:43
@AvaM Can you post your html as well?
Ava
@AvaM
Jan 07 2017 15:45
@heyDante ok, I retried it on separate lines - the system isn't accepting it still:

rel="stylesheet" type="text/css">

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

h2 {
font-family: Lobster, Monospace;
}

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

.smaller-image {
width: 100px;
}

</style>

@NitinNair89 sure! on sec
Yeah, maybe there's something wrong somewhere else...
@NitinNair89 Here is the full html:

<link href="https://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;
}

.smaller-image {
width: 100px;
}

</style>

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

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<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 class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

badalsaibo
@heyDante
Jan 07 2017 15:47
you didn't add class = "smaller-image"
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
Ava
@AvaM
Jan 07 2017 15:48
@heyDante oh...I didn't know about that - ok, let me try
badalsaibo
@heyDante
Jan 07 2017 15:48
You have just defined the class, but didn't use on your code.
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:51
@AvaM That's what I guessed as there was nothing wrong with the CSS.
Ava
@AvaM
Jan 07 2017 15:54
@heyDante Thank you!
CamperBot
@camperbot
Jan 07 2017 15:54
:cookie: 126 | @heydante |http://www.freecodecamp.com/heydante
avam sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
Ava
@AvaM
Jan 07 2017 15:54
I put this in and it worked:
<img class = "smaller-image" img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
@NitinNair89 Thank you!
CamperBot
@camperbot
Jan 07 2017 15:54
avam sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Ava
@AvaM
Jan 07 2017 15:55
On with my day! lol
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:55
Good job @AvaM ! :)
Ava
@AvaM
Jan 07 2017 15:55
:D
badalsaibo
@heyDante
Jan 07 2017 15:57
gl
Gaston Kirsman
@gastikirs
Jan 07 2017 15:58
Guys, can anyone help me with something about my grid system ?
If I have a grid system of 3 rows. (each one has 33.3% of the windows width)
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:58
Hi @gastikirs :)
Gaston Kirsman
@gastikirs
Jan 07 2017 15:58
@NitinNair89 Hello :)
And then I want that if someone clicks in the first row , the content of the other 2 rows dissapear, and instead of that, a pharagraph of 66.66% width appears
How can I achieve that?
I can do the fadeout and the pharagraph appeareance in jquery, thats not the problem
The issue starts with the grid system
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 15:59
can show your HTML?
Are you using bootstrap?
Gaston Kirsman
@gastikirs
Jan 07 2017 16:00
|Sure
Nope
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 16:00
then? Flex?
Foundation?
Or created your own?
Gaston Kirsman
@gastikirs
Jan 07 2017 16:00
I created my own grid system
<div class="row row--gutters row--equal-height-at-medium">

                    <div class="row__medium-4">
                        <div class="work" id="work-gds">
                            <div class="work__picture">
                                <picture>
                                    <img src="assets/images/gdsmodellica.png" alt="Git a Web Developer Job" class="work__image">
                                </picture>
                            </div>
                            <div class="work__content">
                                <h1 class="work__name">GDS Modellica</h1>
                                <p class="work__description">Worked as a developer</p>
                            </div>
                        </div>

                    </div>

                    <div class="row__medium-4">
                        <div class="work" id="work-almashopping">
                            <img src="assets/images/almashopping.png" alt="Git a Web Developer Job" class="work__image">
                            <div class="work__content">
                                <h1 class="work__name">AlmaShopping</h1>
                                <p class="work__description">Webmaster of the site</p>
                            </div>
                        </div>
                    </div>

                    <div class="row__medium-4">
                        <div class="work" id="work-growit">
                            <img src="assets/images/growit.png" alt="Git a Web Developer Job" class="work__image">
                            <div class="work__content">
                                <h1 class="work__name">GrowIT</h1>
                                <p class="work__description">Developer and support. Worked with SugarCRM</p>
                            </div>
                        </div>
                    </div>
So I have 3 rows of 33.33% of the width each
Lets say I want to click the content of the first row, and make the second and third row dissapear, and instead of all that content, a row of size 8 (66.6%) appears with the pharagraph
badalsaibo
@heyDante
Jan 07 2017 16:02
isn't row-md-4 the correct order.
Sorry i don't know much
Gaston Kirsman
@gastikirs
Jan 07 2017 16:02
@heyDante It is not bs, I made my own grid system
badalsaibo
@heyDante
Jan 07 2017 16:04
oh sorry I told you, i don't know which
Sorin Ruse
@sorinr
Jan 07 2017 16:04
@gastikirs actually you have a row with 3 columns (row_medium_4) in it.right?
Gaston Kirsman
@gastikirs
Jan 07 2017 16:05
@sorinr Yes
ohhh |I got ittttttt
Sorin Ruse
@sorinr
Jan 07 2017 16:08
@gastikirs when you click the first column that contain the div with id="work-gds" you want to hide the column 2 and 3 and make column 1 width 66.66% instead of 33.33%. right?
Gaston Kirsman
@gastikirs
Jan 07 2017 16:09
@sorinr I want a new column with 66% to appear
But i got it i think
Sorin Ruse
@sorinr
Jan 07 2017 16:12
@gastikirs this new column of 66% it has to be display: none; and you have to toggle display property for all columns ( for the initial 3 columns to shange it to none and for this one to display: block or waterver you want)
Cody Byers
@xcbyers
Jan 07 2017 16:12
Could anyone give me a little help on Javascript, I’m in the front end chapter
Gaston Kirsman
@gastikirs
Jan 07 2017 16:14
@sorinr ty!! thats what i thought
CamperBot
@camperbot
Jan 07 2017 16:14
gastikirs sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1048 | @sorinr |http://www.freecodecamp.com/sorinr
Cody Byers
@xcbyers
Jan 07 2017 16:15
The idea is to declare myVar only inside “myLocalScope” but I’ve had no luck declaring it
function myLocalScope() {
  'use strict';


  console.log(myVar);
}
myLocalScope();

// Run and check the console
// myVar is not defined outside of myLocalScope
console.log(myVar);

// Now remove the console log line to pass the test
Phillip Troutman
@troutman21
Jan 07 2017 16:16
so im trying to get rid of this white space between my navigation bar and the first background on my page.... ive set all the margins to 0px... how do i get rid of it ?! http://codepen.io/Troutman21/pen/PbrQqE?editors=1100
Cody Byers
@xcbyers
Jan 07 2017 16:17
Well I got it to work, now I just don’t understand why.
Cory O'Dell
@coryodell28
Jan 07 2017 16:18
@troutman21 I had the same issue. I believe I fixed it by adding padding, in your case it'd be to #background-1
I'm sure someone more knowledgeable can hop in here and correct me though
Ritvars
@RitvarsZ
Jan 07 2017 16:19

Need help making my twitch status app. Just started it, looking at the Api, I need to get a json request with multiple streamers. How do I do that?

var url = "https://wind-bow.gomix.me/twitch-api/streams?channel=OgamingSC2,cretetion";
    $.ajax ({
        dataType: "json",
        url: url,
        success: function(data){
            console.log(data);    
        }
    });

I read that with ?channel= you can specify multiple streams, but console.log returns a 403 error.
Not sure if I should do it this way, another way would be to make a ton of json requests and make em into one big(like with a for loop or smth), but not sure how to do that.

Any tips on making this project?

@troutman21 You should verify your email, so we can get full page view
julienalexandre
@julienalexandre
Jan 07 2017 16:21
Hey guys. Can anyone tell me why I'm getting 'unexpected token' in my javascript? Mucho Gracias
http://codepen.io/julienalexandre/pen/KawGvv
Phillip Troutman
@troutman21
Jan 07 2017 16:23
Hmmm ill give it a shot @coryodell28 I just don't see how it would be a padding issue. Man i hate working on backgrounds
Verify my email ? @RitvarsZ
where do i do that? lol
Ritvars
@RitvarsZ
Jan 07 2017 16:24

@julienalexandre
replace

$("#tweet").on("click", function) {
window.open("https://twitter.com/intent/tweet"+randomQuote + " " + randomAuthor);
  });

with

$("#tweet").on("click", function() {
window.open("https://twitter.com/intent/tweet"+randomQuote + " " + randomAuthor);
  });

function was missing '('

Cory O'Dell
@coryodell28
Jan 07 2017 16:24
I still dont really get it either. I created a class called content-section for each section (home, about, etc) and added padding of 5px 0px 10px 0px
and it worked
julienalexandre
@julienalexandre
Jan 07 2017 16:24
thanks @RitvarsZ
CamperBot
@camperbot
Jan 07 2017 16:24
julienalexandre sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
Phillip Troutman
@troutman21
Jan 07 2017 16:25
so weird. @coryodell28 alright sounds good. Thanks
CamperBot
@camperbot
Jan 07 2017 16:25
troutman21 sends brownie points to @coryodell28 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @coryodell28 |http://www.freecodecamp.com/coryodell28
Cory O'Dell
@coryodell28
Jan 07 2017 16:26
let me know if it works. because if not i'll have to figure out what else I did on mine to get rid of the space
Phillip Troutman
@troutman21
Jan 07 2017 16:27
sounds good. im going to set up the other two bg s first then ill give it a shot.
@coryodell28
Ritvars
@RitvarsZ
Jan 07 2017 16:28
@troutman21 I your email, idk :D
julienalexandre
@julienalexandre
Jan 07 2017 16:28
Can someone tell me why openwindow is not working in my javascript? http://codepen.io/julienalexandre/pen/KawGvv
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 16:30
@troutman21 Please fix your HTML window. Only content within the <body> tag should be put there. Also why did you put a <body> tag inside a <div> ? That's not correct.
badalsaibo
@heyDante
Jan 07 2017 16:30
@julienalexandre open window doesn't work on CodePen.
@julienalexandre Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 16:31
@troutman21 Also since <div> is a block element, there would be some space around it. You can use margin-top: -20px; to remove that space in your code for 'background1```
Sorin Ruse
@sorinr
Jan 07 2017 16:41
@troutman21 your problem comes from h2 so you can do h2#about{ margin-top:0; }
Phillip Troutman
@troutman21
Jan 07 2017 16:44
@NitinNair89 Code is fixed thanks for the pointer.
CamperBot
@camperbot
Jan 07 2017 16:44
:cookie: 375 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
troutman21 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
cjljohnson
@cjljohnson
Jan 07 2017 16:45
Hey is this the channel for CSS help?
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 16:46
@cjljohnson All front-end. Please post your query
Phillip Troutman
@troutman21
Jan 07 2017 16:47
@sorinr As always coming in clutch. thanks sir
CamperBot
@camperbot
Jan 07 2017 16:47
:star2: 1049 | @sorinr |http://www.freecodecamp.com/sorinr
troutman21 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
cjljohnson
@cjljohnson
Jan 07 2017 16:47
When i try to transition the bg colro and color at the same time it doesn't work
If i comment out the color transition the bg color transition will work
Nitin Chandran Nair
@NitinNair89
Jan 07 2017 16:47
Did you put coma-separated attributes in your CSS for transition property?
Sorin Ruse
@sorinr
Jan 07 2017 16:48
@troutman21 welcome
Phillip Troutman
@troutman21
Jan 07 2017 16:48
@coryodell28 take a look at @sorinr responce above.. it might be the same situation for you.
cjljohnson
@cjljohnson
Jan 07 2017 16:48
Ahh, i understand, the properties are overwriting each other
Henrik Christensen
@henrikac
Jan 07 2017 17:03
Why is this not working on mobile devices? :-/
toggleList.addEventListener('click', () => {
  if (projectList.style.display == 'none') {
    toggleList.textContent = 'Hide Projects';
    projectList.style.display = 'block';
  } else {
    toggleList.textContent = 'Show Projects';
    projectList.style.display = 'none';
  }
});
CoryCMyers
@CoryCMyers
Jan 07 2017 17:11
Anyone have recommendations for a good sites for info about usage of Media Queries and Visibility: x?
Sorin Ruse
@sorinr
Jan 07 2017 17:12
Ayush Bahuguna
@relentless-coder
Jan 07 2017 17:15
@henrikac for that we'd have to know what is projectList and toggleList
John Alcher
@alchermd
Jan 07 2017 17:20

Hey fellas. Anyone familiar with ES6 syntax here? I'm wondering why this.decrease and this.increase is not a function according to the console when I try to click the + and - on workLength

http://codepen.io/AlcherMD/pen/rjaBEb/

CoryCMyers
@CoryCMyers
Jan 07 2017 17:28

@sorinr

@media handheld and (orientation: portrait) {
     .if-handheld {
         visibility: visible;
     }
}

@media screen {
   .not-handheld {
      visibility: hidden;
   }
}

To create classes that will trigger for any handheld that is currently viewing in portrait mode and then remain hidden for a traditional screen yes?

Joanna Szpinda
@joanshpin
Jan 07 2017 17:38
hey, this is my random quote machine, if somebody wants to look: http://codepen.io/joanshpin/pen/rWmqOa any comments appreciated!
CoryCMyers
@CoryCMyers
Jan 07 2017 17:38
Or does anyone have input on if those would work or not?
can someone tell me why my pen looks fine, except when I link it here?
JD Tadlock
@jdtdesigns
Jan 07 2017 17:50
@alchermd You had a few errors. The update method didn't have the 'element' wrapped in a jquery selector. You were sending the workLength property to the increase method which was scoping the property locally to that method. To make sure and refer to the class property, you can just send a string with the prop name and then use bracket notation to select the prop using that string. Here's an example :
http://codepen.io/jdtadlock/pen/YNXjbV?editors=0010
Also, you were using function() which is es5 and scopes everything inside locally
make sure to use arrow functions () => {}
that will keep it scoped to the object(class)
Sorin Ruse
@sorinr
Jan 07 2017 18:01

@joanshpin i would add in sass :

button:focus
  outline: 0

to get rid of the button blue outline

JD Tadlock
@jdtdesigns
Jan 07 2017 18:03
@allenlswain Remove the 'portfolio-margin' class
JD Tadlock
@jdtdesigns
Jan 07 2017 18:06
@jacobus-brogly Nice!
jacobus-brogly
@jacobus-brogly
Jan 07 2017 18:06
))
allenlswain
@allenlswain
Jan 07 2017 18:07
@jdtdesigns didn't seem to work.
JD Tadlock
@jdtdesigns
Jan 07 2017 18:07
@sorinr It's outline: none; i believe
@allenlswain Works on my end
It's no longer smashed to center
Sorin Ruse
@sorinr
Jan 07 2017 18:08
@jdtdesigns tested with 0 and it works. think its also working with none
hmm... it's still messed upp on my end
*up
Sorin Ruse
@sorinr
Jan 07 2017 18:11
@jdtdesigns yea. its working both with 0 or none. think more correctly is none.
kenobijr
@kenobijr
Jan 07 2017 18:20
hey ho, got a little problem with my twitch viewer: when I click at the "online" button to hide all offline channels, the main container is moved around 2 pixels to right. when I click on "all" or "offline", the container is moved back to the originally position. I got no idea whats triggering this behavior. Anybody got an idea? would be great :) thx in advance!
here´s my pen:
http://codepen.io/kenobijr/pen/VmBxeo
JD Tadlock
@jdtdesigns
Jan 07 2017 18:20
@kenobijr It's just the browser scrollbar
Happens when there's not enough content on the page to show it, so everything shifts over as it's removed or shown
No biggy
Phillip Troutman
@troutman21
Jan 07 2017 18:23
does anyone know how i can get my 3 different background images to expand the length of the screen? https://codepen.io/Troutman21/pen/PbrQqE?editors=1100
Henrik Christensen
@henrikac
Jan 07 2017 18:23

@relentless-coder doing a re-post with the info you requested:

Why is this not working on mobile devices?

const toggleList = document.querySelector('#toggleList');
const projectList = document.querySelector('#projectList');

toggleList.addEventListener('click', () => {
  if (projectList.style.display == 'none') {
    toggleList.textContent = 'Hide Projects';
    projectList.style.display = 'block';
  } else {
    toggleList.textContent = 'Show Projects';
    projectList.style.display = 'none';
  }
});
<button id="toggleList" class="btn btn-primary center-block">Show Projects</button>
        <div id="projectList" class="row">
          <button class="col-xs-4 col-xs-offset-4 btn btn-primary weather-list lists">WeaterApp</button>
          <button class="col-xs-4 col-xs-offset-4 btn btn-primary quote-list lists">QuoteApp</button>
          <button class="col-xs-4 col-xs-offset-4 btn btn-primary wiki-list lists">WikiApp</button>
          <button class="col-xs-4 col-xs-offset-4 btn btn-primary rps-list lists">Rock...App</button>
        </div>
kenobijr
@kenobijr
Jan 07 2017 18:24
@jdtdesigns Thank you a lot! :)
CamperBot
@camperbot
Jan 07 2017 18:24
kenobijr sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 813 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
CoryCMyers
@CoryCMyers
Jan 07 2017 18:25
@troutman21 pursuing
Sorin Ruse
@sorinr
Jan 07 2017 18:27
@kenobijr you can add this in css:
html {
  overflow-y: scroll;
}
Phillip Troutman
@troutman21
Jan 07 2017 18:27
Thanks @CoryCMyers i just figured it out
CamperBot
@camperbot
Jan 07 2017 18:27
troutman21 sends brownie points to @corycmyers :sparkles: :thumbsup: :sparkles:
:cookie: 168 | @corycmyers |http://www.freecodecamp.com/corycmyers
JD Tadlock
@jdtdesigns
Jan 07 2017 18:27
@troutman21 That happens when you wrap your sections in a container with padding.
Phillip Troutman
@troutman21
Jan 07 2017 18:27
Had to put background-size:100% 100%;
Sorin Ruse
@sorinr
Jan 07 2017 18:27
@kenobijr vertical scrollbar will be visible all time but active only when needed
kenobijr
@kenobijr
Jan 07 2017 18:29
@sorinr thank u sir, I was already searching for a solution on google, but u were faster, thats it, problem solved ;)
CamperBot
@camperbot
Jan 07 2017 18:29
kenobijr sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1050 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 07 2017 18:30
@kenobijr welcome
kevinliu6102
@kevinliu6102
Jan 07 2017 18:31
So I'm trying to my search function to work with pressing the 'enter' key, but it just refreshes the page on codepen. Is there some limitation with codepen here? My pen: http://codepen.io/keebin/pen/RKbzWj
Tom
@moT01
Jan 07 2017 18:33
@kevinliu6102 look up preventdefault(), i think that will do it for ya
Adel
@AdelMahjoub
Jan 07 2017 18:44
@kevinliu6102 for the form, onSubmit(e)
@kevinliu6102 add e.preventDefault()
@kevinliu6102 or get rid of the form and add window.addEventListener('keydown
@kevinliu6102 and switch the e.keyCode, 13 for Enter key
kevinliu6102
@kevinliu6102
Jan 07 2017 19:01
ugh tried both jquery and vanilla js and it's not working
i think i'm confused lol
can one of you check my code and see if i'm doing something wrong
Tom
@moT01
Jan 07 2017 19:23
@kevinliu6102
http://codepen.io/moT01/pen/LRoxrQ?editors=1010
check out how i did it, ...pretty close
Beeleyt350
@Beeleyt350
Jan 07 2017 19:25
I can't seem to get my image to show on my pen. Can anyone help? Also, overtype mode seems to be on in codepen. Does anyone know how to turn it off?
Hello911
@Hello911
Jan 07 2017 19:26
@Hello911
https://codepen.io/Hello911/pen/XpbPyM?editors=1010
How do I eliminate the image not loading sign to the left?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:26
Hey guys and girls ;)
I am creating a blog for my school, but because the school's server doesn't support PHP I hosted it on another server.
So my current plan is creating a fullscreen iframe, but I wonder if there are any disatvangaes using it as an iframe.
Does anyone of you know that?
@Hello911 What about removing the broken image link (<img src="http://imgur.com/ifkpFbR">)?
Hello911
@Hello911
Jan 07 2017 19:29
@Otto-AA Then my image will disappear?
Why is it broken>
??
Adam Morris
@Adam-Morris
Jan 07 2017 19:29
@Hello911 Remember, you need to have an alt on an image.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:30
@Hello911 You need to specify the direct url to image. So it has to have a .jpg, .png, ... which this one doesn't
@Hello911 Right click on the picture -> Show picture and then copy that url
Adam Morris
@Adam-Morris
Jan 07 2017 19:30
Oh, yes that's true laos
also*
Hello911
@Hello911
Jan 07 2017 19:32
@Otto-AA Problem solved. Thnx
CamperBot
@camperbot
Jan 07 2017 19:32
:cookie: 382 | @otto-aa |http://www.freecodecamp.com/otto-aa
hello911 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:32
@Hello911 You're welcome
Beeleyt350
@Beeleyt350
Jan 07 2017 19:34

<head>
<title> My first tribute page </title>
</head>
<body>
<h1> <em> A tribute to </em>
<h2> Sir Winston Churchill </h2>
<img src="https://www.google.com.cy/imgres?imgurl=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2014%2F07%2F19%2F11%2F31%2Fsir-winston-churchill-396973_960_720.jpg&imgrefurl=https%3A%2F%2Fpixabay.com%2Fen%2Fsir-winston-churchill-british-396973%2F&docid=w4Azw4fOujbMuM&tbnid=NGVMrRCvudHQtM%3A&vet=1&w=576&h=720&bih=685&biw=1438&q=winston%20churchill&ved=0ahUKEwiP0py_3bDRAhUBwBQKHe_pAX0QMwgeKAYwBg&iact=mrc&uact=8" alt="Sir Winston Churchill" width="500" height="500" />

<div id="Wikilink">
<a href="https://en.wikipedia.org/wiki/Winston_Churchill"target="blank">Further info </a>
</div>
</body>

Any ideas why this image will not show on my screen?
Adam Morris
@Adam-Morris
Jan 07 2017 19:34
@Beeleyt350 Please, paste it in a pastebin or something, atleast put backticks ` around it!
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:35
Try it with that src: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSHvF1BcIrySugOwSfOssQQXoUxCs8JEAAYVX2lfKL2asRPyLpsQ
Beeleyt350
@Beeleyt350
Jan 07 2017 19:35
@Adam-Morris what do you mean?
im new to this.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:36
@Hello911 I forgot something: I made a mistake: It doesn't neccessarily has to have a .jpg ending.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:36
<head>
    <title> My first tribute page </title>
  </head>
  <body>
    <h1> <em> A tribute to </em> 
    <h2> Sir Winston Churchill </h2>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSHvF1BcIrySugOwSfOssQQXoUxCs8JEAAYVX2lfKL2asRPyLpsQ" alt="Sir Winston Churchill" width="500" height="500" />

 <div id="Wikilink">
      <a href="https://en.wikipedia.org/wiki/Winston_Churchill"target="blank">Further info </a>
   </div>
</body>
Adam Morris
@Adam-Morris
Jan 07 2017 19:36
@Beeleyt350 Don't paste raw code into chat, paste it into a pastebin and give us the link to that, or do that ^^^
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:37
@Adam-Morris :+1:
Beeleyt350
@Beeleyt350
Jan 07 2017 19:37
oh ok. perfect. Point taken.
@Adam-Morris thank you for your help.
CamperBot
@camperbot
Jan 07 2017 19:37
beeleyt350 sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 147 | @adam-morris |http://www.freecodecamp.com/adam-morris
Adam Morris
@Adam-Morris
Jan 07 2017 19:38
to do that put backticks ` around your code
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:38
please tell me what's wrong here
Beeleyt350
@Beeleyt350
Jan 07 2017 19:38
@Otto-AA thank you
CamperBot
@camperbot
Jan 07 2017 19:38
beeleyt350 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @otto-aa |http://www.freecodecamp.com/otto-aa
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:38
  $(document).ready(function(){
  $("h1").addClass("animated shake");
});
  </script>
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:39
@akdsrajput Seems correct. Can you link it somehow?
Adam Morris
@Adam-Morris
Jan 07 2017 19:39
Yeah, it works for me, can you give the full code?
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:43
i am getting error
'unexpected token <'
  $(document).ready(function(){
  $("h1").addClass("animated shake");
});
  </script>
Adam Morris
@Adam-Morris
Jan 07 2017 19:43
Is that all of your JS @akdsrajput ?
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:43
@Adam-Morris yes
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:44
@akdsrajput Do you have an opening tag <script type="text/javascript">?
Adam Morris
@Adam-Morris
Jan 07 2017 19:44
@akdsrajput Get rid of the </script> ?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:44
or that
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:45
<script>
$(document).ready(function(){
$("h1").addClass("animated shake");
});
</script>
Adam Morris
@Adam-Morris
Jan 07 2017 19:45
you need to do <script type="text/javascript"> i think
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:46
@akdsrajput In what kind of file do you have this?
Adam Morris
@Adam-Morris
Jan 07 2017 19:46
Go here and scroll down and click on "tap to see the result" in the big white box. And then, be amazed at how someone made thise with just JS...
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:48
@Adam-Morris not w @Otto-AA i am woking in codepen.io
Beeleyt350
@Beeleyt350
Jan 07 2017 19:48
Any ideas on how to stop overtype mode in code pen guys? It is really annoying when I am trying to edit my code.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:48
@akdsrajput Can you copy the url?
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:48
@Adam-Morris nothing happend
Adam Morris
@Adam-Morris
Jan 07 2017 19:49
@akdsrajput Is your JS code in the js screen in codepen?
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:49
Adam Morris
@Adam-Morris
Jan 07 2017 19:49
@akdsrajput Get rid of the <script> tags
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:49
@Beeleyt350 I don't know what the keys are for that on a english keyboard, but on my german it's on the numpad 0/Einfg(="insert") which will cause that behaviour in several editors
Adam Morris
@Adam-Morris
Jan 07 2017 19:50
 $(document).ready(function(){
  $("h1").addClass("animated shake");
});
Beeleyt350
@Beeleyt350
Jan 07 2017 19:50
@Otto-AA ok thank you. I will try that.
CamperBot
@camperbot
Jan 07 2017 19:50
beeleyt350 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:warning: beeleyt350 already gave otto-aa points
Akash Deep Singh
@akdsrajput
Jan 07 2017 19:51
@Adam-Morris i got it now it's working
thanks
CamperBot
@camperbot
Jan 07 2017 19:51
akdsrajput sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @adam-morris |http://www.freecodecamp.com/adam-morris
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 07 2017 19:51
@akdsrajput =D
Adam Morris
@Adam-Morris
Jan 07 2017 19:52
No problem
allenlswain
@allenlswain
Jan 07 2017 19:52
I don't know how to fix the scrambled codepen. It looks fine on my end but links badly
Adam Morris
@Adam-Morris
Jan 07 2017 19:52
@allenlswain Do you mean how the code is on top of each other?
sorry text not code
allenlswain
@allenlswain
Jan 07 2017 19:53
yeah and the buttons are aligned funny
it should look like this:
KasiaNyczek
@KasiaNyczek
Jan 07 2017 19:53
Question, in Build a Tribute Page use pure html and css or Bootstrap can be used as well?
allenlswain
@allenlswain
Jan 07 2017 19:53
hmm how do I link screenshots?
Adam Morris
@Adam-Morris
Jan 07 2017 19:54
@KasiaNyczek It says you may use an libraries you want. Or something like that.
Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
KasiaNyczek
@KasiaNyczek
Jan 07 2017 19:56
@Adam-Morris yes, indeed, thanks. I'm not sure where to add user stories.
CamperBot
@camperbot
Jan 07 2017 19:56
kasianyczek sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 149 | @adam-morris |http://www.freecodecamp.com/adam-morris
Adam Morris
@Adam-Morris
Jan 07 2017 19:57
@KasiaNyczek What it means by user stories, is that they are just requirements
@allenlswain Your text is all werid because it is inside a <div class="row">, I suggest removing most of the bootstrap from the text.
KasiaNyczek
@KasiaNyczek
Jan 07 2017 20:01
@Beeleyt350 from what I know you do not close img tag with /> and you did not closed <h1> at all
Adam Faraj
@adamfaraj
Jan 07 2017 20:02
how do i increase the padding on the left side of my menu items and decrease the space between the menu items?
KasiaNyczek
@KasiaNyczek
Jan 07 2017 20:02
@Adam-Morris thanks, I did not understand this properly! :)
CamperBot
@camperbot
Jan 07 2017 20:02
kasianyczek sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:warning: kasianyczek already gave adam-morris points
allenlswain
@allenlswain
Jan 07 2017 20:02
@adam morris
Adam Morris
@Adam-Morris
Jan 07 2017 20:03
@allenlswain
allenlswain
@allenlswain
Jan 07 2017 20:03
@Adam-Morris hmm... a row was the only way I could think to align the text with the picture horizontally
Adam Morris
@Adam-Morris
Jan 07 2017 20:03
@adamfaraj Are you talking about your navigation bar?
Adam Faraj
@adamfaraj
Jan 07 2017 20:03
@Adam-Morris yes
trying to make it look more like this:
https://codepen.io/FreeCodeCamp/full/YqLyXB/
Adam Morris
@Adam-Morris
Jan 07 2017 20:05

@adamfaraj Well, in your CSS you have this

li {
  list-style-type: none;
  text-align: center;
  float: right;
  padding-top: 30px;
  padding-right: 50px;
  font-size: 2em;
}

So reducing the padding-right would decrease the spacing between your list items.

Adam Faraj
@adamfaraj
Jan 07 2017 20:06
that didn't do anything
Adam Morris
@Adam-Morris
Jan 07 2017 20:06
:/
Adam Faraj
@adamfaraj
Jan 07 2017 20:07
got it
it was my .menu-items
Adam Morris
@Adam-Morris
Jan 07 2017 20:07
Oh, ok. Good job!
Adam Faraj
@adamfaraj
Jan 07 2017 20:07
decreased that padding right helped
you helped!
Adam Faraj
@adamfaraj
Jan 07 2017 20:17
ok
i'm a little lost
Adam Morris
@Adam-Morris
Jan 07 2017 20:17
?
Adam Faraj
@adamfaraj
Jan 07 2017 20:17
my hover is messed up and how do i adjust the nav bar?
my hover is showing random blocks
beside the logo and my menu items
Adam Morris
@Adam-Morris
Jan 07 2017 20:18
You don't want li a:hover you want li:hover
Adam Faraj
@adamfaraj
Jan 07 2017 20:19
what's the biggest difference?
Adam Morris
@Adam-Morris
Jan 07 2017 20:19
li a is the anchor inside the li
Adam Faraj
@adamfaraj
Jan 07 2017 20:19
ahh
gotcha
if you hover to the left of my logo
still got a random block
Adam Morris
@Adam-Morris
Jan 07 2017 20:21
This on works a little better:
li {
  list-style-type: none;
  text-align: center;
  float: right;
  padding-top: 30px;
  padding-right: 20px;
  font-size: 2em;
}

li:hover a
{
  text-decoration:none;
  color: #262626;          
}

li:hover {
  background-color: #722872;
  box-shadow: 1px 3px 7px 0px rgba(0,0,0,0.75);
}
Adam Faraj
@adamfaraj
Jan 07 2017 20:23
thanks!
still getting that hover block to the left
of the logo
Adam Morris
@Adam-Morris
Jan 07 2017 20:24
oh i see. hmm
Adam Faraj
@adamfaraj
Jan 07 2017 20:24
and how do i center the menu items when i hover
Adam Morris
@Adam-Morris
Jan 07 2017 20:25
instead of using li to target the li elements
add classes to them
but just dont add the class to the image
Adam Faraj
@adamfaraj
Jan 07 2017 20:27
they have the class=menu items
<ul id="nav-bar">
  <li class="menu-items"><a href="#contact">Contact</li>
  <li class="menu-items"><a href="#portfolio">Portfolio</li>
  <li class="menu-items"><a href="#about">About</li>
  <li id="logo"><a href><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" id="logopic"></a></li>
</ul>
Adam Morris
@Adam-Morris
Jan 07 2017 20:28
then use .menu-items {} instead of li {}
in your CSS
Adam Faraj
@adamfaraj
Jan 07 2017 20:30
there was more li{} that i had to change. got it
so regarding centering the nav bar text when i hover
because its to the left of the hover box
Adam Morris
@Adam-Morris
Jan 07 2017 20:32
I just add this to your CSS and it worked:
a {
  margin-left: 10px;
}
Adam Faraj
@adamfaraj
Jan 07 2017 20:33
why is it not padding?
Adam Morris
@Adam-Morris
Jan 07 2017 20:33
Send me link again?
i feel like my code looks so ugly
Adam Morris
@Adam-Morris
Jan 07 2017 20:35
#nav-bar{
  background-color: #722872;
  position: fixed;
  width: 100%;
  height: 100px;
  margin: 0%;
}

.menu-items {
  list-style-type: none;
  text-align: center;
  float: right;
  padding-top: 30px;
  padding-right: 20px;
  font-size: 2em;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
}
Change them to that
Adam Faraj
@adamfaraj
Jan 07 2017 20:36
oh wow. so much better
Adam Morris
@Adam-Morris
Jan 07 2017 20:36
also change your li { } to .menu-items { }
Hello911
@Hello911
Jan 07 2017 20:37
@Hello911
http://codepen.io/Hello911/pen/RKPejX
How to do Tribute and Portfolio each take up half of the 2nd row?
Adam Morris
@Adam-Morris
Jan 07 2017 20:39
@Hello911 In your css for Tribute and Portfolio, you have set the width to 50%. Change it to 100%.
Igor Amidzic
@igoramidzic
Jan 07 2017 20:39
Is there a way to change opacity of background-image?
Hello911
@Hello911
Jan 07 2017 20:39
@Adam-Morris Then each will take up the whole screen?
Adam Morris
@Adam-Morris
Jan 07 2017 20:40
@Hello911 Wait, what are you wanting?
Adam Faraj
@adamfaraj
Jan 07 2017 20:40
opacity: 0.90%;
Hello911
@Hello911
Jan 07 2017 20:40
I want Tribute and Portfolio each take up half.
@Adam-Morris
Adam Faraj
@adamfaraj
Jan 07 2017 20:40
opacity: 0.90;
.menu-items {
  list-style-type: none;
  text-align: center;
  float: right;
  padding-top: 30px;
  padding-right: 20px;
  font-size: 2em;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
  color: #d9d9d9;
}
Igor Amidzic
@igoramidzic
Jan 07 2017 20:42
@Adam-Morris That is for images in the html. I'm setting my background-image in css
Adam Faraj
@adamfaraj
Jan 07 2017 20:42
why isn't my menu item changing color
Adam Morris
@Adam-Morris
Jan 07 2017 20:42
@adamfaraj send me link
Igor Amidzic
@igoramidzic
Jan 07 2017 20:43
@Adam-Morris Sweet, thank you
CamperBot
@camperbot
Jan 07 2017 20:43
igoramidzic sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 161 | @adam-morris |http://www.freecodecamp.com/adam-morris
Adam Morris
@Adam-Morris
Jan 07 2017 20:45
@adamfaraj Do you mean background colour, or text colour?
Adam Faraj
@adamfaraj
Jan 07 2017 20:45
text color
it's staying blue
i wanted to change it to a light gray
color: #d9d9d9;
Adam Morris
@Adam-Morris
Jan 07 2017 20:46
it changes to dark grey for me
Hello911
@Hello911
Jan 07 2017 20:46
How do I make Tribute and Portfolio each take up EXACTLY half of the row? I set for Tribute flex: 0 1 50%; But Its box always seems to take up more space than Portfolio. http://codepen.io/Hello911/pen/RKPejX?editors=1100
Adam Faraj
@adamfaraj
Jan 07 2017 20:46
right, when you hover. trying to do it when not hovering
Hello911
@Hello911
Jan 07 2017 20:47
@adamfaraj Yeah, I need to know the specific problem before reading the whole page.
Adam Faraj
@adamfaraj
Jan 07 2017 20:48
try display: flex
damn
you have that already
would width:50% work?

.coloring-Project{
  background: #CCC;
  border-radius: 7px;
  margin: 5px;
 padding: 20px;
}

.flex{
  display: flex;
  flex-flow: row wrap;
}

.coloring-Project{
  order:1;
  flex: 0 1 100%;
}

.coloring-Tribute{
  order:2;
  flex: 0 1 50%;
  width: 50%;
}

.coloring-Portfolio{
  order:3;
  flex: 1;
  width: 50%;
}
i lost the grey box
but they seem to be in the middle now?
Adam Morris
@Adam-Morris
Jan 07 2017 20:57

.coloring{
  background: #CCC;
  border-radius: 7px;
  margin: 5px;
  padding: 20px;
}

.Project{
  width: 1855px;
}

.Tribute{
  width: 47%;
  float: right;
}

.Portfolio{
  width: 47%;
  float: left;
}
Replace your entie CSS with that
entire*
omg it's still messed up...
Adam Morris
@Adam-Morris
Jan 07 2017 21:02
Nice eyes by the way
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:07
@allenlswain You'll probably want to use either flex or bootstrap, but not both until you are more familiar with flex or begin studying flexbox utilities in Bootstrap v4
Also, using margins and paddings with pixels in the thousands will not work with mobile devices. For example:
.button-position {
  margin: 100px 10px 10px 3000px
}
.image-align {
 padding: -500px 0px 0px -2000px;
}
Adam Morris
@Adam-Morris
Jan 07 2017 21:07
@allenlswain Its because of your unnecessary bootstrap.
MIke
@chipotle298
Jan 07 2017 21:14
could someone show me how to have my photo and video resize itself , i.e. expand and shrink as i would expand and shrink my browser? Like as you can see for your self, right now my charlie murphy picture is spilling over if you "run pen" http://codepen.io/manczyk2/pen/zoeZEo
allenlswain
@allenlswain
Jan 07 2017 21:23
@Adam-Morris working on it. Thank you.
CamperBot
@camperbot
Jan 07 2017 21:23
allenlswain sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 174 | @adam-morris |http://www.freecodecamp.com/adam-morris
My form in the wikipedia challenge is only able to submit once, and I can only make a new search if I refresh the page. I can't seem to find a reason for this. Does anyone have an idea?
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:25
@chipotle298 Replace curly quotes with straight quotes in your HTML. Change: <img class=“img-responsive” to <img class="img-responsive"
MIke
@chipotle298
Jan 07 2017 21:27
@TylerMoeller hmmm let me see
Can someone help me? When ever i click on the link it turns into a blank page
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:28
@kevinliu6102 Your form is submitting just fine, but it's appending to the end of your previous search results. Clear the search results before your $.each() call.
Adam Morris
@Adam-Morris
Jan 07 2017 21:29
@Erick40 When using CodePen, <a> needs to have <a target="blank">
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:29
target="_blank"**
Adam Morris
@Adam-Morris
Jan 07 2017 21:30
@TylerMoeller It doesn't need to have an underline
Adam Morris
@Adam-Morris
Jan 07 2017 21:30
@Erick40 Your <a> should be <a href= "http://www.reed.edu" target="blank">Reed College</a>
or <a href= "http://www.reed.edu" target="_blank">Reed College</a>
Erick L.
@Erick40
Jan 07 2017 21:31
Thanks! @Adam-Morris
CamperBot
@camperbot
Jan 07 2017 21:31
erick40 sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 178 | @adam-morris |http://www.freecodecamp.com/adam-morris
MIke
@chipotle298
Jan 07 2017 21:31
@TylerMoeller hey yo, that worked! i would have never caught that!
@TylerMoeller is there any way i could make my video resize?
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:32

@Adam-Morris

If the given browsing context name is not _blank and there exists a browsing context whose name is the same as the given browsing context name, and the current browsing context is allowed to navigate that browsing context, and the user agent determines that the two browsing contexts are related enough that it is ok if they reach each other, then that browsing context must be the chosen one. If there are multiple matching browsing contexts, the user agent should select one in some arbitrary consistent manner, such as the most recently opened, most recently focused, or more closely related.

https://dev.w3.org/html5/spec-preview/browsers.html#valid-browsing-context-name-or-keyword

Adam Morris
@Adam-Morris
Jan 07 2017 21:32
@TylerMoeller That's confusing lol
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:33
@Adam-Morris Specs are like reading tax documents lol
@chipotle298 If it's a video, you probably have it in an iFrame? If so, then set width to a percentage
Adam Morris
@Adam-Morris
Jan 07 2017 21:33
Oh, it has a table at the link that says if the target does not exist, it will just open the link in a new tab
Tyler Moeller
@TylerMoeller
Jan 07 2017 21:34
Yeah, that's why it works I think, can probably be anything like target="foo"
Hello911
@Hello911
Jan 07 2017 21:34
Can someone plz tell me how I can make porfolio take up eactly half of the row?
Adam Morris
@Adam-Morris
Jan 07 2017 21:35
.Tribute{
  order:2;
  flex: 1 1;
}

.Portfolio{
  order:3;
  flex: 1 1;
}
Hello911
@Hello911
Jan 07 2017 21:40
@Adam-Morris just a question I don't the second number is flex shrink and 2 will take twice as much space as 1 will. But what does the first number flex grow does?
BTW, it works. THnx
kevinliu6102
@kevinliu6102
Jan 07 2017 21:42
@TylerMoeller beautiful, thanks a bunch!
CamperBot
@camperbot
Jan 07 2017 21:42
kevinliu6102 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1266 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adam Morris
@Adam-Morris
Jan 07 2017 21:42
@Hello911 I'm not sure. I don't know much about flex boxes. I just kinda guessed and it worked!
MIke
@chipotle298
Jan 07 2017 21:45
@TylerMoeller It is in Iframe. So i set the width to "100%" (from "640") but it still spilled over
Hello911
@Hello911
Jan 07 2017 21:52
@Adam-Morris Thanks.
CamperBot
@camperbot
Jan 07 2017 21:52
hello911 sends brownie points to @adam-morris :sparkles: :thumbsup: :sparkles:
:cookie: 193 | @adam-morris |http://www.freecodecamp.com/adam-morris
Adam Morris
@Adam-Morris
Jan 07 2017 21:58
Just got to 200 brownie points! :D
Tyler Moeller
@TylerMoeller
Jan 07 2017 22:04
@chipotle298 The video size should remain at the native resolution, but the iFrame itself needs to be at 100%. Here's an example: http://codepen.io/TylerMoeller/pen/oBXQwX
This article explains the code and numbers well: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
allenlswain
@allenlswain
Jan 07 2017 22:24
Is it okay to have a container-fluid with an image inside it, or will the codepen warp when I share it?
i'm still tryihng to figure out how to get an image and text on the same height with each other, and been stuck for days
Reggie
@Reggie01
Jan 07 2017 22:35
@TylerMoeller thanks for the fluid video width link
CamperBot
@camperbot
Jan 07 2017 22:35
reggie01 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1267 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 07 2017 22:43
yw :+1:
MIke
@chipotle298
Jan 07 2017 22:50
Thanks @TylerMoeller
CamperBot
@camperbot
Jan 07 2017 22:50
chipotle298 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1268 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
RslWlsn3
@RslWlsn3
Jan 07 2017 23:43
ok so how do you make the CodePen work show up on this chat?
uriznik
@uriznik
Jan 07 2017 23:44
just paste the link
GurkarnSD
@GurkarnSD
Jan 07 2017 23:44
Is it possible to uncheck a assignment you accidentally submited
sweet, thanks!
also the example for the project that im working on had almost no css and mostly used bootstrap. Should I follow that or can I use css for everything?
uriznik
@uriznik
Jan 07 2017 23:48
a lot of boostrap is just css
RslWlsn3
@RslWlsn3
Jan 07 2017 23:50
ok
uriznik
@uriznik
Jan 07 2017 23:50
so you could use bootstrap and learn about that, or try doing css yourself and learn that, eventually you'll want to know about both (or css + some other framework)
you could start off with basic bootstrap and also some basic css to get an intro to both
Sander Berntsen
@sbxn14
Jan 07 2017 23:58
http://codepen.io/sbxn14/pen/egmKRr?editors=1100 can someone help me? in my work section im trying to change the color of the links inside the picture. it wont work no matter what I do. tried different classes/tags and !important but nothing works. what am i missing?
Adam Morris
@Adam-Morris
Jan 07 2017 23:59
@allenlswain I have an image on the same height as text on this page I don't remember how I did it so you'll have to look at the code.