Updated Challenge Solution

Community feedback

• 

  chucksterv•220

  @chuckstervPosted almost 2 years ago

  Hey mate! your solution looks good and congrats on completing it. Building on @abdullah43577's response. Semantic elements are the better practice when writing HTML over divs. It makes the code easier to read and it provides context to browsers and search engines. Here are some resources that might help.

  https://developer.mozilla.org/en-US/docs/Glossary/Semantics# https://www.w3schools.com/html/html5_semantic_elements.asp

  Happy Coding!

  Marked as helpful

  2

  ---

  

  Open World Project•80

  @OpenWorldProjectOWPPosted almost 2 years ago

  @chucksterv Thank you so much! I will take a look at these resources and save them in my bookmarks.

  Happy coding indeed! :)

  0
• 

  Abdullah Ayoola•1,080

  @abdullah43577Posted almost 2 years ago

  "Hello! You did a good job tackling this challenge. I have some suggestions to improve your solution. It looks like you used a lot of div elements, but there is a simpler way to approach the problem. You can check out my live solution for inspiration and see how I solved it. Click here

  Marked as helpful

  1

  ---

  

  Open World Project•80

  @OpenWorldProjectOWPPosted almost 2 years ago

  @abdullah43577 Thank you for the reply! Can you tell me very specifically where our divs differ and why one is more simple than the other? I looked at our codes side-by-side and found that there are more divs in your code, yet yours still preformed better than mine. Why is that? Also, is it a good practice to place buttons inside of divs to make the code easier to read? Let me know what you think. :)

  P.s. What was the script you added? Because that transition looked beautiful!

  0

  

  Abdullah Ayoola•1,080

  @abdullah43577Posted almost 2 years ago

  @OpenWorldProjectOWP I actually thought I used HTML semantic tags to solve this challenge, seems I did not. Well placing buttons inside div elements doesn't really matter, it all boils down to how you want the styling to work. But personally, I always put my button elements inside the div element where the nearest surrounding elements are.

  Mine worked because I'm moving content as a whole, for example, If I want to align and justify all elements in the second card, so instead of doing them one by one, I could give the parent element the styling and it applies to all consecutive child elements.

  Moreso, I didn't use any transition of any sort.

  I was trying to make some adjustments to your live solution URL, there are still a few things I think you might need to fix.

  • When giving image elements a width of 100%, they must have some parent element that has an absolute value of the same property(width);

  So in your own case, it should be your card-one that should have the absolute value property. then the image can have the width of 100%;

  so something like this:

  .card1{width: 424px};
  
  img{width: 100%};
  
  - the same thing applies to using the height property which I think would work best in this case, 
  
  .card1{height: 424px};
  
  img{height: 100%};
  
  this is just an example
  

  • when you apply this above example, you'll notice that your image element scales properly, and the second div elements sort of overflows, all you need to do is fix that overflow to match the height of the card one container, in fact, you could give the same height property to the main-container as a whole.

  For the container element holding the two card elements.

  .container {
      display: flex;
      justify-content: space-around;
      width: 100%;
      align-items: center;
      height: 100vh;
  }
  

  • using the code above vertically and horizontally centers the element instead of using the margin-top on the div container element.

  • After you've fixed both those problems, your code looks something like this.

  Click here to view the screenshot

  • viewing that screenshot above you'll notice that the container centers itself correctly and also the image scales properly. And like I said earlier, you'll only need to fix the card2 element to match the height and width of the card1 element.

  These are what I could pinpoint so far, I really hope it helps make your code look better.

  Cheers

  Marked as helpful

  0

  

  Open World Project•80

  @OpenWorldProjectOWPPosted almost 2 years ago

  @abdullah43577 Thanks for the feedback! I appreciate the help. :)

  0