@KarimanMedhat
Latest solutions
Latest comments
- @AcmeGamers
Hey there 👋,
Congratulations 🥳! To be honest, you really did superbly 😃! I liked the way how you used the
::beforepseudo-element to give the image a purple overlay, which itself was a great idea, hats off on that 👏. I'm glad you enjoyed doing the project the most as enjoying while making your own portfolio/design as it also matters 😊.Here are small recommendations which can further improve your code and make it easier for you to work with the code.
Centering Elements
Since your
containerclass is a flexbox (that is usingdisplay:flex), you can use it to center your elements.container { /* Your Code */ display: flex; /* New Addition */ align-items: center; // Centers horizontally justify-content: center; // Centers Vertically min-height: 100vh; // Captures full-screen height // Note: it is recommended to use min-height since it is a good practice }Now you can remove the below code from your CSS file without any worries and it will show the same result!
body { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); }Check this video out on how to use Flexbox Editor on chrome directly: https://github.com/AcmeGamers/stats-view-Kariman/blob/main/Flexbox.mkv
Media Queries CSS Duplicity
I noticed that you are using the same properties in media queries. Although you really don't need to specify the properties again, you can just define them once and it will show the result you want 🙂. Let me explain you this through an example:
/* This is a normal H1 heading with a color and a background */ h1 { color: red; background: blue; font-size: 40px; } /* Now if you do this */ @media screen and (max-width: 425px) { h1 { font-size: 26px; // This way, only font-size will change. // And the color and background will remain the same. // Also works with ::before and ::after pseudo elements 😀 } }Commenting
In addition, I would recommend making comments in your code, it will help you recognize the part of your code faster when you are working with larger projects. Here's an example:
HTML
https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_2778.png
CSS
https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_3560.png
I hope these few tips help you to make your code better and make you more productive. Hoping to see your future success and amazing work as always, best of luck 😃!
Marked as helpful - @sylcym@AcmeGamers
Hey there 👋,
Congratulations on completing the challenge 🥳! You really did amazing, especially to use semantic HTML which is a good idea to improve your SEO scores! For feedback, I have a recommendation which you can use later if needed.
In HTML, you have given each button a class as
btn-section-1,btn-section-2, andbtn-section-3, however, in CSS, we can actually use selectors which helps us to select elements without specifying each element a class likebtn-section-1.You can select elements in CSS like this:
// Try This .section-1 > button { // This apply changes to all the child buttons in Section-1 background: red; }// More Cases .section-2 > button:nth-child(1) { // This will select only the first button in Section 2 (Suppose you have 10 buttons, it will only apply changes to the first button) background: blue; } .section-3 button { // This will select all the buttons in Section 3, and when I meant all, I meant even grandchild buttons. background: blue; }I noticed it since your hovering of each button was orange, you might want to fix that. Although, I really loved the way how you slid the attribute to the right side and made it vertically straight.
Looking forward to seeing your amazing work in the future and hope this helps 😊
Marked as helpful - @adolfusdelmar@AcmeGamers
Hey there 👋,
Congratulations on completing your first challenge 🥳! This is really amazing considering your first attempt, hats off on that 😀.
Here are a few recommendations which can help you to further improve your code:
Semantic HTML
Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:
<body> <main> ... </main> </body>Flexbox Centering
I am amazed that you are also using flexbox to center your whole project, and a good fact is, you can actually center it vertically as well!
.body { /* Your Code */ background-color: hsl(212, 45%, 89%); display: flex; justify-content: center; /* New Addition */ align-items: center; // This aligns your code center vertically min-height: 100vh; // Captures full screen height (Thanks to Vanza) }That way, it will be center horizontally and vertically without any issues.
Google Fonts
Now, you can also import fonts from Google Fonts to stylize the text further, here is a 1 min video to help you understand how it works:
https://www.youtube.com/watch?v=YVnYFeYbv_Q
Hoping to look for your amazing work and designs in the future, best of luck! 😀
Marked as helpful - @KarimanMedhat@AcmeGamers
Hey there 👋,
Congratulations on nearly completing the challenge 🥳! You did great on centring the whole
<main>tag usingtransform😊.I would recommend changing the paragraph color to a bit lighter tone so people with eye issues can read it with ease. As far for the issue of hovering on the image that you were having, we use
pseudo elementsfor that, things like::before,::after,:first-child, etc. However,pseudo elementsdoes not work on<img>elements, so to cover that issue, we use the<div>tag.Solution (Spoiler Alert)
HTML
- Change your
<img class='main-img'>element to<div class='main-img'>element - Yup, that's all for HTML! :D
CSS
Add a background image to the div
.main-img { background: url("images/image-equilibrium.jpg"); background-size: contain; min-height: 268px; width: inherit; // Inherits the available width border-radius: 20px; }Let's add the pseudo
:beforestate on the div element.main-img::before { content: ""; // This is important, it won't work without it display: block; height: inherit; // Inherits the div height width: inherit; // Inherits the div width background: red; opacity: 0.6 }If you reach here, it means you may have got a complete red square on your NF T image. But the question is, we want it to appear when it hovers, so try doing some research on
how to add hover on ::before, if you figure it out, congrats, you are moving at a fast pace! :DDDIf it still confuses you, drop a reply and I will be here to explain it with an easier method 😊. Hope to see your future success and designs, until then, best of luck!
Marked as helpful - Change your
- @Dust1100010@AcmeGamers
Hey there 👋,
Congratulations on completing the challenge 🎉! I really liked the way how you used
width: min(30rem, 100%);to size the card's background 😀.Also, here are some ways through which you can improve your code more:
Semantic HTML
Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a
<main>tag. In your case, it will go as:<main> <div class="contenedor"> ... </div> <p class="attribution"> ... </p> </main>Centering Elements
For centring elements on the screen, there are 3 ways from which we can do so with ease, and for this one, I will go with
flexbox. Now considering you have added the<main>tag into your code, we normally do this:.main { min-height: 100vh; // Catches full screen-height and can expand when more content is added display: flex; // Flexbox flex-direction: column; // Aligns your elements vertically [ div and p tag ] align-items: center; // Center Elements Horizontally justify-content: center; // Center Elements Vertically }This way, you won't need to use
margin: 12.5% auto;on thecontenedorclass, helping you to align other elements more properly. You can try adding each line at a time from the above CSS code to understand how the flexbox works.Looking forward to seeing your amazing work in the future and hope this helps 😊
Marked as helpful - P@shihabmunshi06@AcmeGamers
Hey there 👋,
You actually did pretty good to make this with semantic HTML, to be honest, 😊. I would recommend using
<main> ... </main>tag instead of<div class='main'> ... <div>since div is a non-semantic HTML tag. The rest is pretty cool!As far for the image element problem that you are having, here are a few fixes that you can use:
Example
Egg div:HTML Part:
- Convert the
divhaving egg image into animgelement - Yea, that's all! :D
CSS Part:
Select your image element and give it the following values:
.bgimg { order: 1; // This will help in arranging your elements width: 100% // This will give full display in mobile }Now, select your text
#section-1 > div > div { order: 2; // Now the text will be below the image width: 100% // This again will give full screen width }Lastly, wrap your elements so they become responsive
#about .card { flex-wrap: wrap; // It won't work without this guy so do remember to add it. }When you do this, it will automatically resolve the issue and will give a proper display. You can check it out in the forked area here:
https://github.com/AcmeGamers/sunnyside-shihab
Hope this helps you figure out how to solve it 😊
- Convert the
