i would be so thankful if someone explains to me how to center elemnts vertically like should i make a margin for the box containing the 3 child boxes, should it be in %, else what better approaches can i adapt
Hi there. Try to understand Flexbox or grid by watching a YouTube video and I am sure you will be able to fix the layout correctly. That way it will be very easy to center are place items where you want them quickly. Good job!
Completing this challenge.
What challenges did you encounter, and how did you overcome them?i encounter chanllenges in almost all areas but i was persistent
What specific areas of your project would you like help with?anywhere i am found wanting i will love to learn and the theme it does not change.
Hi @Hackerbot24. Good job, it looks great! There are different ways to manage the theme to change but the one I used was using SASS. I am currently using only tailwindCSS to manage the styles in my projects but I am sure I used SASS when finishing this challenge. SASS allows you to set two or more different themes like two different variables similar to javascript and you can toggle them when pressing the button. It is very easy to learn from a YouTube tutorial.
I am most proud that I was able to nearly copy the same design provided by Frontend Mentor though I had to use a lot of complicated and maybe unnecessary codes to attain it. I would make sure to study more to learn how to minimize my code.
What challenges did you encounter, and how did you overcome them?I had difficulty when my container's height keeps extending when the view is adjusted or scrolled down. I searched through the internet in order to find out what was wrong, I only read and read but nothing until I tried to experiment on it myself. Thanks to the answers from stack overflow which says its most likely the height property, I was able to accomplish it. From height: 51vh; to height: 100%;.
What specific areas of your project would you like help with?I would like help with the spacings and how to place good values in the margins, paddings, widths and heights. If possible, I would also like to learn how I could minimize my code by using only the necessary properties. I also want to understand how the min-width and max-width works in the media queries.
hI @0653Jerico. Good job, looks great. Regarding your comments about minimizing CSS, you can try using some CSS frameworks like Bootstrap or Tailwind. I have used both but in my recent projects I used Tailwind mainly because it renders the CSS classes and removes the ones you are not using which makes the code more solid and less heavy. Give it a try and that will help you a lot and save you some time, mainly on the responsive things. It could be hard at the beginning but once you understand it, it's very useful. There are lots of YouTube tutorials to begin with.
I am proud of everything.
What challenges did you encounter, and how did you overcome them?I did not encounter any challenges.
What specific areas of your project would you like help with?I would like to get feedback on my code.
Hi @IvanoCro, Your code and design look great. The only minor detail would be to put the same padding that you have on the sides on the top. It's a minor detail but it would make the design look much cleaner visually. Other than that it looks great, good job!
The thing I'm most proud about is how nice the heading looks when you hover over it. The thing I would do differently next time would probbaly get a understanding of typography as I really dont know much about it.
What challenges did you encounter, and how did you overcome them?The cllanges I encountered was styling the learning button as it looked weird when I tried to style it. I overcame it by setting it flex start.
What specific areas of your project would you like help with?The specific areas of my project I would like help with would be the the shrinking of the typography when the screen gets smaller. I read some tutorials on css clamp but I'm really not sure if I correctly implemented it so feedback on that area would be pretty helpful.
Hi @Masseh2025. Your design looks great, good job. A simple way to make the text responsive is by using "rem" or "em" instead of "px" when setting the font size. Try it out and you will see how the text grows and shrinks depending on the size of the screen.
I am having trouble accessing the designs so I had to think outside the box. Any help will be much needed.
What specific areas of your project would you like help with?In the footer section definitely need help with the css display properties
Hi @GraceMCodes. The main issue I can find is that you need to set a width and height for the container with the class "shadow" which is the one nesting the whole design. That will make the box smaller and will fix the design.
I'm proud that was able to do most of it without major issues. It shows to me that, although I still have a lot to learn, I am improving little by little.
What challenges did you encounter, and how did you overcome them?I think that one the challenges involves making the box-shadow of the card bigger and change the color of the text whenever you hover the ''HTML and CSS foundations'' text. Changing the color is a piece of cake, but I couldn't find a way to make the box-shadow of the card bigger. Unfortunately, I didn't manage to overcome this challenge, at least for now.
What specific areas of your project would you like help with?I would like to know how could I make the box-shadow of the card bigger when hovering over the ''HTML and CSS foundations'' text. This text was an 'H1' tag directly inside a 'main' tag, so I though using this line below would work.
main > h1:hover main{
}
But it seems to me that the 'hover' pseudo-class can't affect parents.
Hi @teixeirabrenno. To make the box shadow bigger you just need to use the pseudoclass "hover" over the "main" which is the main container. Check the code-pen link I am attaching where I just made an example using your code. I hope it helps. Good job by the way.
main:hover{ box-shadow: 12px 12px 8px black; }
https://codepen.io/cristianccgg/full/mdYGOGp
Hi @DaooaBH. Looks pretty good what you did. You mentioned you couldn't make the mobile version but you did not specify why. If you share a bit more details maybe we can help you make it work. Currently, I first design the mobile version and then I adapt it to the desktop, and since I did that it has become a bit easier to work. You should try it. Good job.
All feedback welcome. Thank you in advance.
Hi @Mohamedabadyy. It seems the layout works but your QR code is not there. Check the image path in your code so maybe than can be the solution. Sometimes a dot before the path is all it takes to fix it. God job!
Hey guys,
Any feedback is welcome. If you have a better solution on the hover effect or the Javascript, I would appreciate it if you leave a comment.
Hello @Johannes-pries. It is working properly, not broken at all. Sometimes it takes a few minutes to be deployed properly but I tried it and it is perfect. God Job!
Hi @thaneeola. It looks really nice. A minor detail would be to have the same padding-top so it has the same distance on each side. Also, the description-text is hard to see because the color is too bright or the opacity its too low, so you can play with those features. Other than that it looks great and you did a god job.
I was able to make a better solution to this challenge.
What challenges did you encounter, and how did you overcome them?I had a little difficulty using the grid structure. I easily overcame this challenge by reading different articles and watching videos.
What specific areas of your project would you like help with?There is no specific area I would like help with right now.
@azizedogan Looks very nice. A minor detail would be to have a bit more of padding on the right container. Other than that it is great. Good job!
