RWD Portfolio Project

Code Feedback
1

Any feedback is appreciated!

2

Hey, I checked out your page and i loved the overall theme of the website. the blinking effect is probably my favorite haha.

Here are a few things i would suggest you take a look at. Some of which are good coding practices and others are just my personal opinion.

  1. On inspecting your code, i noticed you were using div elements for each project tile, you could use the article tag in their place because it would add semantics to your code and so that you do not have to deal with situations like this.

Screenshot from 2021-06-24 17-04-34
Screenshot from 2021-06-24 17-04-34741×246 31.5 KB

  1. The next thing i would suggest doing is to maybe change the font size of the elements with a class of “project-title”. Either that or change the opacity the element with the class of “project-description” as it looks a bit plane because of the heading and the paragraph having the same font styles.

Screenshot from 2021-06-24 17-24-24
Screenshot from 2021-06-24 17-24-241135×267 73.4 KB

I would also suggest adding a margin bottom of at least 1.5 to the “project-description” class so that the links aren’t this close to the text.

Adding a cursor: pointer to buttons and button-like elements would help your users know the links are clickable.

  1. Using em’s for setting font sizes is considered a bad coding practice as em set an element’s font-size depending on the parent element’s font size. This will lead you into a lot of problems. I think kevin powell explains it best in this video

but long story short, use rems instead of ems to set font sizes.

  1. The last thing i would suggest doing is adding a max-width to the grid container element after it hits the breakpoint because the project-tile is stretching a lot which is making the image element hard to see.

Let me know if this helped! :slight_smile:

3

Welcome back @bgbraithwaite. Your portfolio 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 the HTML editor. (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.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Have your projects open in a new tab rather than the same one
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.