Here is my Landing Page.
Some feedback would be nice. Besides I think I use media queries a lot, is this normal or it’s bad practice?
Help please 
Thanks in advance
3 Likes
Nice job!
In regards to your question about media queries (I’m no expert, mind you) but I would think less media queries may be better. I think designing mobile first with a smaller window makes it easier to then adjust to larger devices, thus using less media queries.
-
On your form, it would be nice if there was a change in cursor for the “Get Started” button so it feels like a clickable link, for example,
cursor: pointer. -
When your width goes lower than 749px, “Get your website with Web Ink.” vanishes. Was that intended?
-
Also, the main image disappears at a pretty large width leaving a large gap to the right. Makes things a little unbalanced. I’d consider keeping it until much smaller sizes or adjusting it’s position.
Solid start!
1 Like
If you think you used media queries too much try to use flexbox. check it out in my helpful tools list i made (along with other things.
Your main should be 100% of the width on smaller screens.
Otherwise its great.
Notes
Please hit the reply button or I do not get notified.
Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites
1 Like
Thank you @Modu for your feedback.
I think designing mobile first with a smaller window makes it easier to then adjust to larger devices, thus using less media queries.
This is a nice suggestion, actually I rewrote the CSS code again and tried to do so. It was easier yes, thank you 
When your width goes lower than 749px, “Get your website with Web Ink.” vanishes. Was that intended?
In regards to this I checked it again but it doesn’t vanish, Idk why it vanished when you tried it. feel free to try it again
Also, the main image disappears at a pretty large width leaving a large gap to the right. Makes things a little unbalanced. I’d consider keeping it until much smaller sizes or adjusting it’s position.
I removed the image totally and then replaced it with another image but this time as a background to the main element
On your form, it would be nice if there was a change in cursor for the “Get Started” button so it feels like a clickable link, for example,
cursor: pointer.
Thank you for this too, I already did it and did also some CSS :hover effects, you can check them ,if you could, and tell me your feedback
Thank you again for you again for your feedback, I really appreciate it.
@michaelnicol thank you for your feedback, I do really appreciate it too.
First time I wrote the styling code, I was trying to do the styling without using much flexbox or CSS Grid.
But I think you’re right I should’ve used flexbox from the start, I used it now. It would be nice if you check it and tell me your feedback.
I thought it had some beauty to have mix of colors, but you’re right I changed it and added colors in other elements.
also thanks for the links they are really helpful
1 Like
Try variation between sections.
Maybe add a background image for your sign up section with a background-attachment: fixed style.
Try changing colors. For instance, your video section could have a change in background color (like you did with your footer section).
1 Like
@michaelnicol,
I added some background color to features section which is the middle section so making variation between the other sections.
thanks
1 Like
I added font awesome to my tools, i would suggest check it out. Its great for simple and easy icons (controlled the same way text is with font-size).
Just make sure you look up how to import it (front end library)
1 Like
yeah I found them, thanks
I don’t really know what media is (other than music, of course), sorry.
media queries are used for testing viewport sizes
My pleasure! Just checked out the changes you made, huge improvement! Well done!
1 Like