Olivia Woodruff Portfolio

Community Suggestions; Feature and Course Requests
#1

Hi all :slight_smile:

Even though I already know HTML and CSS, I’m currently working through them as part of the Web Development pathway.

I’ve decided to put this post in the suggestions as there’s part of the course that feels like it doesn’t flow all that well.

In the HTML section, there was a heavy emphasis on semantic mark up, which is great in my opinion. For accessibility, I think we should all be more aware of how we are typing our HTML. One of the key points was to use the header, footer, nav tags instead of the way we were doing it for years and just sticking a class of header/footer/nav on a div.

Fast forward to the CSS course and the Olivia Woodruff Portfolio task. In the HTML mark up is the following.

image

The mark up shows a div with the class of header, something that in previous sections we were told not to do as it has no semantic meaning.

I really think this needs to be looked at and possibly changed as I don’t think it flows well and could potentially confused new users to html and css, especially after completing the html section.

Hope you are all well and busy studying. Wish you all the best and good health.

#2

I just finished this project, and noticed an error. In Step 6 it says " Change the main title color so that it matches the background color more nicely. Set the color for h1 elements to Azure . When you do this, the color does not change to Azure, but rather the text is White. This even happens in the Codecademy tutorial video on YouTube, and the narrator just ignores the fact that the color doesn’t change. Kind of annoying. Would be nice if the narrator gave an explanation as to why the color doesn’t change to Azure when that is the instruction…

#3

I agree with the fact that the code template provided for this project should change some of the div tags to some of the more semantically meaningful ones for accessibility.
Initial introduction before this project on HTML was great in my opinion! good knowledge for developers to make our websites more accessible if we follow the teachings. Even better if this project was consistent on the semantic markup practices! :slight_smile:

#4

I have re-tagged some of the HTML code. Can anyone give me some feedback on whether or not it is semantically making sense? I had the CSS wedged in between the <head> tag so people can see my full source code.

<!DOCTYPE html>
<html>

<head>
  <title>Olivia W. Web Development Portfolio</title>
  <style>
      body {
        background-image: 
        url('https://content.codecademy.com/courses/learn-css-selectors-visual-rules/hypnotize_bg.png');
        
        font-family: 'Yusei Magic', sans-serif;
        margin: 0 auto;
        max-width: 600px;

      }

      header {
        background-color: cornflowerblue;
        font-size: 20px;
        text-align: center;
      }

      h1 {
        color: Azure;
      }

      h3 {
        font-weight: bold;
      }

      .half-opacity {
        opacity: 0.5;
      }
</style>
  <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <img src="https://content.codecademy.com/courses/freelance-1/unit-2/travel.jpeg" />
    <h1>Olivia Woodruff</h1>
    <p class="half-opacity">I am a developer specializing in HTML and CSS. 
      I like to run, bike, and make coffee using an Aeropress.</p>
  </header>

  <h2>Projects</h2>
  <h3>Web Development projects</h3>
  <ul>
    <li>Coffee Bruër</li>
    <li>Taco Finder</li>
    <li>CSS Selector Finder</li>
    <li>HTML Formatter</li>
  </ul>

  <h3>Design projects</h3>
  <ul>
    <li>Yum Yum Fudge Inc.</li>
    <li>University of Marimont Dance Marathon</li>
  </ul>

  <footer>
    <p>Find me on Twitter, Dribbble, and GitHub.</p>
    <p>&copy; Copyright. All Rights Reserved.</p>
  </footer>
  
</body>

</html>
#5

Hi viciouscode,
Semantically it’s fine I think—it’s not like there’s a huge amount of room to play around with it!—but I think there are a couple of ways you could improve it:

The .half-opacity class goes a little against the idea of naming classes etc. after what something does rather than how it looks; if the site had a redesign and that paragraph was suddenly meant to be bold and blue, the developer would have to change the class name or stick with a name that is misleading (not a problem in this case because there’s so little to deal with, but you can imagine if a lot of content is in a specific class that that would be a pain in the bum.

As there are two clear sections, you could have those sections within <Section> elements to make it super clear. You could also have a <main> element for everything not in the header or footer.