Tell us what’s happening:
Describe your issue in detail here.
Your code so far
Your browser information:
User Agent is:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36 Edg/97.0.1072.55
Challenge: Build a Tribute Page
Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-pagetribute page … the queen
So this is my first little project, i relied quite heavily on the example but made sure u knew what everything was doing, towards the end things started to click. Any advice on how to use tools to the best of my ability, including code pen/forums etc?
I myself used the example because I was ‘scared’. What I can give you as advice is to try and change as much as you can, try, try, try.
And i mean everything, try to make the image clickable as a link, add css boxes, colors, backgrounds, little by little until you can’t recognize the original base into your work.
As per the usage of the forum… You can ask anything you want, I’m polishing my knowledge by helping others and you can do that too
Thankyou, the reason I used the example, Is because although i flew through the challenges, i was still pretty unfamiliar with all the rest of the code already written in the challenges… the more i do it the better i’ll get i guess, the whole css bit still confuses me! i get the just of it but all the “rem” “em” and the colour codes and stuff confuse the hell out of me! and so do the media queries, i just don’t get what px or rem the pages are and what to scale them up or down too! total mine field … thanks for your help though i’ll start to try changing things and getting my own knowledge a bit better
I sprinted though the HTML and CSS challenges too, then slammed headfirst into the tribute page. I must have stared at a blank pen for 30 minutes with no idea what to do, lol. I realized I didn’t retain anything so I’m running back through the challenges again at a much slower pace and it feels like everything is clicking better. Maybe you can try the same?
For color codes the can Google “CSS color picker”, great tool.
As per the em and rem sizes, tjjhe main thing you have to understand is that these apply something like a ‘zoom’ to your parent size property. (I know it sound difficult, but I’m not an English speaker so I’m trying the best I can to have this on track)
Let’s suppose you have a website, you don’t declare a general font-size for the document so the web browser uses (almost always) 16px as default.
Now you want to have some text slightly bigger or smaller, but you don’t know the exact PX size, you just want your text to be smaller disregarding what device the user is using.
This is where em and rem come into play.
If you set a font-size of 2rem, you are going to have twice as bigger texts. 0.5 will give you half the size of the normal text. So if you want slightly smaller text you could use 0.8rem or slightly bigger 1.1rem
I hope this makes sense.
Thankyou, im trying to teach myself a little more using the examples, its all a bit of a mine field at the moment.
Thankyou, so if i set the whole document at 12px for example and i want certain text or headings to be bigger 2 rem will double the text for that section ? or 0.5rem will half it? thankyou for your replys
Exactly, but keep in mind that some tags, like H1, H2… All of those have their own properties according to sizing, although you can select and change individually if needed (to be honest, almost every website I see changes the size of those too)
yes ive just used your example and changed all of the rems and totally get it now so thankyou!!
now to try and figure out media queries, this isnt a requirement to pass the survey form project, and i have passed all 17 things but i would still like to add the media queries to try and learn how to do it on everything i create.
Hello @CharleyJo and Welcome.
Your page is really good. It reminds me my first page that I’ve created in tribute of Alan Turing. Anyway, you did a great job.
Let me tell you a little secret, I have NO IDEA how media queries work… Shhhhh, don’t tell anyone.
Jokes aside, I didn’t quite understand how they work yet. Maybe I’ll try later and revisit that part.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.