Feedback for Product Page

Project Feedback
#1

https://codepen.io/AMKren/pen/abBzZoM?editors=1000

Here is the link to my Product Landing Page!

To preface this, I did (sort of) follow along with Florin Pop’s video on his YouTube channel in order to get a clear sense of good design. I will admit that the design is very very similar, but I’m not sure if the code is.

What I did was skip to the parts of his video where he was editing the look of the page, and tried to recreate it. There were a few things I could not figure out, like the links to the little images in the info boxes, but other than that, I think it is pretty similar in style, although his is undoubtedly better haha!

Thanks!

#2

Hi!

Not bad! I like the green theme and bright colours.
Feels very welcoming and light.

If you want to continue designing this page you could try and use some different font-families and maybe style a custom button for the sign up form.

1 Like
#3

Your page looks okay @amkren. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

My thoughts,
You’ll get more out of the RWD course if you don’t rely on watching someone’s video or looking at FCC’s sample projects. The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges. The hardest part of coding is looking at a problem and coming up with a plan to solve that problem. Starting out by looking at someone else’s code completely bypasses that step.
I don’t know how much you relied on the video, only you can answer that honestly.
This is your first time posting. How’d you do with the other FCC projects?

On a side note, since you’re asking for feedback I’m going to move this to a more appropriate forum, Project Feedback, where it will get more eyes-on.

2 Likes
#4

I more or less saw using his video as research. I would not personally say it was a direct copy. I used some of his styling tips, and I still had to research how certain things worked like media queries, viewports, meta elements, and even how to get the navbar to stick with you as you scrolled.

For the most part I used it as a template, along with other product pages that I searched for on Google. It was for inspiration, for the most part. I needed ideas of how to make it look good, and not just function properly to pass the test.

I will admit that my tribute page looks absolutely terrible compared to this, but that is mostly due to the facts that it was one of my first times using CSS, also it was months ago.

https://codepen.io/AMKren/pen/XWKJQZe
I have since taken courses in college, and gone back through some of the material here on FCC.

Having said all of this, the survey form looks about on par with my product landing page.

https://codepen.io/AMKren/pen/ExNxgPZ

That one was mostly done alone, although I watched some YouTube videos on CSS styling tips. Another form of research, I saw it as.

Ultimately the plan is to go back and apply everything I have learned to each and every project in the RWD certificate once I have finished the final project. By that time, I would expect that I will be fairly good with HTML and CSS and be able to make the most out of each project!

Thanks for the feedback!