Struggling with Tribute Page

Struggling with Tribute Page
0

#1

Hi. I’ve recently started using freeCodeCamp and although i’ve found the front end tutorials fairly straight forward, I’m really having a hard time with my tribute page. Its like all the stuff I’ve learned so far has just gone out of my head. I’ve been going through the tutorials to remind myself about adding the simple stuff and this is what I’ve got so far

tribute

The first thing that caught me off guard was the two different inputs for HTML5 and CSS. I thought i would normally enter the code into one box but now i’m seeing two (three including JavaScript) and i’m not sure what the difference is.

Maybe i rushed through the tutorials. Are there any tips or advice i could take other than going through all the tutorials again?

Thanks


#2

You can write HTML/CSS in two different ways - with inline styling or in separate files.

If you write with inline styling, you write styling between <style></style> tags in HTML file, like you did in your example:

<style>
  .thin-blue-border {
    border-color: blue;
    border-width: 5px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

But you can put the code in separate CSS file, like this:

  .thin-blue-border {
    border-color: blue;
    border-width: 5px;
    border-style: solid;
    border-radius: 50%;
  }

The second method is preferable (it is called separations of concerns).

When you are working in CodePen you have separate windows for HTML, CSS and JS (JavaScript) instead of separate files. Right now you can ignore JS window.

For example, if you want to change default font for your project, you add

.body {
  font-family: Lobster, sans-serif;
}

in the CSS window (I see you have already linked ‘Lobster’ font in your HTML window; and sans-serif is just a fallback font).

I would recommend you to go through the Codeacademy’s HTML & CSS course to refresh your knowledge - I think it would be less frustrating than going through the same lessons again :wink:


#4

Thanks a lot guys both of you have cleared things up for me. I am (very) slowly starting to get to grips with it but one thing that bothers me at the moment is positioning my images and text. I have two images on the same row and have tried to use bootstrap to position them in a presentable way. Ideally i would like to have three images equal in size, taking up the whole width of the row. Then when i am more comfortable positioning images i can start to experiment with positioning text and images in more interesting ways.

Edit: https://www.freecodecamp.com/challenges/use-the-bootstrap-grid-to-put-elements-side-by-side

this is what i’ve been using to figure out positioning the images but I’m not even sure if that’s what i need to be doing ha


#5

You have an error in your HTML - you’re using style tags for Bootstrap instead of class.

I cleaned up the part of your code (corrected style to class and moved width and height outside of the style tags in the img tags) (don’t just copy/paste it, compare it to your’s and correct your code yourself):

<div class="row">

    <div class="col-xs-6" align="center">
      <img class="thin-blue-border" width="400" height="300" src="http://i.imgur.com/71c1cMu.jpg?1">
    </div>

    <div class="col-xs-6">
      <img class="thin-blue-border" width="400" height="300" src="http://pbs.twimg.com/media/CJz4roiUwAA2wtf.jpg">
    </div>

</div>

Rule of thumb - You don’t want any style tags in your HTML document (CodePen HTML window). If you have them you should have a reason for that.

align also better be moved to CSS.

Btw .thin-blue-border is not thin and is not blue anymore :wink:


#6

Tribute site looks great. freeCodeCamp simplifies for the sake of you learning so there are some things that you’ve never seen before but keep at it. Once you finish this one, next will be way easier.(This one looks almost done)


#7

A good place to learn about the basics of the Bootstrap grid is W3Schools. Anytime I forgot about anything or wanted to do something that I don’t remember learning, I would check that site first. If it doesn’t have what you’re looking for, try searching on Google. Chances are someone has already asked that question before you.

I know that this isn’t an exact answer to your image problem, but it’s good to use the resources out there to figure out a solution yourself. I also find that when I learn the concept behind the code through research, I’m more likely to retain that information.


#8

Thanks for the advice Ava0808 and Jynxe. W3Schools has been nice to use as a reference. I’m finding that one of the biggest problems I have is how and in what order to enter commands, data, etc. I can remember what they do but when it comes to typing it out my mind goes blank. I think I’m going to start writing things down as I learn them in a notepad so i’ve got something to refer back to if I get stuck.

Looking to tidy up my Tribute page and then move on to the Portfolio page. I’ve been watching the bootstrap tutorial videos recommended earlier and they’re helping me get some ideas for how id like to present it. I’ve started the JavaScript tutorials but i’m not sure if i should continue doing so at the same time as i’m getting to grips with HTML.

Sorry if this has gone a bit off topic but thanks for the help so far guys.