@dawnguard Scrollspy requires both jQuery and Bootstrap.js
Make sure you have those added to your project
@dawnguard Do you have a codepen to share?
fdsf
Hello
Hello, World
welcome to FreeCodeCamp @EdgarrGil!
testing
Nvm I figured it out
Hello. Does anybody know if for the Twitchtv JSON API challenge I am supposed to complete this challenge not calling the json but using the sample API response they're giving? Did I understand well?
perfect thanks @APRim05 @jdtdesigns
staceyland sends brownie points to @aprim05 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @aprim05 |http://www.freecodecamp.com/aprim05
:cookie: 610 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
@zarruk Twitch have just changed how to use their apis - you can have look here https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.53nij1bae
@GregatGit I know, but they require a client-ID which is impossible to get
@zarruk you need to start searching for how to get a client-ID
@GregatGit there are actually some instructions on how to, but they don't work
@zarruk i just found this - I recommend leaving this challenge for now and seeing what FCC want to do with it. There was a prievious challenge that they also canned.
@GregatGit should I not do it, then? I feel bad :worried: hahaha
@zarruk There are plenty more projects to pull your hair out over!
hahaha ok, so ill keep going on
@GregatGit how do i go on? do i enter any url?
just go to the map and click on the next challenge
If it's still there by the time you have finished the others then you can tackle it
hey guys, I just started up my old job and the hours are going to be long, but I still plan on looking for web dev jobs. I live about 4 hrs away from LA (where I want to get a web dev job), so since i'm working so many hours (12 hr shifts initially), I don't think i'd be able to drive there for interviews. Would it be ok to simply go by Skype interviews?
its up to the people who interview you @AmitP88
@Dirtier sure you can use em instead of px but this is just for a few css rules. if you want to for ex hide some elements on smaller screens or re position them, then you will have to use @media queries
Hi everyone :) I'm trying to figure out how to let someone send me a message and their email for my first portfolio project, any ideas? i've it up on google but there are a zillion different ways lol
Hey guys, so I built a random quote app using an array of quotes and an array of authors but I'm having trouble with the randomisation feature as sometimes it repeats the same quote twice or even three times in a row. Does anyone know of a solution? http://codepen.io/arapley/pen/YGGgLm
add more quotes @arapl3y, you only have a few
i have like 40
@coymeetsworld Appreciate the answer but surely there must be a way to prevent repetition even with only 3 quotes, like for instance canceling each used quote out until all have been used then reseting the group... I just don't know how to implement it
@arapl3y I set up an empty arr and everytime I used a quote I put the index into the arr. Then after generating a new index I would check if it had been used first
you could do taht @arapl3y, but just would be more complicated
than just adding more quotes
you use a large enough number the risk of getting same quote twice is minimal
if you use 20 thats a 400:1 chance against
7 is only 49:1
sorry 399:1 and 48:1 but yeah same idea
@coymeetsworld Totally understand the rationale! I guess I'd just rather see if I can eliminate the chance all together
@GregatGit Cool, that's along the lines of what I'm thinking, cheers
@arapl3y then you would need to cache the random number
if you want it so that you don't see a duplicate until you see all of them then you would need like an array or something like @GregatGit said
you can just push the values in there and use something like indexOf to check if its there
but i think that's overkill, and 7 quotes isn't that interesting IMO but yeah up to you
@coymeetsworld Haha yeah I already completed one using an API with hundreds of quotes. It's more about the challenge than it being interesting or useful. I'll have a crack using an array and indexOf... Thanks man.
arapl3y sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
I see alright then yeah np @arapl3y
another thing you could do is create an empty array for the quotes you used
pop the quote from the unused quote array and push into used
if the unused quote array is empty swap it with the used
maybe logic would be a little better that way
Can someone take a glance at my jquery and html and see what I'm doing wrong with manipulating my elements to fetch a new quote and replacing the href value in my html
http://codepen.io/luis4flames/pen/jrNqrR
http://codepen.io/luis4flames/pen/jrNqrR
Any kind soul out there who wouldn't mind walking me through this http://forismatic.com/en/api/ O.o
@luis4flames you library loading sequence should be jquery then bootstrap
@luis4flames this line has an error: $("#getMessage").on(click, function(){
click should be with " "
yea caught the missing quotes
Why do people write it that way? Why not just $('#getMessage').click(function(){
change the order of library loading and your code will work
@kirbyedy Thanks, didnt realize it made a difference to load one before the other
luis4flames sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1413 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@Dirtier the .on gives you more "power" its like the ajax call vs getJSON. here more info with examples: http://api.jquery.com/on/#direct-and-delegated-events
Ah
That makes more sense
thanks @sorinr
dirtier sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 732 | @sorinr |http://www.freecodecamp.com/sorinr
@Dirtier welcome
hey guys im trying to fade some buttons out in vanilla JS
[4:16]
it works but is a bit glitchy
[4:16]
when you click one button, a new div is meant to appear, which it does, but not alway :confused:
heres my codepen
[4:16]
http://codepen.io/JackEdwardLyons/pen/WGvrEd?editors=1010
@sorinr Could you perhaps walk me through ajax?
Or anyone?
@JackEdwardLyons set your 'choose oponent' div to display none in CSS and display it with javascript when you need it to appear, it will avoid the 'flash' when page loads
and for me when I click X or O, nothing happens
i changed my code
// Fade out buttons
function fadeOut(element) {
var opacity = 1,
fps = 1000/60;
function decrease () {
opacity -= 0.05;
if (opacity <= 0) {
opponent_button_container.setAttribute("style", "display: block; opacity: 1;");
// complete fadOut for both buttons
element.style.display = "none";
//opponent_button_container.style.display = "none"
return true;
}
element.style.opacity = opacity;
setTimeout(decrease, fps);
}
decrease();
}
that seems to work @Lakston
but yeha thanks for the flash help
it does on chrome but not on firefox
I was trying in FF :)
really
ok ill try
wow so shit
on IE it doesn't even display
can i use modernizr or something to fix that
You should try to fix your code instead, you should not need modernizr for that
topic:Sum All Primes
let me help to find bug in my code
let me help to find bug in my code
function sumPrimes(num) {
var sum=0;
for(var i=2;i<=num;i++){
var count=false;
for(var j=2;j<=i;j++){
if(i%j===0){
count=true;
break;
}
}
if (count===false)
sum+=i;
}
return sum;
}
sumPrimes(10);
@annunirmal your inner loop is breaking everything .
first j must be less than i so j<i not j<=i and your sum starts with2 i.e., sum = 2
and i=3
first j must be less than i so j<i not j<=i and your sum starts with2 i.e., sum = 2
and i=3
@annunirmal check your second for loop. for example, if i is 7, the second for loop will eventually try 7 % 7 === 0 which returns true
Hello since Spain, i am thinking rewrite my portfolio and upload to gh-pages.i thinking to use yeoman generator web-app wich other technologies recomends me thanks:)
how to import the picture???
ctrl+c ctrl+v
@michaelcjefferson thanks. sorted :)
:cookie: 126 | @michaelcjefferson |http://www.freecodecamp.com/michaelcjefferson
annunirmal sends brownie points to @michaelcjefferson :sparkles: :thumbsup: :sparkles:
anyone awake at this hour
Bearly...
@grantknaver , I am.
yay
whats up @grantknaver ?
well guys I am trying to figure out how on earth to get the nav-brand for above 768px to center along with the rest of my tabs
I was looking for this exact same answer a couple of days ago actually
here, check this out, it might help http://bootsnipp.com/snippets/featured/navbar-brand-centered
@spot1000 , that's a good idea! @grantknaver , I was going to suggest may be add another li item (with visibility: hidden) to the list in "myNavbar". This should shift the items a bit to the left.
or wait... did you mean a navbrand with a height of 768px to be centered?
like vertically?
no.. nevermind... it's obvious you want it centered horizontally on the page.. it's still way too early here and i havn't finished waking up haha
i have an array of object
var temp = [
{"category":"Packet","count":2,"dayText":"day6"}
{"category":"Packet","count":4,"dayText":"day6"}
{"category":"Packet","count":1,"dayText":"day6"}
]
i want to print allvalues of count how to do it?
@Rakesh18754 , you could use forEach to loop through each object?
yeah, that'd be how i do it
@pradxj07 @spot1000 i treid
for (var key in temp1) {
if (temp1.hasOwnProperty(key)) {
console.log(temp1[key].count);
}
}
but does not print the values
you might have an error where you don't have commas between your objects
thanks everyone
no problem @grantknaver
@Rakesh18754 here, give this a shot
var temp = [ {"category":"Packet","count":2,"dayText":"day6"}, {"category":"Packet","count":4,"dayText":"day6"}, {"category":"Packet","count":1,"dayText":"day6"} ]
for (var key in temp) {
if (temp.hasOwnProperty(key)) {
console.log(temp[key].count)
}
}
any one can help me with the portfolio page
@Rakesh18754 , what is temp1 in your code? Also, not sure what is the purpose of checking hasownproperty(key). Shouldn't you be checking for count?
@nabins13 , what help are you seeking?
@Rakesh18754 Loop through the objects, get the value of count and push it to a new array. That's how I'd go about it
var test =5 ;
document.querySelectorAll(".bubble-plot-chart-circle[r= " + test + " ]");
how to pass the variable test to this syntax??
guys i just got to the portafolio and....i feel overwhelmed..how do i do all this stuff?
@lukearthwalker I remember asking something similar months ago, the key I was told is to break everything down into smaller components/tasks. It helped.
can u please check this pen and suggest me some changes
i only used html onle line of external css and bootstrap
@lukearthwalker What's in a personal portfolio? At a basic level?
- Info about yourself
- Work you've done.
- Contact info.
There you have three sections of your portfolio page already.
@lukearthwalker , I agree with @JohnDeegs . Also, it might help to look at people's protfolio's to get some ideas. Some of them may be highly sophisticated or advanced. But you can just look at how they have organized the information or what information they have included in their portfolio.
hey @pradxj07 please suggeset me some changes
@nabins13 Looks pretty decent, maybe wrap the whole thing in a container just to keep the picture size down a little bit, and if you're wanting to add in some CSS, try adding bits of colour to the site, just to make it pop a little more
i am veryweak in designing :P by the way but thanks @spot1000
nabins13 sends brownie points to @spot1000 :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @spot1000 |http://www.freecodecamp.com/spot1000
@lukearthwalker Let's look at the user stories and see what we can do.
User Story: I can access all of the portfolio webpage's content just by scrolling.
That's easy, this is just saying that this will be a single page application.
User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.
Go back to the button section on basic HTML section and this will help you.
User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
Again, how would you approach using a thumbnail, is it a normal image? Is it something you can use with bootstrap.
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
Again, there's a section about this in the basic HTML section.
@lukearthwalker Take everything I've said and do it one at a time.
@nabins13 Same here, but I'm getting better
just need to practice :)
ok
is somebody here doing the calculator project?
what is the advantage of using html class list over jquery addclass
@Rakesh18754 It depends. I'm against the idea of adding jQuery to a project for the sole purpose of manipulating classes. But by all means, if you already using jQuery for other things, you can use
addClass freely
hey guys i want to add a brand logo in my nav bar so how am i going to put it there in left hand side
??
are you using bootstrap @nabins13 ?
yes
i am trying to
when i try to add a brand logo it does not show up
Hmm, can I see the code please? @nabins13 Maybe send the link to your codepen
ok
You need to save your logo as an image first before you can link to it @nabins13
i saved it as .png
can i upload from loacal i dont have idea where to share from in online to code pen
Ok. Upload it to imgur.com and copy the link to the file. Then place it in the
src of the imgtag
i did it from google it is not orking
working
<h2 class="red-text">CatPhotoApp</h2>
<a href="http://www.freecatphotoapp.com"."> </a>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p>View more <a href ="http://www.freecatphotoapp.com">cat photos</a></p>
<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>
Create a new p element around your a element.
Your a element should be nested within your new p element.
Your p element should have the text "View more " (with a space after it).
Your a element should be nested within your new p element.
Your p element should have the text "View more " (with a space after it).
thanks @ayoisaiah it worked
nabins13 sends brownie points to @ayoisaiah :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @ayoisaiah |http://www.freecodecamp.com/ayoisaiah
Awesome @nabins13 :thumbsup:
Hey guys has anyone done the twitch tv challenge that can assist me
I need to run one getJSON through another ones success function but obviously I need to loop through the array in the API. Unfortunately Its getting somewhat mixed up
Hi everyone!
Is a CSS reset needed in 2016? Should I use it?
Hi, can I have two actions in a single form like for example:
<form action="/uploads" action="/submit"........</form> ?
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation. how the hell do i do this?
@christocarr you dont have to use a reset, unless you really want to start at nothing and do all of your own styling. Most of the time you can just use something to normalize css on all browsers
@christocarr like this. https://necolas.github.io/normalize.css/
@christocarr Go for it - a solid base in css goes a long way
@andrewchar @GregatGit What's best to do with the reset css file? Put it together with my customised css?
@christocarr usually it just gets included in the project, in its own file
Hi! Question on jQuery:
I am trying to add a banner to my Tic Tac Toe project where it asks you if you want X or O. I do that with a jQuery .html call, but after, I would like the banner to go away when I click one of the buttons: X or O. Is there a way to do that? to turn off the .html call? Thank you.
$("#preGame").html("<div class=\"preGameSet\"><p class=\"questionPG\">Do you want to play X's or O's?</p><div class=\"btnArea\"><button class=\"preGameBtn\" onclick=\"switchOX();\">X</button><button class=\"preGameBtn\" onclick=\"switchOX();\">O</button></div></div>");
Here the project if you want to have a look: http://codepen.io/bcnjordi9/pen/YGNVoa
going to YouCanDoThis
Hey friends!
Completing the Tribute Page project. The author of the example project claims there is no CSS in their implementation. If so, how do they get the gray background? I can’t find any bootstrap classes which produce this without custom styling.
@davidpickup You can always do inline styling. However, you can create your tribute page in any way you'd like. Experiment. The project example is just to give you an idea of what they're looking for but you can make it your own
Guys, I need your feed back. It is important to know your opinion about my first project on free code camp. You know it is a tribute page project. Now I am starting second project. I need to know my mistakes to remove them in the next projects. Thank you very much :) https://codepen.io/belodpav/pen/zKwKEW
@JLuboff OK, must be online styling. Just wanted to check there wasn't a bootstrap container I was missing that did this. Going to make the page my own style, but still understand how the example could be replicated.
inline*
@belodpav did u use some CSS framework or u just apply your own CSS styles?
@belodpav I think it looks very nice, still I'm no expert. From a design POV I really like the header
@belodpav it looks very good, good choice on the colors, fonts and images. Very restrained. Good job.
@belodpav I really like this design... Good job! :clap: :clap:
@belodpav why do you use an empty div class col-xs-1 before and after a div class col-xs-10? you can just use the div class col-xs-10 and also add class col-xs-offset-1
@ChinuxParibus I used bootstrap framework for grid system + own styles for styling the page more flexible. Is it a good approach?
Yeah, it's a good approach, since you can (and should) modify the Bootstrap styles. No problem with that!
Although, I guess you can use some CSS classes on Boostrap Framework to optimize your HTML code
So, when you want to make and offset between two columns, you can use de Bootstrap class col-xs-offset-{number}
Where {number} means the number of columns (and so the offset) you want to apply
Hope this can help you @belodpav
the*
@sorinr Yes, you correct. I used these. I tried to code the page without <div class="col-xs-1"></div> and things like that but it doesn't work. I used it for white space from border to nesting elements. May be I do something wrong.
@ChinuxParibus Thank you very much. Yes, of course it helps me very much.
belodpav sends brownie points to @chinuxparibus :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @chinuxparibus |http://www.freecodecamp.com/chinuxparibus
Thank you friends for feedback! The community is a very good idea. I am new here.
@belodpav <div class="col-xs-10 col-xs-offset-1"> and its working but comment out all <!-- <div class="col-xs-1"></div> -->
Oh, BTW, someone has solved the Wikipedia Viewer challenge?
without jQuery?
I'm using Minified.js as my library, but I have troubles with CORS to make the request at Mediawiki API
@sorinr Thank you! Yes, is better approach. I really didn't know about the class in bootstrap.
belodpav sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 733 | @sorinr |http://www.freecodecamp.com/sorinr
@davidpickup Sorry, just saw your reply. There is one bootstrap class that will give a gray background...which is the "well" class. I should have mentioned that before as well
@belodpav welcome
hey guys, can you check my website on your devices please? I just want to make sure it's fully responsive: https://amitp88.github.io/New-Portfolio/
Hello, everyone! Can anyone help? I have a problem with centering 2 buttons and I've tried anything known in this earth and still can't do it. Here 's my codepen http://codepen.io/flopy_dv/pen/PGmvmb?editors=1100
@flopywood Where do you want the buttons? I see you're floating them right
@JLuboff I want my buttons to be centered
@flopywood first of all, remove the button style
@ChinuxParibus ok
second, give the align at the div, not the button
did you try that?
ahhh noo i didn't!
Also, you may want to get rid of the second div class=col-md-6...don't think its needed
something like
<div class="col-md-6 text-center"><button...
@flopywood , I don't think you need the cols/rows, this seems to center everything: <div class="container center">
<div class="simon" align="center">
<div id="blue" class="gameButton"></div>
<div id="pink" class="gameButton"></div>
<div id="yellow" class="gameButton"></div>
<div id="green" class="gameButton"></div>
<button type="button" id="start">Start</button>
<button type="button" id="reset">Reset</button>
</div>
</div>
<div id="result"></div>
Working on the Markdown Previewer, but I feel like this is more of a Front End question than a Data Viz question. It looks like my CSS floats are causing a bug where the Materialize CSS "card" class won't render. Any ideas on how to work around this? http://codepen.io/dhuddleston/pen/wzZBYr
I'm having trouble with some formatting on my portfolio page. The nav tab and body won't use the css styling I'e coded and it appears that the columns in each of the page sections are shifted slightly to the left. The page is here: https://codepen.io/woberhol/pen/kkPZdj?editors=1100. Can anyone help me figure out what's wrong?
Figured mine out. Just had to swap the order that the classes render in. Haha.
@dhuddleston what do you mean by "swap the order that the classes render in?"
@Wilson-Oberholzer In my code, I had my
div tags in the wrong order. I just had to reverse my order and it fixed itself. I'll go ahead and take a look at your code now. :)
Whoops, my bad. I thought it was in reference to mine. Lol
@Wilson-Oberholzer No problem! Haha.
Hello. Now I'm trying to complete Local Weather challenge. And the thing is that it works only if I use Mozilla. Please help me figure it out. Here is a link: http://codepen.io/sigurdlex/pen/rryWEN
@Sigurdlex if you are trying in chrome - chrome doesn't allow getPosition from http:// sites.
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
@Wilson-Oberholzer Hmmm. Admittedly I'm at a loss as to why your CSS isn't being used.
@Sigurdlex You can load your pen over https:// and the get location will work but then your weather api will be blocked because http:// over https:// is not allowed.
You can add
You can add
https://crossorigin.me/ to the front of your weather URL to get around that.
@Sigurdlex I think the easiest solution is to use Weather Underground's autoip weather url which works over HTTP/HTTPS and gives you ip-based
location + weather_data + icon_img_url all in one URL. https://api.wunderground.com/api/<API KEY>/conditions/q/autoip.json
anyone recently have had troubles with the browser editor?
@sjames1958gm @vinaypuppal all right, thank you for your help!
sigurdlex sends brownie points to @sjames1958gm and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 3513 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@Sigurdlex :+1:
can i get some feedback on my portfolio page
Can anyone tell me why my menu looks like that on the right side? And why the collapse does not work? http://codepen.io/DanielStoica/pen/bwRdwq
@DanielStoica85 Load JQuery(first) and bootstrap.js in JS panel of codepen through settings for toggle to work
@DanielStoica85 and close
You have
Change to
For all links in navbar
a tag in li of navbar to get it formatted correctly right sideYou have
<li><a href = "#">Contact</li>Change to
<li><a href = "#">Contact</a></li>For all links in navbar
Thanks, @vinaypuppal
danielstoica85 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
guys can you link a website where i can learn more stuff for the portafolio?i think i need to learn more
@lukearthwalker Hey Udacity has lot of free resources you can start with this course https://www.udacity.com/course/intro-to-html-and-css--ud304
and Full list here https://www.udacity.com/courses/web-development
and Full list here https://www.udacity.com/courses/web-development
@vinaypuppal thanks
:cookie: 579 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
lukearthwalker sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
@lukearthwalker - If you are using bootstrap, there are some interesting pages on w3schools.com/bootstrap, in the section on themes - helpful to learn about designing a page (using bootstrap)...
This message was deleted
hey guys im making a nav bar and would like my search box to be centered and my links to be on the far right..i cant seem to get it
any help?
@pawan92 you have two
ul tags and you closed only one ul tag at end
@pawan92 you can compare your code with example code in first example in docs http://getbootstrap.com/components/#navbar
@vinaypuppal right i kinda am using that but i dont need the dropdown menus and everything so if i delete those then you get what i have. now i just wanna center my search bar and move my links to the right
@pawan92 oh okay , is the pen updated i will check again
@pawan92 add
navbar-right class to ul tag then the links will be on right side
@vinaypuppal ah ok! how about centering my search bar and aligning the glyphicon
and also want to get my text to be white but using color under body is not doing it
@pawan92 was on a call, i will take a look at them now
no worries just modified it. want to expand the search bar, get rid of the highlight and make the text white and black on hover
@vinaypuppal
@pawan92 For modifying
and for links this class
navbar-brand color use this class in CSS .navbar-default .navbar-brandand for links this class
.navbar-default .navbar-nav>li>a
brand works but the links dont
@Wilson-Oberholzer - one thing that you have to watch out for, with CodePen, is that CodePen uses a template to generate your page. So you would have a possible problem with things being loaded in different order than you are anticipating, for example, your HTML panel, which should only be code that goes in the <body> section, it being loaded after your CSS panel, so that any settings in your custom CSS might be overridden by the CSS stylesheets that you have at the top of the body. SO - in CodePen: the HTML panel should only have HTML elements in it - but not the <html>, <head>, <body>, <style>, <script> and their closing tags. There are places in the HTML config for things that you might want to put into the head of the page, the CSS tab and config is for all CSS code and external sheets, and the JS tab for all JS-related info. Doing things other than that result in invalid HTML. That being said, it doesn't always cause a problem, but it could result in conflicts and things being loaded in an order that could cause problems, and definitely I've seen problems on mobile devices with some of these things.
Move your CSS stylesheets that you are loading into the CSS config external libs slots, remove them from your HTML editor panel. Take out the <body> tags. Give that a try and see if it helps...
@pawan92 you added this class
.navbar-default .navbar-nav.li instead of this navbar-default .navbar-nav>li>a or you can even try navbar-default .navbar-nav li a which is also same
@pawan92 and search bar centering I was not able to achieve may be some one could help you with that one
Hey guys! I’m currently working on the calculator project
@Wilson-Oberholzer If your new to codepen read this article https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
In order to make things more challeinging for me I decided to use vanilla javascript
the functionalities of the calculator are all there
The only problem I have now is that since when I added they keydown event listener, the click event listener stopped working
any idea?
@vinaypuppal that doesnt seem to work either :( and i centered the search bar i just need to float the search text to the left which i cant seem to get
nvm got the text!
@pawan92 oops i just saw u missed
. in .navbar-default :smile:
any idea how to move search text to left
@pawan92 no i was not able to achieve that, you post your pen again and ask that question may be some one may help you with that one
How can you add new fonts in Codepen?
thanks @vinaypuppal
pawan92 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 581 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@DanielStoica85 pick a font from https://fonts.google.com and there are instruction on how to use them on that site as well
@vinaypuppal Where exactly do i add the font from google fonts page?
once you pick a font you will get a popup with instructions in that you can find link like below
but in code pen link just above URL in settings -> CSS tab -> add resource
just like you added bootstrap.css file
@DanielStoica85
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">but in code pen link just above URL in settings -> CSS tab -> add resource
just like you added bootstrap.css file
@DanielStoica85
@vinaypuppal fount it, thanks!
danielstoica85 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 582 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Hello. I have started the first project and have been looking and the finished codes for help. I have run into an issue already. My code so far is:
<style>
.thick-red-border {
border-color= red
border-width= 15px
border-style= solid
border-radius= 40%
}
<h1 class="text-primary">Bill Gates</h1>
<img class="thick-red-border" src="https://en.wikipedia.org/wiki/Bill_Gates#/media/File:Bill_Gates_June_2015.jpg">
but nothing comes up. why?
just closed the style. still nothing though
now words come up but the picture is just a small box like a link
can someone help me with these images? They are horizontal, but when the browser is resized they stack on top of each other but too close to the edge of the browser
@RKZoltan are you using code pen ?? CSS should be CSS panel of codepen and
If your new to codepen read this article https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
If your new to codepen read this article https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
thank you @vinaypuppal it worked with a different image
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 583 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@rsmith731 add
padding to container which holds those images so images wont be close to edge of browser
@vinaypuppal ok thanks
rsmith731 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 584 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
yoo who wants help
me
<style>
.thick-red-border {
border-color: red;
border-width: 15px;
border-style: solid;
border-radius: 40%;
}
</style>
<h1 class="text-primary ">Bill Gates</h1>
<img class="thick-red-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">
@vinaypuppal is there a way to center it, because when i add padding it doesn’t look right when resized
this is my code but my picture doesnt have a red border
@rsmith731 oh okay try
remove padding and
on container add
remove padding and
on container add
width: 95% or90% and margin: 0 auto
Why doesnt my picture have a red border?
BTW
Repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ.
BTW
Repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ.
nevermind it worked just had to click run
<style>
.blue-text {
color: blue;
font-size: 40p
}
.red-text {
color: red;
font size: 20p;
}
.thick-blue-border {
border-color: blue;
border-width: 15px;
border-style: solid;
border-radius: 40%;
}
.black-text {
color: black;
font-size: 15p;
}
</style>
<h1 class="blue-text">Bill Gates
</h1>
<h2 class= "red-text">The Founder of Microsoft</h2>
<img class="thick-blue-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">
<h3 class="black-text">Heres A Time Line of Bill Gates's Life</h3>
<h4>1955: William Henry Gates III is born to attorney William Henry Gates II and Mary Gates, a schoolteacher, University of Washington regent and chairwoman of United Way International. He is raised in Seattle.
1967: Gates is enrolled in the Lakeside School, an exclusive private school in Seattle, where he befriends Paul Allen. The two students share an interest in computers and programming. The school notices his knack for technology and asks him to create a computerized schedule of classes.Gates’ 2005 keynote speech at Lakeside School.
MY PROBLEM IS THAT THE PARAGRAPHS ARE SHOWN TOGETHER AND NOT SEPARATED AS PARAGRAPHS. How do I fix this?
@RKZoltan wrap paragraphs in
Reference http://www.w3schools.com/html/html_paragraphs.asp
<p>Your Paragraph</p> tagReference http://www.w3schools.com/html/html_paragraphs.asp
Can someone help me with a CSS / Bootstrap issue?
How come over here it's covered up: http://behindthemath.ga/broken.html
But here it's working: http://behindthemath.ga/working.html?
@alessiochiffi
hi everyone! Two days ago I received a call for a job interview..junior web designer position. They asked me if I can do a brief converting a PSD file in html and css and making a new dashboard
I did everything but I have a doubt
How I will send the files to them?
A zip file with all the folders and files(img, css, js, file.html) should be enough?
hi everyone! Two days ago I received a call for a job interview..junior web designer position. They asked me if I can do a brief converting a PSD file in html and css and making a new dashboard
I did everything but I have a doubt
How I will send the files to them?
A zip file with all the folders and files(img, css, js, file.html) should be enough?
@BehindTheMath This is only difference between both if you add below css to broken.html it will look same as working.html
body {
padding-top: 50px;
}oh took this much long time to debug :smile:
This message was deleted
@vinaypuppal thank you
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: rkzoltan already gave vinaypuppal points
@alhazen1 I could also use <li> to make a list right?
@RKZoltan
@vinaypuppal thank you
rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: rkzoltan already gave vinaypuppal points
@RKZoltan Yes IF you wanted this displayed as a list.
got it
@RKZoltan Generally use p tags for paragraphs, h tags for heading and li for lists. There are reasons for this beyond just how it looks on the page which you will soon discover.
@vinaypuppal I know, but what's causing the discrepency?
@BehindTheMath the nav bar is
position: fixed so it is taken out of document flow so .container-fluid div will not think it has navbar above it so it starts at top and since bootstarp gave high z-index for navbar so its over your div
@BehindTheMath so you need to add some
padding to avoid that issue and if you can see in dev tools bootstrap has done same for .sidebar you added it gave top:51px so sidebar is not behind navbar
The other page does not have
position:fixed?
Where is that set?
I don't see it
Ah, found it
@BehindTheMath
position:fixed added by bootstrap as u used .navbar-fixed-top class
But the other page has the same thing
yes but this is the only difference as i said before @BehindTheMath
@BehindTheMath
@vinaypuppal I understand your solution, but I don't understand why it's different without that. They both have the same claases.
@alhazen1 thanks
rkzoltan sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @alhazen1 |http://www.freecodecamp.com/alhazen1
@BehindTheMath see this screen shot you can understand
how do i center an image?
above one is for
woking.html page
and this is for
broken.html page
@BehindTheMath
that looks difficult
@RKZoltan oops! above images are not for you
not yet
@vinaypuppal That's embarrassing. Now I see what you mean
@vinaypuppal Thank you!
behindthemath sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 585 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
@BehindTheMath :smile: You understood finally what i mean
@vinaypuppal Yup. I thought you were just giving a suggestion how to hack it to work :D
@BehindTheMath oh okay
@RKZoltan You can center image by adding
text-align: center to container div of image
@RKZoltan like this
<div class='image-container'>
<img src="url"/>
</div>.image-container{
text-align: center
}