Product Landing Page - My 3rd Project

Code Feedback
1

Hey all!

I’ve finally completed my product landing page after loads of trial and error, any feedback on the design and if the code looks all ok is really appreciated! I’ve tried to do some media queries so some of the page changes depending on screen size but I think I need to do more for the page to work well on mobile.

All feedback is really appreciated, thanks all!

1 Like
2

Looks like a nest design! I would

add background color change effect when mouse hovers on nav items and ‘Add to basket’ buttons.
would give more paddings vertically to each section.

Cheers :slight_smile:

3

Neat design, two problems when on mobile view:

  1. Menu is white and sometimes you hover over white on the page so you can’t see the menu.
  2. Menu overlaps with header text that perhaps is too big althought the showcase looks neat :slight_smile:
  3. ABOUT US title is on two lines

Untitled
Untitled372×665 116 KB

Can I ask, how did you choose your colors? :slight_smile:

4

Cool page, however if this was my page I would change a couple of things:

  • Why do you use firstsection, secondsection, etc. ? Instead of using about, merch, contact? This would give a lot more meaning to the code. The about you are using within firstsection could then be something like about-body or whatever makes sense.

  • Please be consistent through your code, you have firstsection, secondsection and then section3. If you decide to work with sections then at least call it “thirdsection”.

  • I noticed that one upside down green triangle is called with the class ‘trianglecenter’ and ‘triangle’ and then further down the same looking triangle is called with ‘triangle3center’ and ‘triangle3’. Why did you choose this approach? Again giving a more sensefull name like ‘triangle-green’ would also make the code easier to read.

  • Finally something personal, I would like it better if your first green triangle also had a colouredbar above it to make it consistent with the second one. However this is personal taste other people probably like it better the way it is now.

1 Like
5

Thanks! I’ll see about adding some extra effects to the buttons to help finish them off.

6

Yeah, I realise I need to do some extra things to make the navbar work with mobile and add some media queries to change some font sizes.

I’ve been watching lots of tutorials on youtube by a guy called ‘Kevin Powell’ which is why I did the ‘about’ section with the floating green box. I had a look at some other colours when making this website but ending up sticking with the green.

I’m going to try another landing page but create the template in Photoshop first so I’m not designing the layout as a code.

1 Like
7

Thanks for the feedback!

I think I went initally with naming first, second, third section etc as I was sort of designing the page as I was coding. I will definitely be looking at going with your suggestion for using about-body etc, should help me keep track of what each div section does. For my next page I’m going to look at creating the design in Photoshop first, which should hopefully help me with the naming of the different DIVs.

I think I ended up having triangle1 and triangle2 due to the different colours and slight position differences. I think I still need to get my head around the fact I can use the same code across multiple DIVs rather than having duplicates.I also need to start making use of IDs I think, but i seem to automatically go straight to using classes.

Thanks again! I will definitely have some more playing about with the page before I can it complete.

8

I see. I’m in the same phase as you I think. That moment where you realize the design phase is key to not making ugly projects. This is why I want to be frontend+web designer :).

9

Yeah, watching the video below really helped me understand how people go from the design of a website to the final product. I’m looking forward to do the same on my next web page.

1 Like