Waiting for your comments
Chriscent Pingol
@KishonShrillAll comments
- @0xmaxx1Submitted 11 months ago@KishonShrillPosted 11 months ago
Clean your CSS class pointers
In your css code, I believe
.container .foot h4 span .oth{}
is just the same as.oth{}
and.container .foot h4{}
is same as.foot h4{}
Doing so will make it less more confusing and more readable code when working in your css. Let me give you another quick example:
Let use this HTML Code as an example...
<div class="container"> <div class="img-c"> <div class="image"> <img class="fir" src="./images/image-equilibrium.jpg" alt=""> </div> <div class="overlay"> <img class="sec" src="./images/icon-view.svg" alt=""> </div> </div> </div>
- Instead of pointing like this
.container .img-c .overlay .sec{}
you can just shorten it like this.sec
- and instead of
.container .img-c:hover .overlay { opacity: 1; }
you can also shorten it into.img-c:hover .overlay{ opacity: 1; }
.
Use HTML semantic code
There are many semantic code you can use, some of these code include:
- <article>
- <aside>
- <footer>
- <header>
- <main>
- <nav>
- <section>
In your case, instead of using another div as a container like what you did here ๐
<main> <div class="container"> <p></p> </div> </main>
You can clean it more by making the <main> as your container instead...
<main> <p></p> </main>
And whatever was your styles of [container], just point and change it to the <main> element instead which would be something like this...
main { width: 324px; padding: 20px; background-color: var(--card-back); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; }
Overall Feedback and Summary
All in all, your frontend is okay and great ๐ฅณ๐๐๐ and that is all that matters, but soon you will be working with other people too soo having readable code really is a 1++. So all you need to work on is:
- Clean CSS class pointers
- Use HTML semantic code if possible
This is a great start so far ๐ and I hope you enjoy your road of frontend programming ๐
0 - Instead of pointing like this
- @guihenriquedevSubmitted 12 months ago
The thing that i found difficult is to make a responsive website. I don't make responsive website so good yet, but I think this project helps me a lot, to make a good responsive site. I am unsure of my css code, however I'm practicing a lot. How do you guys make your site responsive ?
@KishonShrillPosted 12 months agoHello there ๐๐ I can't help notice about the fact that your component is overflowing vertically ๐ฅฒ๐ฅน, let me help you in that aspect:
1.) To fix your overflow, don't forget to add your width and height
body { width: 100%; height: 100vh; // or 100% // Other components } main { width: 100%; height: 100vh; // or 100% // Other components }
2.) I have noticed that your usage of flexbox has also contributed on the overflow, although I am not particularly an expert of flexbox but using
flex-direction: column
instead offlex-flow: column wrap
should be enough. ๐ฒ "Wrap" happens when the element inside is much bigger than the container, since your <p> is bigger that the container without a "width" then it would result into an overflow. Instead, use 100% on the <p> element so it will only have a width that's as big as the container can contain:main { width: 100%; height: 100vh; // or 100% display: flex; flex-direction: column; // Other components } main p { width: 100%; // Other components }
3.) Last, since the texts in the design needs to be centered, use text-align: center; ๐
main h1 { color: hsl(218, 44%, 22%); font-weight: 700; width: 100%; text-align: center; } main p { color: hsl(220, 15%, 55%); width: 100%; font-size: 30px; font-weight: 400; text-align: center; }
There are still a lot I can point out but I know for now this is already great progress you have here ๐ well done ๐๐ Trust the process๐ฏ.
To know more about responsive layouts, check Responsive Web Design Media Queries
Marked as helpful1 - @SzenftnerGergelySubmitted 12 months ago@KishonShrillPosted 12 months ago
Great Job ๐ The website works and is responsive. I have noticed that you are also good with the naming convention of your classes such as
.main-wrapper
,.wrapper
, and.content-wrapper
.There is only ONE ๐ thing I can point out and that is:
- Font - ๐ Grabrielle Essence Eau De Parfum ๐
Be sure to include the fonts in following the designs to a "T", this is to practice ourselves to always follow our designer's or client's design. ๐
Marked as helpful0