Here is my project, I have some dilemmas which have previously stopped me from acquiring web dev skills. I can’t quite tell if making a functionality work as seen in some tutorials counts as plagiarizing code or not. For example, I’ve used the w3schools tutorial to make a parallax effect, I’ve changed it a bit though so it fits my background photo. For another example, I wanted to add a typewriter effect and I couldn’t make it do what I want - it expands both ways at the end of the animation. In my opinion, the first case is how you learn, but I’m worried about these cases where I can’t make learned code my own by adjusting it to my needs and not the already seen behavior. I can’t tell whether something is plagiarizing or it is okay to use it in a “don’t reinvent the wheel” sense. Also what bothers me is that I wrote very messy code, I could’ve used fewer lines since it is very repetitive. My impostor syndrome works in a really weird way, I get uncomfortable with not knowing and having planned every step of the way beforehand, so I tend to lose my focus and develop some gimmicks instead of what I planned. For example, here I wanted to code flip cards with book covers on hover, but I’ve lost my patience with the CSS grid. I thought I understood flexbox and grid, but as soon as I had to design them, I forgot which values which CSS attributes can have. The good thing I’m getting used to using documentation, and that I’ve learned to use live server extension for VS Code. I hope this time I get further with web development than before by learning the better way and asking for peer opinion.
Hi @mladenka.orlic, welcome to FCC. Overall your tribute page is very nice and there aren’t any major issues. I do have some suggestions for you though (most of these deal with accessibility issues).
Do not use <br> to create vertical spacing. Each of the paragraphs should be their own <p> tags instead of one big <p> with <br>s.
Instead of <i> tags for all those book titles, use the <cite> tag. The <i> tag has very limited usage nowadays and there is usually a better semantic alternative.
I’m getting a horizontal scroll bar when I narrow the browser window. This has to do with the image not resizing properly and is also tied into the usage of display: grid on <main>. I’m not sure you need grid here (it may be overly complicating things). This is a fairly simple layout, so if you can’t solve the image problem then I would recommend you just get rid of the grid display completely.
Speaking of that image, I’m not sure it is clear that you can click on the image to go to a Youtube video. Because everything else on the page has some sort of transform when you hover over it with the mouse, I just assumed that the transform on the image was just another effect that didn’t mean anything. Also, links should give you an indication of where they link to (which is usually done with text). Even when I figured out that the image was a link I just assumed it opened up a bigger version of the image. The title attribute on the link didn’t help me because you have to leave the mouse stationary for a few seconds before the title shows up, which apparently I didn’t do. And I didn’t notice that the mouse cursor had changed to a pointer because the image is very busy and thus makes the mouse cursor harder to see, so I didn’t recognize the change. I guess what I’m trying to say is that I’m not sure everyone expects that image to be a link and thus a lot of people will never click on it to get to the video. I would recommend that you add a text link to the video somewhere on the page and possible do away with the link around the image. Adding a text link also makes it more accessible to people who only use their voice to navigate your page. They can then say the name of the link in order to click it. They won’t know what to say if it is just an image in the link.
If you do keep that image as a link then you’ll need to add some text to it as well that says what the link is (e.g. “Video of interview with Borislav Pekic”). Right now, someone using a screen reader will only hear “Borislav Pekic link” because the screen reader will read the alt text for the image (it will not read the title attribute) and thus they will have no idea what this links to. You do not want to change the alt text to tell the user that it is a link to a video interview. The alt text should only describe the image. Thus, you will need to add actual text inside the <a> that describes the link and then you can visually hide the text so you don’t see it on the page but screen readers will announce it.
If I wanted to get real picky here I’d suggest that you put the credit line at the very bottom in a <footer>.
Hi, @bbsmooth , thanks for the detailed comments and references, I really appreciate your effort to help me learn more. I’ve obviously got stuck in tutorial hell, but I’m trying to become better at making responsive websites. I’ll research a little bit more on my own about the layout possibilities for the last two projects. Until then, if you have time, please check out the changes I’ve made to the tribute page based on your advice (https://pensive-mcclintock-ce1a2d.netlify.app/ || GitHub - mlaksi/Tribute-Page) and how I’ve dealt with the product landing page(https://dazzling-snyder-db0dec.netlify.app/ || GitHub - mlaksi/Product-Landing-Page), which is not responsive as it should be. I can’t really figure out the position, display and overflow properties of elements, especially with nesting, compounding and inheritance, so I can’t always position elements the way I want, and sizing is also a problem from me. Since the last time I’ve discovered ems and rems thanks to Kevin Powell’s Responsive Layouts in 21 days challenge, so I’m now trying to integrate all the information into practical knowledge. Thank you for helping me out with your comments, it means a lot!
Hi @mladenka.orlic, the tribute page is looking real good. There are a few extra issues I overlooked in my previous post.
I would recommend you put a max-width on the content, specifically, the three paragraphs (most likely on the #tribute-container div). As it is now, the content will keep stretching as I make my browser wider (and I can make my browser quite wide). Many people find it difficult to read text if the line length is too long, so putting a max-width on this content will prevent that. Be sure to use em/rem units for the max-width instead of px. I think anywhere from 45 - 55 em would be appropriate.
The color of your link text at the bottom of the page does not quite have enough contrast with the background color to be accessible. There are a variety of tools you can use to check for color contrast. I like the WebAIM Contrast Checker. For this type of text you need at least a 4.5:1 contrast to be accessible.
Personal opinion ahead While technically those links are not “click here” links because the link text describes where the link is pointing to, you are still using “Click here” to introduce them. I know “click here” is still a common idiom on the web but I think it is decreasing in popularity and I personally think it is reflects poorly on the web page. I would try to rewrite those sentences so that they don’t use “click here”. I might even add a heading above them, perhaps something like ‘Additional Information’, and then put those two links in a list under the heading. The first link appears to be a fan site dedicated to Borislav Pekic, so the link text could be something like “Fan site dedicated to Borislav Pekic”. The second link could be something like “Video interview with Borislav Pekic”.
Also, since those two links open a new window (because you are using target="_blank") you will need to let people know that they open in a new window. Visually, you can add an icon to the end of the link that tells users the link opens a new window. You will also need to add actual text to the end of the link text so that people who use screen readers will hear that it opens in a new window. The text can be something like “Opens in new window” or “External link” and you can visually hide this text so it won’t appear on the page. That’s a lot of work for an external link To be honest, a lot of people will tell you not to use target="_blank" and instead allow the user to decide whether they want to open the link in a new window. I am tempted to agree with them.
You’ve still got a responsiveness problem regarding page zoom. Using Chrome, increase the zoom to 400%. On Windows/Linux you can do this by holding down the Ctrl key and scrolling the middle mouse button. Then start slowly narrowing the browser window. At some point you will see that content is being cut-off on the right and there is no way to get it back because there is no horizontal scroll bar. This is related to your use of grid on #main. Remove the grid display from that element and the content does not get cut off at large zoom. Grid display is a great tool but there are issues you have to be aware of when using it. I don’t think you need grid display for this page and thus I would get rid of it. But if you do want to keep using it then you’ll need to do more testing at various zoom levels and browser widths and fix these issues (most likely with media queries).
At narrower browser widths I would reduce the amount of side padding/margin so that the content has more room to display. Especially for the heading at the top. You can also reduce the font size on that heading a little.
While technically those links are not “click here” links because the link text describes where the link is pointing to, you are still using “Click here” to introduce them. I know “click here” is still a common idiom on the web but I think it is decreasing in popularity and I personally think it is reflects poorly on the web page. I would try to rewrite those sentences so that they don’t use “click here”. I might even add a heading above them, perhaps something like ‘Additional Information’, and then put those two links in a list under the heading. The first link appears to be a fan site dedicated to Borislav Pekic, so the link text could be something like “Fan site dedicated to Borislav Pekic”. The second link could be something like “Video interview with Borislav Pekic”.