Do you know who was Carlos Chagas? Check out my tribute page about him

Code Feedback
1

Hello from Brazil! I’m a designer and I’m loving to learning how to code!

As a Brazillian, I choose a scientist from my country to make a tribute page.

Let me know what you think. Feedbacks are always appreciated.

1 Like
2

Hi @nathabonfim59!
I really like your project, both in terms of design and code. All very clean, tidy and harmonious.:ok_hand:

Regarding the code, I’m curious about this part:

<div class="fold-image" id="img-div">
   <img class="" src="https://github.com/nathabonfim59/fcc-tribute-page/raw/master/subject.png" alt="" id="image">
    <p style="font-size: 0;" id="img-caption">Carlos Chagas, a man with a gorgeus mustache.</p>
</div>

Why do you add a paragraph with font-size: 0 below the image?:thinking:

On the other hand, in this case the image should have a non-empty alt attribute (for better accessibility).

Another detail that I think you should correct is the class ="" attribute for that image, or you delete it or specify a class name. Why leave it empty?

Cheers and happy coding!:keyboard::muscle:

1 Like
3

Very nice page. Good job.

  1. I feel like the text wrapping can use a little love.

  • Try avoiding having the name wrap for as long as possible. When it does wrap adjust the line-height to close the gap between the first and last name. When the page is stacked and the name again starts to wrap I would center align the h3, h1 and button.

  • When the .section-abstract h1 header starts to wrap to 3 lines I think you might want to lower the line-height a bit.

  • I’d probably also set the .section-cta h1 header to have text-align: center so the text wraps to the center and not to the left side.

  1. I’d give the section-abstract content a container and set a max-width and margin auto on it to control the width of the content and push it to the center of the page.

  2. Personally I think the paragraph font size should be bigger and have a bit more line-height.

  3. Remove the “in” from the “Click in the button bellow” text and fix the typo (it should be below not bellow). Also, remove the apostrophe from the “I’would like to know” button text.

Again really nice job on this.

1 Like
4

I was testing the positioning without it and forgot to undo the changes. :sweat_smile:

:white_check_mark: Added

True. I found that using the img tag itself, in this case, was easier than attribute another class.
:white_check_mark: Empty class removed.

I also changed the tag from a div to a figure to be more semantic.

			<figure class="fold-image" id="img-div">
				<img src="https://github.com/nathabonfim59/fcc-tribute-page/raw/master/subject.png" alt="A portrait Carlos Chagas looking at the left." id="image">
				<figcaption id="img-caption"><em>A man with an impressive mustache.</em></figcaption>
			</figure>

Thanks for the feedback, @MartaFagundez . It was really helpful. Have a nice weekend! :smiley:

2 Likes
5

@lasjorg, thank you very much! I appreciate the time you put in such detailed feedback. :smiley:

:white_check_mark: Adjusted. After that, the content became easier to read and understand.

:white_check_mark: Given. Now I can control the appearance of the paragraphs precisely and not worry about long lines in big screens.

:white_check_mark: Readability++

:sweat_smile: Fixed. My English is not that good, but I’m improving thanks to hints like these.

:raised_hands: I implemented those changes and my page already looks a whole lot better. So, thanks again and keep up the great work in the community. I’m happy to know that people like you guys exist to help the beginner along the way.