Give me your feedback please FCC: Tribute Page

It’s somewhat messed up, I didn’t know how to do things the right way

2 Likes

It doesn’t look messed up to me, and you passed the test.

I like it. I would only suggest in your card table that you consider a padding-left a few px.
Unless you don’t like where it is sitting…as an aside on the right.

1 Like

Thanks for your reply, I tried adding a padding left but it didn’t work unfortunately
could you help me find the issue

Ok. What exactly do you want it to look like?

1 Like

There were multiple things in my mind like:
1- Fixing the link
2- Centering Awards
3- Adding padding left
4- Reducing the space on top

I know these are too much so it’s fine if you do one or two or as you like

Ok. CodePen Basics first:

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
and 

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

</html>
Are not needed and can sometimes get in the Pen's way. So remove them from the CodePen page.

The best way is to go to the Settings section at the top right of the page. 

When it shows you the HTML Settings page: place your meta tags in that section
```<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Save it and go to the CSS Settings. Click to add Bootstrap. 

Same with the JS Settings: in order of jquery and  bootstrap. Then add the actual link to popper and the test bundle. Look at how the other links are saved. No need for script tags in this case/
1 Like

I’m not really sure how to add bootstrap’s css and js to codepen
it’s not clear yet to me

Your link: World Wide Web Consortium
is not as: https:// before the www. So CodePen is trying to find a pen with that name on it.

1 Like

OK. It looks like CodePen has recently changed some stuff around with formatting too.

If you click on the Actions button, it should show the 3 main segments - HTML, CSS, and JS.

I see you have the Viewport added in HTML.

Hover over the CSS bar and Click on the gear setting. If you search for resources, it should drop down Bootstrap choices.

In JS. search for jquery and twitter-bootstrap. It looks like popper.js has been added too.
Then choose to add another, and drop https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js into it.

1 Like

I think the space at top may because of the additional container inside the jumbotron.

1 Like

It finally works as you have instructed, I didn’t know about these changes in codepen UI

I think they just happened.

Can I delete it with no other effects?

Yes. The idea behind CodePen is that most of the backstage items are taken care so you can just focus on the main 3 areas of HTML, CSS, JS

1 Like

You have set up your Tribute row as two separate columns.
Your Card table is set up as a part of the second column.
It looks good if you want it that way, and it falls below on a smaller screen. It’s your choice to have a full one-column row or a two column grid.

1 Like
  1. add “https://” to the link
href="https://www.w3.org/People/Berners-Lee"
  1. Add the .text-center bootstrap class

<h3 class="text-center">Awards</h3>

  1. Add .pl-2 bootstrap class to the table

<table class="card bg-light pl-2">

  1. Add the bootstrap class pt-4 to the jumbotron div

<div class="jumbotron jumbotron-fluid pt-4">

1 Like

It’s actually more like I wanted it to behave some way but got forced into another way
like I wanted the ‘early life and education’ and ‘awards’ to be their independent rows but they just piled up with the upper styles and didn’t know how to change them to the way I wanted them.
Probably because my understanding is still shallow.

The whole col-- is still weird to me and I’m not good in using it

Thanks a lot it really helped with changing what I messed :smile:

You could make a row without class=“col”, and it would take up all 12 columns without breaking.

But you did it correctly if you wanted them in different columns and on the same row.

1 Like

Thanks a lot for your help, it really is now something that I’m proud of
You make a great teacher