Landing Page: Please rate out of 10

Blockquote

https://codepen.io/cogentmedia99/full/NWdgLwK

3/10

Things i find good:

  • color scheme
  • font types
  • nice hamburger menu

Things I find bad:

  • fonts too big; that may be only my opinion, but taking the whole screenspace just to read two words is a waste
  • code is not clean; error in html went unnoticed
  • top navigation bar is empty, why is it there?
  • buttons under the product cards are aligned horribly; I am serious, they are not aligned to either side and not centered (very minor detail, right)
  • hamburger menu is on the left - menu shows on the right; why?
  • that sliding menu responsiveness - try to resize your screen and look
  • footer element - border radius, alignment of elements, placeholder text - many things to improve both on landscape and portrait screens
  • video frame is not aligned properly on portrait screens
  • CSS is long… 500 LOC is too long for me

Do not be discouraged. My initial rate was 5/10, but as I looked more I found more things and… you know.

This page can look very good if you reposition some elements, and polish some rough edges. It can be 10/10 after some work.

Even if you will not do it (time is precious), remember about those things.

edit
Take my rating with a big grain of salt, I am hard on myself too.

1 Like
  1. the reason, for the headings to have such large fonts is to fill up the space, I am not on the creative side so it’s hard to know what should fill that space up instead. I was told the same thing about the fonts being to big, but what else can I put there?

2)I did notice the error in html, there are 3 of them, that return like 30k errors, not really sure why, that is, so have no way of solving it’s something to do with width-device and initial-scale 1 this code was copied from my very first project and was learnt from this https://youtu.be/PlxWf493en4?t=521

  1. top nav bar shouldn’t be empty, below a certain width it collapses into the hamburger menu, my screen width is 2560x1440, so it fully expands at screen widths greater than 2100px or something like that, I could change the nav to be on the screen longer, with a media query, at what screen width do you want me to switch to the hamburger menu?

  2. i’ve tried aligning the buttons under the products, and centered them as best as I could not sure why they didn’t take

margin-right:auto;
margin-left:auto;
or even
margin:  1em auto 1em;
type or paste code here
  1. the reason for the menu showing up on the right, is because if I were to float the menu to the left it would obscure the button itself, I could change the z-index to make it show up on top, but didn’t think it would be impossible to see due to me also changing the color form white to black.

  2. yeah I noticed that the menu opens up briefly and closes, I am just not sure what is causing it haha. so there is no way for me to be able to fix it. I have a feeling it’s because the nav is displaying briefly , but if I do display: none; it would break the nav/hamburger menu and nothing would show up.

  3. yeah I need to work on the layout of my website since I don’t really understand how to make it look elegant, don’t really know all the design principles.

  4. yeah it was hard to align the video element it still isn’t centered on the smallest screen, because margin auto refuses to work,

  5. I do agree that the css, is fairly long, the reason it’s long is because I have multiple media queries which have mainly the same attributes through out causing the css to be long.

nah it’s all good your rating was totally fine, I am fairly happy with the result since I literally can’t don’t know what is causing conflictions in my code,

I’ve started coding html and css like 1-2 weeks ago, and I wrote spaghettis code, and it has a lot of conflictions that it’s hard to fix.

there wasn’t really a design process of where each item needed to go since I decided to do my own take instead of just coping the assignment, if he have suggestions for some rules I should follow when placing elements I am all ears, because I’ve applied basically every rule I learnt in this project from, making animations, to a fixed background, to gradients to animations to media quarries, transitions, and so on.

I guess to some it up, I included everything, but at a beginner level, the reason colors are kind of well done since it’s my 3rd project and I guess I have some understanding on how to make a color scheme now,

I will definitely keep in mind your suggestions, if you have suggestions how I can make a more attractive layout please inform me, since when I make the layouts it’s responsive but it isn’t put together in way where I can have enough positive space and negative space.

Just keep on learning.
For a few weeks of html this is good result.

I design for myself.
I look at a page and think “If someone else made this, would I say it is good?”
There are a lot of better designers than me, so my best advice is to follow them/read their code. I am only a journeyman.

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