Ericsson Mura 👦🏻

Latest comments

• 

  P

  Jye Harry•250

  @jyeharrySubmitted 2 months ago

  What specific areas of your project would you like help with?

  The hero images on desktop. I was able to get have them expand outside the width of the screen using negative margins. Then at 1440px I used clamp() to reduce the negative margins to 0 otherwise the screen continues expanding and reveals the clipped portion of the images which looks ugly. It works but I wonder if there is a better way to achieve this.

  

  Meet landing page

  #accessibility#bem

  2

  30
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 2 months ago

  Hi Jye Harry 👋

  Wow congratulations! I like your responsive a lot!

  I noticed you use the clamp() function for fonts. Example:

  font-size: var(--step-1); 
  i.e => clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);
  

  Could you explain this calculation, especially the 1.9718rem + 2.2535vw ? Or point me towards a cool tutorial if you know one.

  I've used clamp() in a previous challenge but generally, I don't really understand it!

  Cheers!

  0
• 

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraSubmitted 2 months ago

  

  [Solution] Meet landing page #Responsive Animated

  2

  10
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 2 months ago

  Hi Deepa 👋 and thanks for your comment!

  You're right, I forgot to fill in a few alt attributes. And most important, I forgot to convert the px in em/rem!

  I love the gradient you used on the h1!

  Cheers!

  0
• 

  Moh. Andrew Aprianto Putera•120

  @meandrewapriantoSubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  combine with Grid and Flexbox

  What challenges did you encounter, and how did you overcome them?

  when trying to using grid/flexbox, sometimes we need to specify the max-width and margin: auto,

  

  Meet Landing Page

  1

  10
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 2 months ago

  Hi Andrew 👋 and congratulations on completing this challenge!

  For the mobile version I noticed you used the images intended for the desktop version, where the hero image is splitted in two, in a flexbox container. Which is a pretty good idea.

  Overall your HTML & CSS is ok.

  For such projects, I really believe the Frontend Mentor team should provide us, at least for pro members, with a pro solution.

  Cheers and keep coding! 😄

  Marked as helpful

  1
• 

  GaZtuki•200

  @GaZtukiSubmitted 3 months ago

  

  Grid Area

  1

  30
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 3 months ago

  Hi GaZtuki! 👋

  WOW congratulations on completing this challenge!

  Great html & css. I like your responsive a lot!

  Cheers and keep coding! 😎

  0
• 

  Mohamed Ali•210

  @okasha07Submitted 4 months ago

  

  Four card eature Seciton

  1

  20
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 3 months ago

  Hi Mohamed how are you doing? Great job! 🆒😀

  Some suggestions that might be of help :

  • Review the responsive part. You set an overflow scroll on the main section which produce an unwanted scrollbar (which doesn't look good! 😬).

  I recently read an excellent free tutorial about responsive design. Maybe you could have a look :

  Kevin Powell -Responsive design

  • Be more precise with dimensions and distances between elements.

  Apart from that, it's great job! 👍

  Have a nice day and keep coding!

  Marked as helpful

  0
• 

  Vinayagam K•180

  @vinayagamRVKSubmitted 4 months ago

  What specific areas of your project would you like help with?

  This is my solution for the Product Preview Card challenge on Frontend Mentor. I built it using HTML5 and CSS3, combining CSS Grid and Flexbox. The design is somewhat responsive but could use improvement. I would love to get your feedback on both the code structure and the visual design.

  

  Dynamic Product Preview Card

  2

  70
  

  P

  Ericsson Mura 👦🏻•210

  @ericssonmuraPosted 4 months ago

  Hi Vinayagam and congratulations on completing this challenge! 👏

  I have some suggestions that might help you:

  • Semantic : don't forget to include semantic tags in your html code as for example "header", "main", "section" "footer"... to be really clear about the structure of the code;

  • Use the html <picture> tag for to place the images and make the change between mobile and desktop : it's more convenient and saves you having to use display block/none. For example :

  <picture>
    <source media="(min-width:620px)" srcset="./images/image-product-desktop.jpg">
    <img src="./images/image-product-mobile.jpg" alt="illustration of 'Gabrielle' by Chanel" width="686" height="480">
  </picture>
  

  See the documentation on W3Schools

  Now for the design part :

  • For desktops, the component is to big compared to the solution, and must be centered. You can center it both horizontally and vertically using for example Flexbox :

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  

  • The responsive is pretty good but needs to be improved when it comes to small devices layout. There's an excellent free tutorial "Conquering Responsive layouts" - 21 day challenge by Kevin Powell, you can find it here :

  Conquering Responsive layouts, by K.P.

  Hope that'll be helpful.

  Cheers and keep coding ! 😄👍

  Marked as helpful

  0