Tribute Page (Passed tests, but looks boring)

Code Feedback
1

Hey All,

I’m super excited to be back coding and look forward to being an active (hopefully helpful) member of this community. Below is my Tribute Page project, I’d really appreciate if you’d give it a look and provide some constructive feedback for me.

https://codepen.io/buddhablake/full/yLNzQam

While I passed all of the tests and tried my best to follow the best practices I am aware of, I know there are things to improve upon. My main gripe is that whenever I build a page it always looks so dull and feels like some pre-2000’s internet page. I know I’ll get better, but I was wondering if anyone has some advice or knows of any “low hanging fruit” for better design?

Thanks all!

-Buddha Blake

2

Hi @buddhablake,

Couple quick things that could make it a bit more modern:

  • Make the top section 2 Columns with his image on one side and the headline on the other

  • Remove the padding on the body or outer wrapper

  • Research color theory and update the background or text color to improve readability.

  • Read this article for help with spacing, alignment, layout etc: http://blog-en.tilda.cc/articles-website-design-mistakes

Good Luck
4trio19 :pineapple:

3

Hi @4trio19,

Thank you for the feedback. I am working on implementing your suggestions. Currently I am ripping my hair out trying to create the 2 columns at the top. Every method I try seems to either break the page or seems far too complicated for something as simple as 2 columns. What method would you suggest using?

-Buddha Blake

4

I would use CSS grid. Make a full width container div with 2 equal width columns. I believe CSS grid is in the FCC curriculum so you should have reference here or I like this page for quick info: https://css-tricks.com/snippets/css/complete-guide-grid/

4trio19 :pineapple:

5

@4trio19 per your recommendation I ended up spending all of yesterday and most of today going to school on CSS grid. I was able to accomplish the side by side columns and make them fully responsive. I’m making some tweaks to the page now to clean up the color, readability, and overall layout. Hoping to have something much cleaner to share tomorrow. Thanks for pointing me in the right direction.

-Buddha Blake

1 Like
6

You’re welcome @buddhablake. The updates look good and it sounds like you learned a little bit in the process. Nice job :smile:

4trio19 :pineapple:

1 Like
7

I was just looking at this post and I must say thanks a lot for the handy article on common website design mistakes! Very very useful!

1 Like
8

Hey All,

I decided to take another stab at it and I’m much happier with the results:

https://codepen.io/buddhablake/full/VwLrBRy

I know my code is probably overly complicated so any suggestions there would be greatly appreciated. In particular, what I should be using in CSS to avoid using < br> elements in my html to create breaks in paragraphs.

Thanks for the help so far, everyone’s been very helpful.

-Buddha Blake

9

@buddhablake, you’re correct in that you shouldn’t be using the <br> element to force spacing. The easiest thing to do if you want two paragraphs is to wrap each one in a <p> tag.
If for some reason you don’t want to do that you can do something like this in HTML;

<div class="break"> 
  This is the first paragraph 
  This is the second paragraph 
</div>

and then in CSS do;

.break {
  white-space: pre;
}

Edit: As an aside, read this paying attention to the Accessibility Concerns

10

Hey @Roma,

Thank you for the alternative methods. As I went to apply them another idea came to mind using the CSS Grid that already controls much of the layout of my page. You can see my solution below. Surely it isnt the most elegant solution, but I am really trying to familiarize myself with CSS Grid and was curious what a solution might look like given those limitations. What do you think?

<li><span class="year">523-483 BC</span>
            <p>Lorem Ipsum</p>

<p class="p-2">Lorem Ipsum</p>
            </li>

li{
  display: grid;
  grid-template-columns: 2fr 4fr;
  grid-template-areas: 'year text'
                        '. text-2';
 
}

.year{
font-size: 20px;
font-weight:bolder;
align-self: center;
grid-area: year;


}

li p{
  font-family:sans-serif;
  grid-area: text;
}

.p-2{
 grid-area:text-2 !important;
}

-Buddha Blake