Tribute to CL4P-TP / Feedback

Code Feedback
1

Tribute Page

I tried to keep this project simple and to the point. I focused on a layout and color scheme that best represented the source material. I attempted to format the layout so that it could be viewed on multiple devices and browsers - regardless of the screen size.

I have absolutely no coding experience aside of some courses on codecademy which I completed 3 years ago. My wife and I will be moving in about a year and half and I am using this time period (a couple hours a night) to shift from IT to some form of coding as a career. Please be kind and give me some pointers and critiques.

2

It looks great, you have web design chops.
Looking at the code:

  • The formatting of the text gets to be be too narrow when you start to get the window width under 700px or so. You can use media queries to change the css when the screen size gets narrower.
  • For the HTML page, CodePen has a drop down menu on the top right that has “tidy HTML” that you should use so that your html is more readable. You can tidy up your CSS and JavaScript with that as well.
  • You can make your CSS a lot more DRY (Don’t repeat yourself). Instead of using id attributes, use the class attribute. Avoid using id attributes unless you have to. You can give your divs more than one class name. Give all your text divs a class name of “boxed”, and put all the shared css under that selector. If you want to give each div it’s own css, add another class name like “boxed–1” and add only the css that it doesn’t share with other “boxed” divs.
3

Thank you for the info.

After I have completed the portfolio project, I will go back and update this one with those corrections.

4

@elisecode247

I quickly got the changes in. I know I could shorten the @media part of CSS but I was trying to get it down at a lunch break. It should be working at less than 700px screen width.

I have also cleaned up the HTML and CSS/

I switched from ID to class on areas where it was applicable and have created multiple classes for the objects that required their own CSS. With the exception of the @media I have shortened things down by a few lines at least.

Thank you again for the pointers. Between these and another user suggestion on the original background being unfriendly for people who are colorblind, I have a few things to keep an eye out for on future projects.