Build a Tribute Page Project Questions, Discussions, and Resources (January 2018 Cohort)

INFO

Here’s the January 2018 fCC cohort information and schedule.

This topic is for members of the January 2018 fCC cohort to share information, review, and give feedback for the beta curriculum tribute project. Click on the cohort link if you’d like to join.

Reply here with your questions, comments, and additional resources regarding the Tribute Project.

DEADLINE: 2018-02-04 23:59 PST

2018-02-05 04:59 UTC

RESOURCES

MEMBERS

:star: :new: :arrow_right:

  • Please plan to complete your project before the deadline so there is plenty of time for others to submit a review.

  • When you’re ready to submit your project for review, create a new topic for your project and add it to the list below.

  • Also, please REVIEW AT LEAST 2 PROJECTS using the checklist below.

Bookmark this topic and make sure you’re “watching” the topic so you can participate in the discussion.

watching

CHECKLIST FOR REVIEWING PROJECTS

(Source: Codecademy)

  1. Does this project adhere to best coding practices? Is it well formatted and tidy?

  2. Is the HTML structure convoluted and unnecessarily nested? Are container elements used in a way that enhance overall page structure? In other words, does the student effectively use container elements to create a coherent structure without venturing into divitis territory?

  3. Does the stylesheet make good use of the cascade and classes to avoid redundancy in the CSS?

  4. Can the CSS or HTML be simplified?

  5. Are selectors too long (say greater than three elements) and does the student try to keep CSS specificity low?

  6. Are the relative paths correct?

  7. Are semantic tags being used correctly? Are deprecated tags being used?

  8. Are concise but descriptive alt attributes being used?

  9. Are semantic class names being used?

PROJECTS

Note: You can edit this post, like a wiki, to help keep things organized and add resources and other information you want to share with others.

8 Likes

@camper, @mohamedeliwa, @Fixy250185, @firuzshoev, @mberkland, @Wahe3bru, @TammyKnox, @slamoureux, @zaynaib, @angelinalblyth, @facundocorradini, @debu2code, @sasikumar07, @johnhannahdev, @nasef123

2 Likes

@ConnectExtend, @callumshaw, @PerkyPrince, @catherinewoodward, @Gildara, @dmac0505, @corneerasmus, @LawGaming, @lbeth, @DGC75, @Vanic6, @asmarino, @HaiCia, @arhillis, @pavankrcr

2 Likes

@stufinn, @5Lions, @Jinxlaw, @yoizfefisch, @weindor, @shivendraDave, @deedee, @TiwaunP, @npalopoli, @kindaintellectual, @nicandromts, @MMahendra001, @basantos

1 Like

https://codepen.io/jinxlaw/full/BLOJYZ/

Won’t lie, picking a character to make a tribute page about was the hardest part of this project.
Took me lots of googling.

2 Likes

Added my tribute page to the list.I concentrated on trying to make the test criteria go green and I know there is probably a lot to brush up on and make look better. I might take another stab at it this weekend. Feedback appreciated

6 Likes

Thank you for creating the next post. Appreciate posting the checklist for reviewing projects. This is going to be very helpful.

2 Likes

Yes, thank you @camper for all you’re doing! Much appreciated. :star2:

2 Likes

WOAH. how did you do that? make those links open up further info. What feature is that?

and also how did you get that Babel thing embed in ur code?

I am trying to use the supermecado one font and its not showing up the way it is on google font sin code pen

deedee - Are you linking the font through an href in HTML or through @import at the top of CSS file?

i did that thing at the top of the page

deedee –
It’s hard to diagnose without seeing your code. Here are a couple of thoughts:

  • Doublecheck that you have all the quote marks and that there’s a semicolon at end.

  • Recently I left the semicolon off one of the @import lines and the font didn’t get implemented.

Hope that helps.

1 Like
h1 { color: blue; font-family: 'Supermercado One'; } ![image|690x388](upload://aUPFRskiiMbDctC3KRmkJ5VR77t.png) Thats what it is supposed to look like and thats not what was given in codepen

Also. i wanted to put the pic of my tribute person side by side with is date of birth/death. I could only think of using the flex row command but when i did that my pic shrunk and i could not increase it. know why?

Tests i failed and dont know how to pass cause i dont know what they mean and what to do:

  1. My tribute page should have an element with corresponding id=“main”, which contains all other elements.
  2. I should see an element with corresponding id=“title”, which contains a string (i.e. text) that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”).
  3. I should see a div> element with corresponding id=“img-div”.
  4. Within the “img-div” element, I should see an element with a corresponding id=“image”.
  5. Within the “img-div” element, I should see an element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.
  6. I should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page.
  7. I should see an a> element with a corresponding id=“tribute-link”, which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to “_blank” in order for your link to open in a new tab (i.e. target="_blank").

There are more but num 7 i dont get. Why do i need an id for a tribute link. Cant i just put the link and leave it? What am i going to put inside the id?

  1. This test hopes to get you in the habit of adding “main” sections in your webpages. HTML5 introduced the <main> which is what you should use. Add a main element to your content as follows.:
<main id="main">
  <!-- content here -->
</main>
  1. Your HTML should have a title. The title can be an h1 element. Give this element an id as follows:
<h1 id="title"><!-- your title here --></h1>
  1. Below
  2. Below
  3. Your image should be divided into three sections: a container div, the actual image, and the image caption. It should look something like this:
<div id="img-div">
  <img id="image" src="http://your-img-url.xyz" alt="Describe the image here">
  <p id="img-caption">A caption here</p>
</div>
  1. You should have an element describing your tribute subject. Something like the following should be fine:
<p id="tribute-info"><!-- describe your subject here! --></p>
  1. You should link to outside information. This is a great place for your tribute’s Wikipedia entry. The following should be fine:
<a id="tribute-link" target="blank" href="http://link-to-more-info.xyz"><!-- text or image about your tribute --></a> 

As for why you need ids, it’s good practice to id your elements. However, more importantly, this is how your content is tested.

I hope this helped, @deedee.

5 Likes

Ok i’ll get started with this. Thank you!

I just added my project which is a tribute to George Washington.

P.S. I’ll admit this wasn’t done within the cohort timeline, I worked through the beta challenges a few months back and finished the first 2 projects then. Thanks to this cohort, I have now reviewed the challenges and refreshed on a lot.