Feedback on Tribute Page -M

Hi Campers

Please take a moment and have a look at my Tribute Page project.

All feedback is welcome.

  • I’d advise you to write vanilla code for now. Libraries are helpful in production, but are a crutch when learning (especially bootstrap and jquery).
  • tidy up your code and research about max characters per line of code
  • One line of CSS is not going to help you learn web development. Try and make the page look a bit better, without the help of Bootstrap

Great work so far! Keep pushing!

Using Bootstrap allows you to create certain designs and layouts much faster, because the core CSS has already been defined. For your first web page, I think it is a great accomplishment even using Bootstrap, because you still had to study the library syntax to use the right classes to make your design look the way you want.

Do I think it is also a good idea to learn to create projects from the ground up using vanilla CSS? Sure, but you can start with a library and then when you start using vanilla CSS to replicate something you did in Bootstrap, you can check out the library documentation and/or look at the library classes to see how they were defined. You can learn it in a different way.

Now that I have given you the praise for getting something on the page, let’s talk about some syntax issues in your html and also touch on some features in Bootstrap you could use to make your original design better.

#1) The following html has invalid syntax. Your img element does not end with a /> and img tags do not have </img>. add the /> and delete the </img> tag.

#2) The center element is obsolete. It still may work some browsers, but you should not use it, because it may not work on all browsers. Instead, use CSS to center the element it or since you are Bootstrap, see Bootstrap Suggestions section below for centering options.

<center><img src = alt= "khayelitsha township" </center><img>

#3) Get in the habit of always surrounding the value of element’s attributes with either double quotes or single quotes. Both must be the same type and you should be consistent through your html with which one you pick. In the above html, the src attribute’s value (the url) is missing surrounding quotes.

#4) The following anchor tag is missing and ending >. This is causing everything after it (including the bottom text) to be a link.

 <p>If you have time, you should read more about this wonderful township on its <a href="https://en.wikipedia.org"</a> Wikipedia entry.</p>

You should review the following FCC challenge for how to create a link on a specific part of a group of text. Your Wikipedia entry text is not in the correct location.

#5) In the following code, you attempt to use the font element and it’s color attribute to style the text color.

<font color="#4c4cff">
  <p>Coded by Mfuneko</p>

Unfortunately, this tag is not supported in HTML5, so you should not use it in your code. Instead, you must CSS (not Bootstrap) to control the styling of the font of text. Review the following FCC challenge for how to change font color using CSS. I suggest creating a class to use with this specific p element.

#1) When the screen width gets smaller, your image is not responsive. Instead, it stays a fixed size and ends up going off to the right of the page as the page gets smaller. Since you are using Bootstrap 4, review the documentation on the img-fluid class for how you accomplish this.

#2) Going back to the html code in the Syntax Issues section, let’s look at how you could center the image within the parent div element. One way, is to put the “text-center” class in the parent div and this will make the elements in it centered. The other way, would be to add the class “mx-auto d-block” to the img tag.

#3) What about that unorderd list containing all the facts about Khayelitsha. Currently, it is right-justified. On a wider screen, it does not seem to fit the overall alignment of other page elements. My suggestion is to have the list be the same width as the image above it. This is a little tricky but can be accomplished with a little bit of vanilla CSS and Bootstrap 4 syntax. First, you would need to center all the elements on the page like I described in Syntax Issues #2. I suggest creating a div to hold all your existing html and then give it the text-center class. This will make everything centered. However, it also makes the bullets centered and it would look better to have them left-justified. First, we need to limit the size of the ul to be the max size the photo can ever be. When I looked at your image’s actual dimensions, the width is 600px, so let’s make the ul’s max-width property 600px. I will let you figure out the write syntax for that. Next, we want to left-justify the ul bullets. The “text-left” class will do that, but we also need to had “mx-auto d-block” to force it to the center under the image.

I have given you a very detailed review to take in consideration for this project and future ones. Let me know if you have any questions about what I have written or questions on how to implement other things in your project.

1 Like

What a great explanation you’ve given here!
Helped me.