Tribute Page - Martha Graham - Advice/Feedback Appreciated!

I am very excited to post my first FCC project, a tribute page to Martha Graham, one of the most iconic ballet dancers in history. She has an encouraging story about trying something innovative and bold within her industry, which I’m sure we can all relate to.

Please enjoy and any comments on my code are most welcome!

Project Link - [https://codepen.io/jacobmwhitney1/full/KyMjXv/]

Hey Jacob - you killed it dude! that page is great! I was stoked on my work but after seeing yours I’ve got some catching up to do.

Thanks for saying that! I’ve actually worked with HTML and CSS for a few years now, but wanted to learn something new through FCC. This is my first time using Bootstrap, and man is it awesome.

You’ve got great work too, and a quirky style that helps you stand out.

Hi @jacobmwhitney1,

  • More descriptive elements are better [1]:

    • Replace the Martha Graham paragraph with a <h1> element
<p class="h1 text-center pt-5">Martha Graham</p>

MDN documentation:
<h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

  • Here you can use a footer element:
<p class="text-center mt-5 mb-2">Written and coded by <a href="https://codepen.io/jacobmwhitney1/full/KyaPwG/" target="_blank">Jacob Whitney</a>
</div>

MDN documentation:
<footer>: The Footer element - HTML: HyperText Markup Language | MDN

The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

Example

<footer>
  Some copyright info or perhaps some author
  info for an &lt;article&gt;?
</footer

Cheers and happy coding :slight_smile:

[1] Wikipedia article:
HTML - Wikipedia

HTML describes the structure of a web page semantically

HTML - Wikipedia

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look).

Semantic Web - Wikipedia

According to the W3C, “The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries”

Semantic HTML refers to the traditional HTML practice of markup following intention, rather than specifying layout details directly. Layout details are left up to the browser, in combination with Cascading Style Sheets.

@jacobmwhitney1 Im a total beginner. I’m causing more problems than I’m solving when it comes to my codes, at this point, but I’m super into and I enjoy trouble shooting (which I’m at no lack of at this point)

Are you in the coding space full time? or just a hobby?

Well you’re in the right place to improve on that, FCC is one of the friendliest communities out there.
Are you planning your projects and/or using pseudo-code before starting them? That’s the best way to first identify the problem you’re trying to solve, then go about solving, all before writing a line of code.

I’ve worked freelance jobs before, creating websites and some advertising stuff. Right now I’m a math tutor, but looking for something that has more full-time work potential. Hopefully the FCC community is a ticket to that pathway. Wbu?

Im not 100% what “psuedo code” is, but basically im going through all the steps and watching tons of videos on how to build the code properly. The earlier challenges where pretty easy but the portfolio challenge is way harder than I expected. I’m glad its hard though, I feel like I’m really being tested and learning more this way.

I’m working on the portfolio next, looks tough.

The word “pseudo” means “not genuine” or “fake”. So pseudo-code is just that, non-genuine code. It’s just typing out your steps in plain old English, before starting to code.
The video linked below explains the basic concept. The programming they are doing is drawing with JavaScript, but pseudo-code applies to every type of coding.

Video Link - [https://www.khanacademy.org/computing/computer-programming/programming/good-practices/p/planning-with-pseudo-code]

Wow, thank you for the multitude of sources and blockquotes! :star_struck:

I usually stick with the descriptive elements, but this is my first time using Bootstrap and the CSS “font-size” and “font-weight” weren’t working with the “h1” element, which was the reason for going with the “.h1” class.
Per your suggestion, I changed to descriptive elements and used the “!important” designation for my CSS, which seems to have done the trick.

Thank you for the feedback, here’s the updated project in case you’re interested.

Project Link - [https://codepen.io/jacobmwhitney1/full/yPMEGw/]

perfect thanks! honestly I’v not done anything in pseudo code yet, but I can see the benefit for sure. Will be helpful in the future. THanks