My Tribute Page is Here!

Code Feedback
1

Hello to everyone.
Here is my first work. :rofl:
I tried to use everything I learned .Frankly I had a lot of fun while working on this page :dancer:
Maybe I can make a few adjustments in Timeline.
I look forward to your ideas. :watermelon: :cherry_blossom:
Thanks!! :slight_smile:

Link; https://codepen.io/sevgi/full/wejdEp/

2 Likes
2

Nice work Sevgi, I liked the animations!

You might have already noticed, but the edges of the flask become distorted when it shakes.

This could be fixed by using an SVG instead of a PNG (not 100%).

Also, when you shrink the window, the video becomes cut off. Perhaps this could be solved by placing the video above the timeline?

1 Like
3

You went above and beyond with this tribute page! Your design is beautiful on desktop.

In terms of your HTML, it could be cleaned up a bit. But the closing tags </table> and </div>s (like on line 47) split onto separate lines. It increases the readability of the code. On line 53, you have some styles in-line. It’s generally better practice to separate all styles in your CSS, so I would add those attributes into your CSS section.

Overall, I would recommend attempting to redesign the mobile version of the page. Instead of having to scroll right to see more of the page, I would recommend <class="col-xs-12 col-md-6> so that they are more responsive.

Read up on HTML and CSS best practices, otherwise your design and content kick ass! You’re definitely ready to move onto more projects!

1 Like
4

First of all, thank you for reviewing my page and your advice :slight_smile: I put it as an example because I can not find any svg format pictures like I want. But this deterioration makes itself felt.:roll_eyes:

By the way , for video I will have to do a responsive work for the bottom of the page.

Also thank you for your attention, friend :blush:

Sevgi.

5

You are really very careful. (I’m talking about CSS) :sweat_smile:
Thank you for checking out my code and for giving me a clue. I could not look here in time so I returned late. You are right about my page’s mobile compatibility. I will fix my page as soon as possible. :slight_smile:

Thanks again for your valuable feedback :cherry_blossom:

Sevgi.

6

Hi Sevgi,

In case you ever decide to use SVG’s, it’s relatively easy to convert images/vectors from the web using Illustrator.

Keep up the good work!

1 Like
7

Hi, friend! :slight_smile: Thank you for this tip. I got a better image using SVG in my page. I wish you a good day. :sunflower:

Sevgi.

1 Like
8

Hi Sevgi,

I found a solution to your image problem! Add the class ‘anti-alias’ to your image tag and then add this style:

.anti-alias{
outline: 1px solid transparent
}

No more jagged edges, at least on Firefox :slight_smile:

1 Like
9

Thank you for your help. I applied the solution. The picture is in good condition :cherry_blossom: