Tribute Page: Deaf President Now protest

Code Feedback
1

So… sticking my toe into this forum.

I’m no stranger to coding (just finished a bootcamp in April). In between job hunting (and hope to find something soon), I’m keeping up with practicing. I started FCC I think last year - off and on working my way through.

My Tribute page- It’s kind of plain so to speak…I might spruce it up some more at some point.

Suggestions, comments etc welcome.

2

Generally speaking, the page its ok but i would take a deeper look on how the page is looking on mobile. You have in there margins and text-indents that in my opinion are too high for a mobile version of the page.

Also, you should consider making your css code as DRY(Do not Repeat Yourself) as possible. Here what i mean:
You have this repeating css code for each of your days class:

.timeline .day1:before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: url("https://www.signingsavvy.com/images/words/numbers/1/one1.png");
  background-size: cover;
  background-position: center;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

with the exception of background-image that is different for each one.
So, why not making a general style and after make a class to only add your particular background-image to your html.
Something like:

In HTML:

<li><span class="day1"></span>Day 1 (March 6)</li>

and in CSS:

.timeline span{
  width: 40px;
  height: 40px;
  position: absolute;
  background-size: cover;
  background-position: center;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}
.timeline .day1{
  background-image: url("https://www.signingsavvy.com/images/words/numbers/1/one1.png"); 
}
1 Like
3

Thank you! Much appreciated.

The DRY part did cross my mind and that’s something I’ll fix; I wasn’t super sure because of the multiple different images for the

  • s but your comment makes sense.

    I hadn’t gotten as far as refactoring it for mobile/tablet format as I’m not entirely used to doing that with HTML & CSS. I was pretty much playing around trying to get it all to look somewhat nice (and to pass the FCC tests) onscreen; a little hard to do when my screen resolution is not the ‘normal size’ and I forget to make sure my browsers are set at 100% and not 125-150%. :slight_smile:

    (I’m still thinking in React for responsive design for pages lol)

    • 4

    Make a minimum body with 320 or less pixels.

    On smaller screen, w/ media queries, remove the margins and make the text slightly smaller.

    image
    image1920×1040 162 KB

    5

    Thanks! I was just finishing up refactoring the timeline.

    The rest I’ll work on. I tend to forget about that part as I don’t always use my mobile for web surfing (many times font is too small and zooming in is fun in moving the page back and forth to read :eyes:

    About to edit codepen and push to git for the refactor…