Here goes nothing, my 1st handcoded website (Tribute)!

Hello,

I know it may not seem like much, and to the trained eye (and, let’s be honest, even the untrained eye), look broken in some parts (especially mobile for pictures, I’ll have to work on that), but I’ve finally finished my first website!

I had to work on the “Tribute Page” as an exercice to advance onto the first certification of fCC’s curriculum, but I felt like I needed to do and train even before starting that. It may seem redundant, but I didn’t want to just do things for them to be done, but for them to be understood. Also, I kind of wanted it to just be my 1st website, not a project.

It’s far from totally optimized as I said, and I especially need to tweak the mobile portability because it’s clearly not good for that, but there’s a point I just abandoned that aspect because I struggled too much, so I just sticked to the widescreen users. Mistakes needed to be done so they won’t be made again.

Of course, I’ll be happy to get any feedback I can get, even the harsh ones. That’s what it is here for. Learning, and especially from more talented people!

Here goes nothing : https://codepen.io/shalvus/full/rNamLWO

The content is partly google-translated wikipedia, partly written by myself, partly hand-translated. Considering the time here, I’m very tired and wanted to finish it before going to sleep… Which led me to 8 o’clock in the morning… so no sleep for me today!

Hopefully you’ll have a good read, and not too much of a good laugh while reading the code ^^

Thanks for any feedback, will be greatly appreciated.

Great job!

It’s your first project, don’t expect it to be amazing!

I don’t see the test script included; so you’ll want to add:

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

into the JS settings cog/gear. Then you’ll see a green hamburger menu in the upper left to run the FCC tests.

Looks like some minor, technical things needed to pass the test; but again, it’s your 1st project.

As for the code, you should judge that once you finish the last project and look back at it :grin:

Hey!

Actually, I would also need to change a lot of divs’ classes and ids name, but the point of this one wasn’t to pass the test. I’ll actually make a whole new one so it does.

This was just an experiment before I do another one. I’ll probably keep the same basis, but change a few things and the subject. I don’t want the next one to be bugged on mobile for example, so I’ll stick to what I really know.

Thanks a lot :slight_smile:

Ah, gotcha.

It really doesn’t seem to bad when I look at it on mobile. The column layout still works in my opinion (although could use a force wrap text). The only things that seem to break are the Title font size and the logo at the bottom.

The images look fine to me, unless you are talking about the broken links?

What I see in Chrome browser inspector (mobile)


I actually don’t have the same result… at all :

I use Chrome for Mobile. Can that comes from that? I’m gonna try another browser
EDIT : So, I still have the width problem on Samsung Internet, but not the overlay one, and the picture is there (I also had this one on Chrome), and there’s also a problem at the bottom of the page… WTF

…loaded your Pen on my mobile and it matches the images I posted above. It looks fine and the YouTube logo loads too…

Could it be your filter in the CSS ? … i’m not a CSS wiz on broswer support, but that one sticks out to me…

https://www.w3schools.com/cssref/css3_pr_filter.asp
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

There does seem to be something going on with this filter, as when I suppress it, I see the blocks of text appear even on PC. I tried it with the properties values in W3C but that doesn’t change anything. I don’t really know more, aside from the fact that from now on I’ll use the background-color instead of this filter