Project Feedback

[RauLily]

Upgrade the code from your last project to fully valid (and clean) HTML

@KatieMFritz Can you take a look at this? It's hosted here and meets the following criteria:

• [x] The files from your last project are copied and pasted into the directory for this project
• [x] Your code returns no errors (warnings are OK) when pasted into the W3C Validator (this will also be expected for all future projects)
• [x] Consistent spacing and indentation are used on every line (this will also be expected for all future projects)
• [x] skeleton.css is used to improve the design of the page

Okay, I really can't figure out why the photo wouldn't show up on the gh-pages. It does show up for HTML, and I have tried linking it directly to the location instead of "Makoto.jpg." Also, it looks the same I think even though I applied the skeleton.css and I don't know if that's right. Thanks!

[KatieMFritz]

Hi Lily, great start getting your HTML valid! 🎉 I'm gonna break my feedback up into to stages.

For this round, we'll focus on getting your assets to work. By assets, I mean files that you link to from your HTML: your image, and your CSS. Some other examples of assets are PDFs, .doc files, custom fonts, videos, and sound files. It's anything that you can't create with HTML; you can think of assets kind of like a email attachments.

Image

I think this is a case where case matters (😂). In your code, you say <img src="Makoto.jpg", but your file is called makoto.jpg. Try changing the src to match the file name exactly and see if that makes a difference!

Skeleton.css

In this code <link rel="stylesheet" href="skeleton.css">, your HTML says to include the file skeleton.css from the same folder as index.html. However, that file doesn't exist! 👻

There are two ways you can include an asset in your HTML.

1. You can save the asset in your project and upload it to your server (in this project, your server is Github Pages). In your HTML, you link to it by its name, just like you're doing with your image above (src="makoto.jpg").
2. You can link to an asset that is stored on another server somewhere else on the Internet (not on your project). When you do that, the link will start with https://, and if you paste the link in your browser, you should be able to see the asset, like https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css.

For assets that someone else creates and updates, like a CSS framework (that's what Skeleton is), it's usually best to use the second method. That way, if they make improvements to the asset, but keep the same link, you get the updates automatically! It also usually makes your site load faster. 👍

By the way: The cdn in the URL for skeleton stands for Content Delivery Network. That's a type of web server that developers use to share assets efficiently. Keep an eye out for CDN and you'll start to see it in lots of places. 🙂

So try linking to the CDN version of Skeleton, rather than including it in your project. 🐈

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! :rocket:

[RauLily]

Okay! Thank you for all of that great info! I really appreciate your patience; now that I'm looking at your comments it seems like common sense 🙄 I have changed the file to lowercase and linked the cdn (which I'll be sure to look for in other places now!) and it looks good from the live result (I think). Thanks again!

[KatieMFritz]

Hey, be kind to yourself! 😛 All of this is brand new to you, so it doesn't matter if it seems like common sense. You're allowed to not get things right away. ❤️ And it's literally my job to patiently explain things to people.

Your hosted site is looking very nice now, with your image and that pretty CSS! 😸 🌷 🍕 AND, your HTML is still valid. 🌟

Consistent indentation

Your code looks really good too! The only issue is the indentation. Take another look at this page of the lesson and then at your index.html. Some of your indentation is perfect (like the whole head section and your lists) but some elements are indented too far.

A good way to tell if element B should be nested inside element A is to look for element A's closing tag (the one that starts with </). If element B starts before the closing tag, then B is nested inside A and should be indented further. If B starts after the closing tag, then B is a sibling of A (not its child) and should be indented at the same level.

For example:

<body>
  <p>Some important content</p>
</body>

In this example, </body> comes after the p element, so body is the parent and p is the child (nested) and should be indented.

<h1>Major heading</h1>
<h2>Minor heading</h2>

While in this example, </h1> comes before <h2>, so h1 and h2 are siblings and should be at the same level of indentation.

Does that help? Of course, if your closing tags are in the wrong place, it won't work, so you might need to check your code in the validator first! 😆

Let me know once you've updated your indentation and checked everything! 🚀 🐰

[RauLily]

Okay, yes I understand parent/child/sibling elements now. So even if one is less emphasized on the website, it can still be on the same indentation in the code. This should be good to go!

[KatieMFritz]

Exactly! If you want to show relationships in code, one way to do that is by grouping sections by adding empty lines between them; you can also put comments to explain or label your sections. This becomes more necessary in bigger projects. This isn't a fantastic example, but you can see how different sections are split up into chunks in this file.

I only see one last thing to fix! 😻

    <a href="https://www.pinterest.com/pin/575123814888649082/?autologin=true" target="_blank">
    <img src="makoto.jpg" alt="Makoto playing with neighborhood street kitten"></a>

Your img is nested inside the a, right? Move the closing </a> to its own line and indent appropriately. Almost there! 🚀

[RauLily]

Darn! Okay, NOW it should be good. That file was a good example of how to split different sections, it was much easier than having everything clumped together 😃

[KatieMFritz]

Great job!!! :shipit: