I finished the Product Landing Page project, and I’d love to get some feedback from you guys. What do you think could be improved? Here’s the link to the project in Codepen: https://codepen.io/katiebug72/pen/WKBwKm
One thing I couldn’t get to work, was getting the header (the black box with the main headings) to stay in place instead of expanding in hight when the hamburger menu is clicked. If you have any specific advice on this issue, that would be really helpful too.
Hi rubemalmeida, I ran the tests, and the two things not passing are the fixed nav bar and an image within the header. I had decided not to include these when I designed the page. I know it’s important from a learning perspective, but I do already know how to fix a nav bar and include an image, so I didn’t think it was important for this particular project. I appreciate you checking it out!
Why did you do a manual reset of all the tags instead of using the * (all) selector?
Also, I wouldn’t put that much padding around the splash section, especially the top. Before the image loads, it’s confusing which is the main focus.
Third, as an extra: I don’t know if you know Javascript (I saw your responsive menu but I couldn’t find the function). If you do, try making the each pricing card pop out on :hover, instead of just the middle one all the time.
I had watched a tutorial a few weeks ago, and the instructor always did the manual reset. I just used her method, but maybe the * would be better. I’ll try that next time and see how it works out to cut down on the css used.
I wasn’t super sure about the padding. It does decrease as the window width decreases, but I can see how it could still be a bit much. I’ll decrease the padding a bit.
I don’t know JavaScript at all haha. I feel like what I have is the duct tape version of code for the menu bar. I put the function in the settings where Codepen says to put the info. It adds a class to the nav bar when it’s clicked so I could add styles for that class. I love your idea though . I’m sure I’ll go back and update my project with things like that once I learn JavaScript.
A really clean, modern design - good work! I like the colours you’ve used and the basic / pro / business section is super fancy - no idea how you did that!
If i were you, i’d be tempted to have main section flush with the top of the viewport so the nav bar is right at the top. Also, perhaps your footer is a little bit spaced out - it could be more compact (less padding between the different elements.
Looks awesome and really professional! You definitely spent some time where it matters. Two small things that can help text stand out where you want it too on your header elements I have run across working with designers. That’s the only way I would have found this is, to up the font weight a bit and add letter spacing. That will make those elements at the top of the page jump out a bit more. Totally a minor thing though.
Its completely a stunning website from a starter front-end developer like me. You have done a great amount of work for it.
Except for the a-tag font-color which is red and font-weight: 300. I changed to color: white and font-weight:800. It fixes the thing. I tried using chrome developer tools. It looks great. You can also try it.
Hi paul_dee, I really appreciate your comments about the padding. I removed a bit from the footer and removed it completely from the top of the page. It makes it much easier to focus on the main part of the page. Thanks so much for your input!
Hi jbull328. I love that you pointed that out. I added a couple of px to my h2 and h3 headings and it does make them stand out much more. I’m sure I’ll be using your tip in most of my projects now . Thanks!
@prashant-rajoriya Glad you like it! I see what you mean about the visibility of the links. I upped the font weights for the links and the text above my email input, and it does really help! Thanks!
Hey it looks great made me feel a bit ashamed of my own project but thats good cause now I know what I need to improve and have higher standards of myself !!
I’ll say it again it looks amazing great job.
Honestly ignore the tests, its a dumb feature. 11 of the user stories are about class names and id names just so you can work with the testing. Its annoying and a as long as the webpage looks nice, no matter how far off from the tests you are it really doesn’t matter . I would buy your product no matter the class names that i couldn’t see.
Hello Katiem, I love project for you. But I don’t understand some example as @media screen you word or is you copy .It do that reponsive for mobile ?. Help me.
Hi @asmarino, I don’t have any background in CS. I’ve just been teaching myself, mostly with FreeCodeCamp, reading the HTML and CSS book by jon duckett, and supplementing with courses from Lynda.com (I get it through my library for free!). I usually use the FCC projects as more of a framework so that I can give myself a bit more creative space. I build it in Adobe XD first then try my best to make it happen with HTML and CSS. Building what I want in XD first really pushes me to challenge myself with coding. I just have to Google a million things haha. Best of luck on your learning journey!
@michaelnicol Thanks so much! Glad you liked it. I agree, the tests are only helpful as long as they help you learn, but past that you have to make your own judgement calls.
Hi there @trieu0479, I use the “@media screen and…” because, from my understanding, it means if the media type is a “screen” and the "(min/max-width is…) then do whatever your CSS declaration says. I hope that was clear, but you should check out this article. It might help: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp. Also, I was given the advice to follow more structured breakpoints instead of just using them wherever I need them, and I would definitely do that on future projects. You can see on bootstrap’s that they have more specific breakpoints for screen sizes. Good luck!
@kundankumar26 Thanks for your feedback! I appreciate you taking a look. I can see how those things would help enhance the information on the page, so the user isn’t distracted by aesthetics. Happy coding!
. I’m sure I’ll go back and update my project with things like that once I learn JavaScript.