I really tried my best to cover all the semantics for accessibility and added a bit of responsivity stuff, but I am not sure if that is good or enough.
Ps. Page was working fine in smaller windows but didn’t pass all tests because I didn’t initially use display:block for images and I had issues trying to make it work with my existing display:flex in parent element, but I did it in the end somehow.
Ps. The overall design is very basic, but I am so bad at this still, learning for a few days and realised that I should just get it done and make sure important stuff are covered.
Looks great on my 600px x 870px tablet. Looks great in portrait mode on my 320px x 450px phone screen, but kind of big in landscape mode- not annoyingly so though. Also looks great on my laptop + monitor (1300px x 631px and 1847px x 939px). Maybe consider adjusting line-height to space out the sentences a little. Also, I’ve been telling myself that box-shadow makes pages look better, so that’s something else to play with if you’d like.
Good job on this tribute page. It’s easy on the eyes
I will take your advice into account for my next project. To be honest, when I first started doing the page, I was so stuck trying to make up a perfect layout, perfect font, font size, colors etc.
The next day I have realized I will never progress like that, so I just went with the most basic stuff basically copying the example page from the curriculum (just the outlook, not the code) just for the sake of finishing it, so I can progress further.
Welcome to the forums @kloba1004. Your page looks good. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to the font goes in the box labeled ‘Stuff for <head>’
Haven’t payed attention to that, I am sorry. I use visual code studio and I have just copy/pasted from there to codepen. Will be more aware next time.
I have ran it through and I understand all the mistakes. Almost all of them are just first-time and lack of experience I guess, especially the section needing heading and using id attributes for multiple elements (that was partly a nus-product of me using display:flex to align the image part of the page and then having to add display:block to pass the tests).
Got it, I assume I was being lazy there.
I will try to fix that tomorrow, since it is 3 a.m. at my place at the moment.
I think the font-size at small screen should be fine now after I deleted the media query in css file. If it is not yet saved, I will deal with it tomorrow.
Overall, I understand what u are trying to tell me, I will try my best to fix the issues and post back here when done. Thank u for your time. And I really mean it, thank you.
If not @Roma, can someone else make a quick check if the aforementioned issues were actually fixed, because I checked myself, but too inexperienced to be 100% sure.
