Hello,
I am getting my third project finalized and am excited to get it posted. All tests pass and I have found no validation errors in my code. I took a mobile first approach when writing my media queries, everything appears to being working as expected.
Any feedback would be greatly appreciated.
Thank you,
Kenneth
Nice looking page @Kennyc33. Good job!
Your contact form looks very beautiful. I like how it matches your header colors,
Responsive Design:
mobile:
Make a hamburger menu, or a way smaller height and disable sticky. Logo should be the same height as the title “Kenny’s Car…”
Improve pricing section by adding spacing between each card. Maybe make the width a bit smaller. Add margin… etc.
Last but not least, maybe pick a nice photo from Unsplash or another free service with high quality pics.
Other than that, really great job!
Hi @Kennyc33,
Well done on passing all them tests! Overall - good job.
Before I give all my advice could I ask whether you’re interested in development advice, design advice or just about any kind of advice?
G.
Hello G,
I realize that there is a difference between advice and opinion, but I also know that I only have my own perspective to see things from and that can lead to a very narrow point of view.
So, to answer to answer your question, any advice that is constructive is appreciated.
Thank you,
Kenneth
Understood!
General comment: all my advice is visual as I think you are an excellent coder already. Can’t wait to see your future projects!
In desktop-view your navigation is not centred vertically.
In mobile-view your pricing-items have no margin in the bottom. They sort of ‘stick’ together. Adjusting your code by 1 line fixes this:
#card_grid {
grid-template-columns: 1fr 1fr;
justify-items: center;
//Lets add a grid-gap :) , 1 or 2 rem should do the trick.
gap: 1rem;
}
That’s the nice thing with grid, you don’t need to rely on margins as much. You can use a grid-specific property. I haven’t tried it yet but I think it works or will work with FlexBox too.
SUPER WELL DONE [and thank you] on naming your HTML elements. It was a pleasure understanding what was what in seconds, I’d say you’re more strict than myself at times. Learned a thing or 2 from you 
Small tip: try adding this to your HTML and tell me if you prefer how it looks. I’m originally a veeeery visually-orientated person so a clean font is beautiful vs the stock font serif fonts in browsers .
html {
//Add a font! I think Chrome already has this inbuilt so no need to link anything. Or perhaps it's codepen that has the font, I've no clue.
font-family: 'Roboto', sans-serif;
}
So I think a good idea, unless it is not your cup of tea, would be to go over some UI principles. How can you communicate everything better visually? I found that question fascinating around 7 years ago so I went in that direction first.
I can’t draw to save my life so I always attempt making extremely minimal designs like I did with my product landing page.
Hello borispov,
Thank you for the feedback. I went ahead and reworked the position property for the header to ‘fixed’ as you suggested. The logo for this site is actually a single PNG file that I created at Namecheap.com/logo-maker. I am currently working on learning how to create a hamburger menu for future projects but think I will leave the navigation as-is for now. There is now 1rem of grid gap between each card, I agree this did need some work. I also looked into Pixabay.com and found and have added a nice photo of some car wash brushes to this site.
All in all, this was great feedback. I appreciate you helping me to improve this project.
Kenneth
Hello Grizhlie,
This is great, thank you for all of the detailed information on how to improve this project. I have corrected the desktop-view navigation, it is now centered vertically as you suggested. I took the grid-gap property one step further and have used the following code to allow the web browser to adjust the number of columns for the pricing cards based on the space available. I also have added 1rem of grid-row-gap to keep the cards from sticking together.
Also, I really like the Roboto font and have added this to my CSS. Just to be safe I went ahead and placed the appropriate embed link from fonts.google.com/specimen/Roboto to the Head section of my HTML.
I will definitely be looking into some further training on UI design. This is an area that I struggle with also as I am not much of an artist either. I rely heavily on using similar commercial websites in order to get a vision of how I want a particular website to look. This is helpful, but it would be really nice to be able to sketch out a framework by hand prior to writing any code.
Thank you again for helping me to improve the design aspects of this site. Looking at your example of this same project has given me a lot to research and look forward to.
Kenneth
Great use of the repeat function! Yeah, Robot is a good ‘safe’ font. I often use it in a pinch.
Also, being a person that is not naturally artistic is not necessirely a weakness. Graphic design, UI, it all falls down to principles [systems]. And copying whilst reworking the original into something more your own is never a bad thing, after all - true originality is almost impossible in these things.
Hell, even the bullet train in japan is modelled after a kingfisher bird (biomimicry). Everything that has already been created that works should be used + transformed slightly. I think so anyway . And if you learn the systems you can always improve upon designs you take inspiration from. Merging them together etc.
After a while you get at least 1 skill: you will know when something doesn’t look right and can be improved. This is the main skill that propels my learning of the visual persuasion.
Good luck!