@AidenMead yes :D
His site is csswizardry or something like that. He only does CSS. His bio is on his site, but look at his blog. its gold!
His site is csswizardry or something like that. He only does CSS. His bio is on his site, but look at his blog. its gold!
I'll have to take a look. Im trying to find information on building whole characters out of CSS. I built a little character but need to figure out how to apple animations to all of the divs upon some action.
Thanks @VaseJS
aidenmead sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 546 | @vasejs |http://www.freecodecamp.org/vasejs
can someone help me with how the text and buttons arent lined up on the same line ?
https://codepen.io/Muradmsalati/pen/Jpxyax
https://codepen.io/Muradmsalati/pen/Jpxyax
Hi guys I need help with the Tribute Project...could someone help me out?
@vmantovani - post your questions, URL for your project, code, etc. and you'll get some help here
@DMsalati - did you solve your problem that you posted about here: :point_up: March 1, 2018 8:39 PM - it looks like things are lined up, but hard to tell if you had something different in mind? Unless you want the header and the buttons on the same line? Then you have to change the
display mode on the H1 header to display: inline; or something so that it isn't display: block; which is the default.
@DMsalati aren't lined up how? They are on the same line for me
@khaduch @NJM8 i got it lined up but im not sure how to make the buttons go to the right end o the border, and why isnt my border red ?
@DMsalati - there is a conflicting class
.border that is overriding your setting because it has the !important flag on it. (I think that it is a setting in Bootstrap.) If you change your class name to something like .borderRed and add that name to your div, then you'll get your red border.
@khaduch ah i see, that worked thank you. How can i get the 3 buttons to be on the right side of the border?
justify-content-end d-flex is not working would tryingout normal flex work?
dmsalati sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3765 | @khaduch |http://www.freecodecamp.org/khaduch
@DMsalati - just change them from being descendants of the div that has the red border property - perhaps make one div for the header (or put the red border property on the header itself?) and the border will only surround the header element.
i want the buttons and the header to stay in the same line inside the border
but the buttons would be touching the inner right of the border
with some space between the header and the buttons if that makes sense
@DMsalati - the border is only applied to the elements that have that property (which is adding the red border) So you have a div
<div class="redBorder">
<h1>The header</h1>
<div class="other classes for the buttons">
<button>ALL</button>
<button>ONLINE</button>
<button>OFFLINE</button>
</div>
</div> <!-- this closes the div that has the red border ==>So the div with the red border has the div with the buttons as a child element, so it surrounds all of the child elements with the red border. Just changing it to this:
<div class="NOT_the_redBorder">
<h1 class="redBorder">The header</h1> <!-- just add the red border to the h1 element -->
<div class="other classes for the buttons">
<button>ALL</button>
<button>ONLINE</button>
<button>OFFLINE</button>
</div>
</div> <!-- this closes the div that no longer has the red border -->That will just put a border around the <h1> and everything else will not have the red border. You might have to play around with it a little, but that's what I'm getting at.
You can add margins or padding to separate the div with the buttons from the header, just play around with it a little, the best way to get more familiar with it.
but im trying to have the buttons and the text inside the border
@DMsalati - oh, I misunderstood your question :point_up: March 1, 2018 10:42 PM here. I thought that you wanted them to be outside of the border. You can add some margin-left to the div that is containing your buttons, that will shift them away from the header. Is that what you want, or is there more?
@DMsalati - one thing that you have is the container class, which is going to be a big margin (effectively - it actually limits the max-width of that div, so it changes.) And then your class
I guess that a drawing or picture of what you are trying to achieve would be helpful to know what you want the final styling to look like.
Unfortunately, I have to turn in for the night - I hope that my latest comments help a little - someone else might pick up the ball and help...
col-md-6 is going to take half of the width of that container div, so you might want or need to expand that.I guess that a drawing or picture of what you are trying to achieve would be helpful to know what you want the final styling to look like.
Unfortunately, I have to turn in for the night - I hope that my latest comments help a little - someone else might pick up the ball and help...
Hi guys! I have a quick question about this bit of code:
var myArray = [];
var i = 0;
while (i < 5) {
myArray.push(i);
i++;
}
What exactly does “i++” mean in this code?
It’s supposed to be i + 1, right? So, why is it that if I change it to i + 1 instead, the code editor gives me an error and says I have a potential infinite loop?
OH. That explains it. Thanks, my dude!
i + 1 don't change your initial i, so it will stay 0 thus it will go to infinite loop. you have to assign it with =
@krennical_twitter
This is also valid (and saves a line)
while (i < 5) {
myArray.push(i++);
}
I plan to make a website in 2 languages, would it make more sense to create 2 static webpages for each language or manage states with a framework like React? Thoughts?
As much as i like that idea, I prefer to translate myself on this project, the personal touch means a lot to me :)
So is like putting a flag to click for a language change an outdated thing to do?
i18n is a standard to allow you to translate your pages (and internationalise too) without creating multiple different pages for each language
you place translations keys in your html, and you replace their values based on selected langauge.
so then, react is a waaaay better choice, just update the state on the language chosen :)
thanks @SweetCodingInc
thanks @SweetCodingInc
romchyfcc sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
It can be done with any other framework or even with vanilla js too
React is not an absolute necessity
well of course, I just want to build it with react, I might switch later if it won't fit the scope of what I'm trying to do
@RomchyFCC You might wanna consider this if you're going with React - https://github.com/i18next/react-i18next
vanilla js would probably need a lot of tempalte strings for this project so it's probably a lot easier just using JSX
Of course, jsx would be way
easier.. But if you're doing it improve your overall coding skillset, vanilla js would be more effective
won't be as easy, but effective..
the skill set transfers easily to any other higher order framework like react/angular etc
that's just it though, I'm already comfortable with vanilla js, not so much with react and I was debating the idea which one I should use, overall if i use vanilla or mix it up with jquery it's gonna be way too easy for me to make it, but the idea of using react components split everything up, using state and the personal and professional growth is very exciting :) react is gonna make what i want to make easier but harder (that makes no sense but no other way to put it) not using react will make it just super easy and possibly slow aswell
Hi coders
I'm stuck at "Profile Lookup" challenge
Can anybody help me with this? What's wrong in my function?
I'm stuck at "Profile Lookup" challenge
Can anybody help me with this? What's wrong in my function?
function lookUpProfile(firstName, prop){
// Only change code below this line
var tempFN = firstName;
var tempProp = prop;
for (var i = 0; i < contacts.length; i++) {
if (tempFN == contacts[i].firstName) {
return contacts[i].tempProp;
}
}
// Only change code above this line
}
@maxiwer you dont need those temp variable. So you need to check if firstname exist first, if exist check if the property exist. if it does return it
@maxiwer
The function should check if firstName is an actual contact's firstName and the given property (prop) is a property of that contact.
You arent checking if prop is a property of that object.
And there's also few more conditions that you're missing
Also
contacts[i].tempProp should be contacts[i][tempProp] since its a variable.
is this CSS?
It's called inline styling. Styling the HTML element directly in it
Ah, didn't think it would show me this early. This means there is no .css page?
You could also have the css code between
<style></style> tags
HTML is not particularly difficult, once you know the basic rules its just a matter of knowing what the tags mean
@zzeronerzz There are 3 ways you can add css to a document.
1: Inline styles - placed on the html element itself
2: In the head section - wrapped in <style></style> tags
3: external stylesheets - This is a separate .css file that gets added to the html files head section with a <link> tag
1: Inline styles - placed on the html element itself
2: In the head section - wrapped in <style></style> tags
3: external stylesheets - This is a separate .css file that gets added to the html files head section with a <link> tag
hello guys i have a problem, i created a html file for news and i want a particular css file to be applied on a div and if i use
<link rel="stylesheet" href="css/custom.css"> it applies on the entire html page. how can i make it to be applied only for that div where i put only the news? Thanks :)
@24makee you can add a class to the div and give it a name and in the stylesheet select only that class. IE: <div class="news">
and in the css .news {your styles here}
it doesn't work
the fact is that is a downloaded css
and when i link it in my html code
it affects my title page and everything
if i put
.news { and } at the end of the css it doesn't do nothing
@lydatech Been on for a couple of years, esp. early on when cookies were easier to come by
What's the right jquery selector for an input [name = ] attribute in a form of which I have the #id?
I think
@Aloap - or you could also try
$("#idname") - since you have the ID value? Plug it in instead of "idname"...
Hello guys. I want to practise to inspect things on websites and change the different things. Like if i had a customer, who wanted to change different things on website. A website made in wordpress. How do i get familiar with the inspect ?
right click inspect
@mustimuu inspect, then depending on your browser, you should see some menu items like "console, elements, sources". See that?
google chrome
if i want to change the CSS on a website etc
Okay, so the elements will be their HTML structure for that page. Check the Sources for CSS/JS
its working good but still when i change the value of input field , its not starting from that.
how to capture the live field values ?
there is a way to capture ?
say, the start button you go start.addEventListener("click", function() { // code to check input });
@khaduch I have to use it in a function that receives the #id of the form as a string and have to use it to select the input by name of THAT form. I don't want to use input id because I need an attribute that it's the same in every different forms. I cannot do something like that in ids
@Aka-Dev This would matches every input with that name.. and I have many forms :)
@tiagocorreiaalmeida @Aka-Dev This would matches every input with that name.. and I have many forms :)
im confused. do you need the id of the form or the input?
you need the id of the form, and you pass it onto a function that takes that as string, and use that string to find the name of an input within that form?
why not do document.getElementsByName("name here")[0];
or document.body.yourform.getElementsByName
@rdollent I receive the #id of the form as a function’s argument and I have to select some inputs of that specific form by name.
Something like that :
http://jsbin.com/feminixuxe/1/edit?html,js,output
Something like that :
http://jsbin.com/feminixuxe/1/edit?html,js,output
I have different forms with different inputs order
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2410 | @darrenfj |http://www.freecodecamp.org/darrenfj
I have a challenge I am facing, with Grid. I am sure it is easy though.
I am learning Grid, and I have been able to understand how it works. But I would like to have 2 by 2 images like this and 3 by 3 images when I scale the screensize up
I have accomplished this, with sort of an hack, I have created a section one, and a section 2 so I can say that I want the section 1 in the column 1 and section 2 in column 2 and so on.
But this is more of an hack, I believe this can be easily solved with flex box.
hehe
I want to use the new css grid system
@NJM8 thanks, I check the link out
nicolaimagnussen sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @njm8 |http://www.freecodecamp.org/njm8
@nicolaimagnussen - have you tried wesbos.com new tutorial on the CSS grid? I have not looked at it yet, but he produces good material. Maybe worth taking a look?
Hey folks, has anyone run into a issue where, after using jquery to add a css property (transform:scale in my case) when a button is clicked, the transformation is removed when you scroll? To explain it a different way - I have a div. I used jQuery to double it's size if you hit a button. But then when you scroll, it goes back down to the normal size.
Anyone know how to prevent that? Would it be better to add a class? Right now I'm using the following jQuery to cause the scale
$(".cake").click(function() {
$("#alice").css({transform: 'scale(2,2)'})
});
@AidenMead Are you listening for scroll events elsewhere in your code?
zzeronerzz sends brownie points to @tyronwyt :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @tyronwyt |http://www.freecodecamp.org/tyronwyt
any tutorials out there to how to use the inspect in google chrome?
If i want to edit customers existing websites
mustimuu sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Its good for quick fixes, and seeing how things are setup, but I wouldn't rely on it beyond that. Really easy to refresh and lose all your changes haha
i got a stylesheet
where i put all the code haha
otherwise RIP
brad
what about tutorials on good UX design?
I'm not much of a UX/UI person, my team generally always use Material Design. But I can't say much more on the topic than that (cuse idk haha)
I’m not able to have the nav menu when it is on mobile view...
@ingundela My guess is your not having an event listener for that element on the DOM, Or your event listener doesn't find the button when you open the page initially, thus doesn't work when you change the page size. Or your logic to show the menu is broken.
hi Brad Thanks.. may you please help fixing this please..It’s my first time implementing the transparent navbar and change color on scroll...
Do you know where I should look in the repo? Like where you have your event listener? Or any info on the frameworks you used? They might have info on how to do it aswell.
@ingundela You have a typo:
<div class="collapse navbar-collapse" id="nasvbarNav">The id should be navbarNav
@gulsvi I Gulsvi Thanks let me check and make the changes..
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2635 | @gulsvi |http://www.freecodecamp.org/gulsvi
ingundela sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
I’ve another bug in services and on the row with 2 image(left & right)…. services I don’t know why I’m not having full width in that service section…it’s like I have padding around the all service content...
What's the point of this?
Why so much red?
h2 is red, the text is red. I don't see the point of being redundant. Is this multiple ways to do it?
@gulsvi that has nothing to do with my question. Being a dickhead I can see why the questions wasn't answer. Don't fuck with me. I'm not the one.
Anyone else in the community can help me understand why so many?
@gulsvi I'm not a pussy bro. Don't get it twisted.... I'm going to speak out.
Here's some common sense that should help you in life, maybe you learn to apply it
1.... read
what does it matter why so much red, the point is to learn how to color text.
there's a screenshot... with a similar topic
Even a kid can figure out what matches.............................................................................................................................................
HTML is the topic, but you're looking at my tabs. I built my computer.... But thanks I don't need help in the department.
#2018 mentality, I fucking swear.
That's the problem to start with...
Like literally...
Anyway, Moving on. it's not like i didn't complete it just didn't understand the.. once again I'm repeating something so clear, the redundancy.
Hmm, maybe I should just go in to kickboxing.....
@zzeronerzz You may also want to take a closer look at: https://code-of-conduct.freecodecamp.org/
I just blocked you, why do i still see you communicationg. Holy crap. Be quite.
I'm still curious about "why so much red" ...like, what does it matter, the exercise is there to teach you something, yet he goes full roadrage on why so much red ... it's hilarious xD
It's not rage just because I speak out.... Jeez you have a one tracked mind. You like me or something?
WHOA....Again kid, topics at hand.
No gooood, at all...
xD
I guess thats why he's bothering me. I can't block him....
How may i style a background like the grey one on that portfolio?
http://andrewborstein.github.io/portfolio/
http://andrewborstein.github.io/portfolio/
@SweetCodingInc Thanks for the note about saving a line!
krennical_twitter sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
krennical_twitter sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @padunk |http://www.freecodecamp.org/padunk
@MuhammedKarim if you mean that background with little squares, it's a picture used as a background and repeating
background:url(yourpictureurl) repeat;
muhammedkarim sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
@zzeronerzz That is indeed redundant here. Setting the h2 to red is not needed by this exercise
@all , how to add attribute selected:selected to <option></option> tag on i click and select it from <selected></selected> dropmenu options all of these is inside a table every row have the same <slected> drop menu , I mean i want know when i am in table without adding selected inside the table html when click on option let's say it is cancel it will added selected to it so when i am filter to cancel value i will say only cancel , can anybody help me in this
hi everyone, need help on a exercice, it seems to work when i test but i see any validation from the validation button so they might be errors that i can see. Its the exercice about capitalizing the first letter of each words. Here the code. Any advice ?
function titleCase(str) {
var sel = str.toLowerCase().split(" ");
var res = [];
for ( var i = 0 ; i < sel.length ; i++) {
res += sel[i][0].toUpperCase()+sel[i].slice(1)+ " ";
}
res = res.replace(/\sthe\s/gi, " THE ");
res = res.replace(/\sof\s/gi, " OF ");
return res;
}
titleCase("I'm a little tea pot");
resultt here // " I'm A Little Tea Pot"
How can i make my slideshow images smaller. i tried a couple of methods but nothing seems to be working. https://codepen.io/bestintown23/pen/xYjbxd
@bestintown23 Put a DIV around the images then add this in CSS: .DIVNAME img {
width: /width of your image/
height: /height of your image/; }
that will change the images' size inside that div
width: /width of your image/
height: /height of your image/; }
that will change the images' size inside that div
If that's not working there's another element making it off. A trick to try then is adding !important after the width/height (e.g. width: 50% !important) so it cancels those out. changing the background colors of your divs will also help you figure out what is changing what on the page.
@PatrickMoumiet Thats because of
" " being added to the string at the end, you can remove that by using .trim() method on res and it should work, also even though your code will work the res should be declared as an empty string rather than an empty array.
Cant anyone help me understand this quirk of flexbox? I have a child div that is responsive, with a max-width of 600px. I'm trying to create a two column layout and have the layout shrink until a specified width then stack. However, when I put display: flex on the container, the responsiveness of my child divs isn't obeyed.
QUick mp4 showing what I mean
gah, gitter makes you DL, lemme see if I can gif
@bestintown23 you need to style your img. Remove the inline styles and attributes
@abohannon its better to see the code working. Put it in codepen
@krennical_twitter dotn use
!important it's rarely if ever needed
patrickmoumiet sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@abohannon It's hard to tell why it's giving you that behavior. This is one way to stack columns with flexbox: https://s.codepen.io/anon/pen/QQPEpZ
@gulsvi the styles are all within multiple react components, so it would be a lot of effort to compile all that in a codepen at the moment. But I appreciate your example, that's exactly what I'm looking to do, but for some reason, the child div when it is placed inside a flex container, loses it's responsiveness and it's parent only resizes to the child's max-width property.