here is the link to the project:
click on the items in the picture.
Pretty cool! Nice approach to a new design 
As much as I like it, I still think itās better not to have horizontal scroll. Itās more intuitive to fit everything in a single view.
Try using different colors for product descriptions. They blend too well with the background itās difficult to read the text.
Try making background color changes more subtle on the form so itās easier on eyes.
Good luck 
2 Likes
Iām not trying to be harsh, Iām trying to be constructive.
This was hard for me to read. Most languages read left to right, top to bottom. With your design the first thing I see is choice 2 in the upper right most part of your page (and it flows off the page no matter if my browser is full width), then the flow goes down and in the bottom left I see choice 1 then in the bottom right I see choice 3. If the browser width is smaller it all kinda falls apart.
In your header you literally use hypens and the greater than sign to simulate an arrow. You should be using the HTML entity → that displays as ā (You can use Google to find the entities and codes. I just showed the HTML code here but you can use hex code or HTML entity code, whichever youāre more comfortable with)
A nit, on your checkout forms the changing background is disruptive. At first I thought the page was reloading so I hesitated. Just because you can do something doesnāt mean you need to.
okay, thanks. Iāll try to fix that
Okay, I will try to fix the view
I tried to fix it. hope you are satisfied.
fixed the view and fixed the background changes. 
Work on getting some inspiration and try to make it look as PRO as possible ^_^!
1 Like
A GOOD AMOUNT OF NICE LANDING PAGES 2019 
P.S: Fix the mobile view too gl and happy coding!
well, it isnāt supposed to be on a phoneā¦
Yes it is. Websites are ALWAYS supposed to be responsive to mobile, tablet, laptop and desktop viewport sizes. It is responsive web design. It is an important part of a front end web developperās job ^^!
Take any PRO website and shrink the window down or view it on mobile and it should be looking as good on a mobile as on a desktop.
Keep coding!
- Tech
The course name is āResponsive Web Designā. That means you use HTML and CSS to automatically add, hide, add, shrink a website so it looks good on all devices. All devices meaning desktop, tablet or phone so I would have mentioned the same thing.
There are still issues with your page.
If you put the script back in and run it youāll see that you are passing only one of the sixteen user stories.
Run the HTML Analyzer for your page. The alt attribute is required for images.
On the form that you wrote for checkout, again, run the HTML Analyzer. You have lot of attributes that are not valid.
Also run the CSS analyzer for the forms. You have a misspelling that takes away from your intended design. You also have an empty block.
When I view it on my laptop thereās a huge āGame/Coding Equipment For Saleā banner and itās too big for my browser so thereās a scrollbar on the bottom. If I slide that scrollbar, the background picture you have isnāt as big as the banner so thereās a huge amount of white space on the right.
2 Likes
Hello @ConnerOw1115, it looks like you have plenty of feedback to work with so Iāll just leave a bit of advice.
I can see the vision that you are going for, and itās quite inspired! Most landing pages that are posted here do not break the mold very far beyond the example page. There is something to be said for the vision you see and the progress you have made to dive head-first into this design. I was happy to see that most of the feedback in this thread does not have to do with your design vision, as I feel that you should be proud of the vision you are building towards here.
That being said, I would like to summarize some points being made in this thread in the hopes that they can help to narrow your focus on what to improve. I see a lot of specific suggestions being made, and I worry that you will start to feel like you are drowning if you try to keep up with all of them. Itās also easy to see a large amount of feedback as being a negative thing, and I hope to alleviate that feeling as well. This community is a fantastic source of help while learning! I earnestly believe that there is no better group of people to learn from (especially for free). If you are feeling overwhelmed, trust me when I say that this amount of feedback is a good thing.
With all of that being said, letās focus down on a few points that I think will help you the most here:
- Take a few, or a hundred, steps back to look at the start of your project. Your page essentially boils down to a header, a background image, and three clickable ācardsā for purchasing items. (These cards have an image, price, and text.) That sounds pretty manageable! Take your time with each of these elements and design them from the ground up in a way that is simple and clean.
- Example: I want my header to be the full width of the page and have centered text. It should stand out and be easy to read.
- Focus on a clean and simple design first, then add more. It looks like you are rushing through elements as you create them to get to the next part of the site, or perhaps jumping between several elements and editing them all simultaneously, never quite getting to 100% on any of them.
- Example: Before you start decorating an element, such as your header, focus on getting your content and alignment correct. Once your header is the width of the page, the text is centered, and the height, margins, padding, etc. are good, then add more. Worry about decorations such as colors, borders, curves, after you have a functioning layout. Get the basics down first, and the rest will be much less complicated.
- Take a look at other examples. Coding, design, and just about any other industry all benefit from building on what others have done before. While breaking the mold can be innovating, it is important to understand why the mold exists to begin with. Check out Amazon, Meijer, Walmart, or any other merchant with product pages to see what information they include and how it is formatted. Everything should be clean, easy to read, and intuitive to users.
- Example: Your product ācardsā stand out, but contain odd layouts and information. Itās intuitive for a user to see a product picture, name, price, and possibly a description. What does the number 1, 2, or 3 mean to a user here? The background contains a large portion of empty space that could be removed, or filled with additional information. Is the text easy to read on this background, and is it large enough?
1 Like
well, actually, I am only thirteen and my mom wonāt let me have a phone yetā¦ so I can fix the view 
Okay, thanks for your feedback. I will try as much as I can to improve the project and follow you instructions step-by-step.
okay, i will try to use width and height to scale the canvas instead of āpxā
I fixed the empty block
You donāt need a phone, you can just size down your browser window OR (BETTER) use dev tools of your browser =D
For Firefox (example search for whatever browser you want/have): https://www.youtube.com/watch?v=qGI27bpCZK4
Happy coding, no excuses just solutions!
Keep up the good work,
- Tech
- The font is not being displayed like it is in the picture because there is no fallback font.
font-family: Phosphate, Arial, sans-serif; - The products should stack on top of each other in mobile view. When I shrunk the width the products stayed where they are and shrunk too much and the text was unreadable. Try to set a min-width.
- I hovered on one image and it stayed in the hover state even when the mouse left the image.
1 Like