Feedback: My Responsive Design Projects

Hi guys! I decided to give this all a try about 4 weeks ago with no prior experience, so be gentle please! Im finishing up my last project for responsive design and I wanted some feedback on my projects so far. One thing, in particular, I’m concerned about is whether or not their code is too similar to the examples provided. I made sure that my code was typed with my own fingers and tried as hard as I could to change up the style of what I was referencing. I spent a long time studying the examples (and others) while taking pen-and-paper notes to apply what I saw in these projects, so while I’m not surprised that their format looks similar I definitely do not want to be engaging in any sort of plagiarism.

I’m lucky enough to know plenty of web devs, who all reassured me that referencing examples is completely normal, but I’m hoping you guys can maybe back that up, or if not provide some direction as to how I might ensure that it is “my own.” Design has never been my strong suit to say the least, but I’ve been working really hard on these and just want to make sure I’m doing things right.

Any other feedback is also welcome, and I’ll provide 2 codepen links below (unfortunately that’s the limit, I’d prefer to share them all though the portfolio page will link to the rest.) Thank you!

Portfolio -

Product Landing -

The portfolio is still work in progress, the other 4 are for the most part “finished” outside of any other revisions I come up with based off feedback. Thanks for taking the time!

Hey Jake,

nice to meet you! :wave:

Congrats on your projects, great job so far! :clap:

So this is about the Product Page:

My ideas:

  • all tests pass, awesome!

  • you can move the head content (the link) into Settings > HTML > Stuff for <head>

  • HTML validation and CSS validation show no errors! :clap:

  • you can increase the readability of your code by:

    1. clicking on the small arrow on the right side of the code box and
    2. clicking Format HTML/CSS
  • you can increase the overall readability of your page by adding some more consistency; you can read more about it in principles of design

  • on my wide screen, the header section is huge (without valuable content):

  • when I decrease the width of my browser, the content gets cut off; a horizontal scrollbar is mostly something you want to avoid; this is important for people who read your page on a smartphone:

Our brain has different learning modes. There is a difference between “being able to understand stuff” and “being able to write stuff from scratch”. That’s why I think it’s a good idea to start from an empty sheet and tinker around. If you are stuck, have a small glance at an example. But just for this small part. Try to understand every line of code of this part. Then go back and build the next part from scratch. You will make slower visible progress, because you train the “being able to write stuff from scratch” skill. But exponential growth will set in. Especially when there won’t be examples anymore.

Looking forward to seeing your next steps. :slightly_smiling_face:

Awesome, thank you very much for all the feedback! Thankfully as time as gone on and the more of these projects that I’ve done, the need to reference has gone down considerably. The second thing I attempted to code was just a random home page made with flex with no real references and it was certainly to most learning experience I got out of one project, so I see what you mean.

All be taking a look at everything you listed and seeing what I can fix, thank you again!!