My first project :Tribute Page

Code Feedback
1

Hey Coders! :smile:
I made my first project (Tribute Page) and would love to get your feedback.
Here is the link to it https://codepen.io/Shikhar007/full/wvaRpBN

Thanks in advance :innocent:

1 Like
2

Looks good for a first time :3 only the head and header are 2 different things

1 Like
3

@KittyKora Thanks a lot :blush:

4

I like it! :smiley: :+1:

One tip: I work with the fonts into the CSS in this way :

@import url(‘https://fonts.googleapis.com/css?family=Baloo+Thambi+2&display=swap’);

1 Like
5

My friend, you do a very good job, but you lack a little JS page interaction. I believe that JS can make your page better

2 Likes
6

@leonardootc Thanks buddy! I will try your font style in my next project :upside_down_face:

7

@3179312706
Thanks!!
I haven’t started learning JS. I will definitely try integrating JS in my future projects as I go through my learning process :innocent:

8

Ahh this is awesome! Love Carlin.

1 Like
9

@rstorms Thanks man! :grin:

10

Page looks good @shardashikhar. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • The script for the tests is JS. It does not belong in head. It would normally appear just below the closing body tag but since you don’t have that in codepen then you can leave it at the top or bottom or even put in into the JS section.
  • Review the lesson about giving meaningful text to links.
    • ‘wikipedia’ is not accessible
  • Regarding Google fonts, should I use the link or import?
    • For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.
1 Like
11

@Roma
Noted every point.
Thanks for such a useful feedback!! :clap: :clap:

12

Simple and beautiful,
background color is little bit annoying to eye.keep itup

1 Like
13

@Deshanm123
Yeah I thought that too. Will keep in mind about the same for my next projects.
Thanks :raised_hands:

14

You need to center the image for the test to pass.

1 Like
15

@emirleovelazquez
I cleared all the tests without centering the image. I’ll make a note to do so in my next projects.
Thanks :slightly_smiling_face:

16

I agree with @emirleovelazquez. I only see 9/10 tests passing

17

I’ve tried using text-align to center the image to no avail. Whenever I pass image responsive resize, I fail image centering, and vice-versa. Can you help me?

18

text-align is a property for aligning text, not images.
Try using setting the margins of the image’s container. Setting left and right margins to auto should center your image

19

@nibudd
I don’t know why but I’m getting 10/10 result everytime I run test.