1st FCC project - Tribute Page

Code Feedback
1

Hello all!

I’m looking for feedback on my tribute page. I wanted to throw this out there for feedback with the code first since design isn’t my strongest skill. I’ll take any feedback and help with design as well.

Thanks,
AW

2 Likes
2

Nice and clean! only thing I would fix is stretching your image to full width when seen from mobile views.

:+1:

1 Like
3

Welcome @aw024

I have nothing to add other than to agree with @shimphillip The main reason I’m replying is because I’m a USAF veteran and I like and appreciate your page. Good job!

1 Like
4

Thank you. I had not looked at the page on my mobile screen so I appreciate the reminder.

5

Hello @aw024! Congrats on your first project. I have some design suggestions that I will skip over per your request. However, I feel that there are technical implementations of responsive design that are better understood when web design is understood in unison. Let me know if you change your mind about design and I will pass along what I see.

In the meantime, here are some notes on your code itself. Let me know if anything needs clarified or further explained. I’m happy to help! :slight_smile:

Blockquote

<blockquote>
Over 1500 personnel, permanently assigned to
Buckley AFB, Greeley ANGS, Peterson AFB, 
and Airburst Range near Ft. Carson, provide our nation with fighter, airlift, 
space-based early missile warning and support forces 
capable of global employment.
</blockquote>

Your use of blockquote here appears incorrect. Check out the MDN on the blockquote element, where a blockquote tag should only be used to indicate a quote from an outside source. If you used the blockquote tag intentionally here, you should have some indication or citation of the source. Otherwise, use the <span>, <p>, or similar tag to indicate text.

Class vs ID vs Selectors
I noticed that you use ID and selector targeting in most of your CSS. I won’t go into detail, and this isn’t the end of the world, but this article explains best practices for CSS naming conventions. I just found this article while doing research for this post, and it summarizes 3-4 other articles I have read over time that adjusted how I name and target my HTML elements with CSS. I particularly love the BEM naming convention. You will find your code easier to manage, and avoid accidentally overwriting element properties when primarily using classes.

CSS img

img{
  max-width:60%;
  display: block;
  height: auto;
  margin: auto;
}

  • The height of elements in HTML are predefined to “auto” unless explicitly changed somewhere in a website’s code. I know many websites state you should set this when using width: 100% but it is technically not necessary. This MDN on CSS height property explains this and a few other interesting things about height. Basically, if you are setting the width of an image (or other HTML elements) the height will generally preserve the correct ratio. This article goes further in depth on the CSS image sizing algorithm.

  • You taught me something new today. I was initially going to post that margin: auto; should be margin: 0 auto;, but this page explains why margin: auto sets top and bottom margins to 0.

Border Radius

#main{
  margin:30px;
  padding:5px;
  border:0px solid;
  border-radius:5px;
  background:#eee;
}

Here you are using border: 0px, which does nothing. My guess is you are under the impression that border-radius:5px; cannot be used without declaring a border property, but this isn’t the case. Feel free to delete your 0 pixel border and you will see your #main element retains its curves!

HTML vs Body
Last one!

html,body{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  text-align:center;
  min-width:260px;
  color:#333;
}

You are targeting html and body together. Uh oh! This doesn’t affect the rendering of your page (in this case) but it is a bad practice overall. These are two separate elements, and at best you are declaring CSS properties twice, once in html, and once in body, for no reason. At worst, you will find a declaration that operates differently between these two and gives you an unexpected result. Here is an article on the differences between html and body selectors in CSS.

2 Likes
6

Thank you. I had not looked at the page on my mobile screen so I appreciate the reminder.

Did you know that you can preview your site in mobile view using your browser’s development tools?

Open your developer tools. On Chrome you can use the shortcut ctrl+shift*j, on Firefox use ctrl+shift+i or on Edge press F12.

From there, on Chrome and on Firefox there will be an icon on the top bar of the development menu that looks like a phone and a tablet. You can click on that icon to toggle a responsive design mode for testing on phones.

For Edge it is a bit different. You need to go to the “Emulation” tab and select the preferences for the type of device you want to emulate.

However to be honest, when developing on Codepen it is often enough to just resize the window to see what it might look like on a thinner resolution.

7

Nice job. I viewed this on my phone, and it looks fine.

8

Thank you for the info. So many things to learn!

9

Thank you for your help. I made a few changes based on your suggestions and submitted the code without using the BEM method. The original assignment looked for

id=“main”, as well as a few other elements using the same practice. I read the article you suggested, with several others I’ve found, and I do see how BEM will work

much better in future projects. I plan to rewrite this project using that method so I can see the difference.

I am confused about why the assignment requested using id=“main” rather than using , as shown in this article:
https://www.w3docs.com/learn-html/html-main-tag.html
The article states,“The tag is a new block-level element in the HTML5 specification.” Is using id=“main” something from previous versions of HTML or are these

two things completely different from one another?

I would also appreciate your suggestions on design since making something pretty and/or exciting to look at is not my strongest skill set.

10

Good job! Being a huge aviation fan boi, I noticed 1 thing, change Leer Jets to Learjets and the aircraft will be named properly. Grats on getting your page done. I started on the same project earlier. Can’t wait till the family is all settled haha.

11

These are two separate things. <main> </main> is a tag that is used as a semantic way of showing the content within this section is the “main” content of the page. This is a tag similar to <section> </section> and <article> </article>. All of these tags are a way to indicate in a more “plain English” sense what those sections are for, instead of using <div> for everything.

Using id = "main" is a way to assign ANY tag the id of “main”. I can say <p id="main"> or <div id="main" or even <main id="main">. The id is just a way of naming an element in your HTML, the same way you can name things with the class attribute.

I am not a strong designer either, and I’m still learning all the time about what the best practices are for designing web content. I suggest reading articles as you come across them in your research. Here are some articles I’ve found so far: