@kkulekSubmitted about 2 years ago
It feels so good - just finished another project and I'm very happy about almost every detail. Any constructive feedback will be much appreciated :).
✌
Kulek
@kkulekAll comments
- @kkulekPosted about 2 years ago
I see missing letter-spacing in small headline.
Need to fix that :)
0 - @sherySJSubmitted about 2 years ago
Spend like a whole day figuring out everything on my own without relying on any solutions, I feel like I have made many logical mistakes and mostly a bad flow with my CSS, if anyone thinks my CSS is bad or there are pain-points. Please do let me know. Open to critiquing, Feedback is welcomed!
@kkulekPosted about 2 years agoHey @sherySJ! For a first project it's much better than you think
You've positioned a body using flex-box - thats great! And in the card you used paddings/margins to position the content.
If you would like to optimize your next project, you can position elements with a flexbox not only in the body.
This method you can faster optimize bigger projects for different screen sizes. As an example of similar project you can look at this: https://kkulek.github.io/simple-nft-preview-card-component/
Every container can be positioned using flex-box / grid. For the bigger projects (like landing pages) this is a better way and you benefit if train that.
Another thing to take into consideration is your CSS namings. Take a look at BEM methodology (or other).
It not only help you organize CSS but also set a good funtation for SASS. This YT material may help: https://www.youtube.com/watch?v=SLjHSVwXYq4
Good luck and great delivery!
Marked as helpful1 - @andredominSubmitted about 2 years ago
How could I avoid putting negative values in the margins and so many media-queries? Thank you in advance!
@kkulekPosted about 2 years ago@andredomin: idk what happened with the formatting, but I hope that comment help you a bit.
As a suplement I'm reposting part of my other comment. I believe it could realy help you (it improved my understanding of basic concept within a 1-2 days).
PS. I've started 6 days ago here... this materials and focus on the fundamentals (i hope!) could help you improve fast :)
Repost: Maybe these 4-videos series would be good fit for you: https://www.youtube.com/watch?v=h3bTwCqX4ns
Kevin is doing a challenge from the frontendmentor.
Key takeaways: Setting a good :root (especially fonts and theirs corelation across resolutions) will save tons of a time - without that I was creating hudge mess in the CSS while working on @media queries.
Pixels aren't best idea when you want to work on the responsive project. Relatives are just better fit (here is few minutes about that topic: https://www.youtube.com/watch?v=_-aDOAMmDHI)
It's an obvious thing now, but wasn't before for me. Work on the project from the ground up: from the smallest resolution and add @media queries when needed.
Plan whole project in advance (all the boxes/containers, relation between resolutions etc.). 10-20 minutes on that saved me 1-3 hours on the other project, and I think it's a great practice even on small projects, to just be prepared for the bigger ones.
BEM (naming structure for the CSS): I'm still learning that (and making my mistakes), but use this or similar methodology to train and organize your CSS.
Good luck :)
Marked as helpful3 - @andredominSubmitted about 2 years ago
How could I avoid putting negative values in the margins and so many media-queries? Thank you in advance!
@kkulekPosted about 2 years ago@andredomin congrats on delivering your first project here!!
Great start and if you would like to finish next project better try:
- Review materials on box-model
You're have such a pain with margins/paddings etc., because your component doesn't have a proper fundamentals.
Try to focus on: a) set a body on 100vh (100 viewport height = 100% of screen height, no matter if mobile or desktop)
and display elements inside of a body as flex: display: flex; flex-direction: column; (in this case no matter what you set - you'll have 1 container in the body) align-items: center; justify-content: center;
now you have fundations for the your component (it will be in the perfect center)
b) create container with proper width and height (invicible box for rest of a content) f.e.:
<div class=container> -> here will be all the content: img, headline, copy etc. </div>display content in this container with proper values, for example: display: flex; flex-direction: column; (this is important in your case: every item will be below previous) align-items: flex-start; justify-content: space-around (you'll have almost everything done in your "invincible box")
c) You can add a small padding for the copy if you want a pixel perfect delivery. And you're a one step closer to deliver next project a bit better :)
- Create components/webistes from the ground up. start with mobile and just add in bigger resolutions (@media) changes.
This way you avoid situation that a @media query for smaller resolution overrites many lines of code.
You can check code for this component of mine: site: https://kkulek.github.io/simple-nft-preview-card-component/ code: https://github.com/kkulek/simple-nft-preview-card-component
Maybe this will help you a bit.
PS. If you review informations about box model and basic flex, you start setting up projects with proper fundamentals - with them you will not have to hustle so much with margins ;)
Marked as helpful4 - @kkulekSubmitted about 2 years ago
I have a trouble with adding to my code responsive background for the desktop. I've tried a few things, but just can't position it well.
Little help would be much appreciated. Thanks!
@kkulekPosted about 2 years agoHey r2, thanks for the feedback.
You're right - background-image in the <body> wasn't great idea.
I tried your suggestion but didn't quite understand what you meant.
I just added <main> tag in HTML and in style.css changed body to main (to transfer all styles into a proper tag: <main>).
Now the background-image is responsive and I'm happy with this challenge.
Sure, I could work on this more, but at the beginning of my training, I think it is better to work on the next challenge.
Peace!
0
