Sabine

Latest comments

• 

  Sai Suhani•20

  @saisuhani

  Submitted 8 months ago

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

  I’m most proud of how I implemented a fully responsive QR code component using semantic HTML5 and clean CSS. The design is simple but effective, and I made the layout adapt smoothly to both mobile and desktop devices. I’m also happy with the use of CSS custom properties, which made styling more efficient and easier to manage.

  Next time, I would focus more on optimizing the layout for smaller screen sizes and explore the possibility of adding animations or transitions for visual enhancement. I would also experiment with more advanced CSS techniques, such as grid layouts, to improve design flexibility.

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

  One challenge I faced was ensuring the layout worked seamlessly across different screen sizes. At first, I had difficulty balancing the layout on very small screens without making the elements too cramped. I overcame this by using flexible widths and the mobile-first approach, where I started designing for mobile screens and then adjusted for larger screens using media queries.

  Another challenge was working with the QR code image to ensure it was scalable across different devices. To fix this, I used CSS to set the image width to 100% and ensured it looked good across various screen sizes.

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

  I would love feedback on how to improve the responsiveness of the layout even further. Any suggestions for improving the visual design or adding subtle animations would also be great. Additionally, if anyone has advice on how to enhance performance while maintaining visual quality, that would be incredibly helpful.

  

  Semantic HTML5, CSS Custom Properties, Mobile-first workflow

  3

  30
  

  P

  Sabine•80

  @SabineEmden

  Posted 8 months ago

  Here are some suggestions how you can improve your solution. I hope they help. Let me know if you have any questions!

  Responsive Design

  This project doesn’t need any media queries. You can see in the Figma design file that the width of the component is 320 pixel in both the mobile and the desktop view. The design doesn’t shift.

  • Remove the media queries from your code. You don’t need them here.
  • Convert the width in the design file to rem and use that as the max-width of the component. (See below for more on rem.)
  • Add some padding to the body, so the component doesn’t touch the edge of the screen on smaller screen sizes.
  • Change the height of the body element from height: 100vh to min-height: 100vh (or use svh). This allows the height of the body to be larger than the height of the viewport if necessary, for example on a mobile device in landscape mode.

  It’s great that you want to make you projects responsive. If you follow the learning paths on Frontend Mentor, you will get lots of opportunities to practice responsive design.

  Just for future reference:

  Let’s say a component had a width of 320 pixel on small screen sizes; on screens wider than 768 pixel, the width would change to 480 pixels. For mobile first design, you would write the CSS rules for the small screen sizes first, as you default, with no media query. You would then use a media query to add a breakpoint and change the width for wider screens.

  /* This is how the component looks on mobile by default */ 
  .component {
  	max-width: 20rem;
  }
  
  /* This changes the layout for screens wider than 48rem */
  @media (min-width: 48rem) {
  	.component {
  		max-width: 30rem;
  	}
  }
  

  The media query has to be below the default styling in the style sheet, or it won’t work. And be careful to use min-width or max-width in your media query, not width. You have @media (width: 1440px) in your code. That would work only at a width of exactly 1440 pixel.

  Semantic HTML and Web Accessibility

  The main reason why we want to use semantic HTML is to make our web pages easier to navigate for people who use assistive technology like screen readers. For this, every page needs to have a main landmark. It allows users to skip directly to the main content of the page. Another important rule is to have only one h1 heading per page. For components like this project, the h1 heading will most likely be somewhere else on the page, not on the component.

  • Wrap <div class=“box”> in a <main> element.
  • Change <div class=“attribution”> to <footer class=“attribution”>. The footer is not part of the main element.
  • Change the h1 heading to h2. This will get flagged in to accessibility validation, but it’s still the right thing to do.

  To make your project accessible, you also need to allow users to change the font size with their browser settings. That’s why we want to have all font sizes and container widths in rem, not px. For margins and padding, it’s your choice if you want them to change with the font size. I normally use px for padding and rem for margins.

  • Change all font sizes to rem, based on 16px as the default browser font size. That is, 14px converts to 14px/16 = 0.875rem.
  • Test if you want to use rem for margins by changing the font size in your browser settings.

  One more thing about HTML structure: You don’t need <div class=“qr”> and <div class=“text”>. Your code will work just the same without them.

  • Remove the two divs.

  CSS Structure and Performance

  Overall, your CSS is well-structured and readable, and I like your use of custom properties for the colors. My only complaint is that you have some CSS in the HTML file that should be moved to the style sheet.

  • Move the two CSS rules for the attribution from the HTML file to your CSS style sheet.

  A tip for positioning the attribution in the footer: With your component wrapped in a <main> element, this code snippet is very helpful:

  body {
    /* more code */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  For performance, it’s better to link to Google Fonts in the HTML file instead of using @import in the style sheet.

  For future projects, you may want to look into using a full CSS reset like the ones by Josh Comeau or Andy Bell.

  Happy coding! 😎

  1

  Marked as helpful
• 

  jardellprod•100

  @jardellprod

  Submitted 8 months ago

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

  I'm proud to have completed my second challenge. I'm also proud I pushed through and fixed some of the minor details when it came to the css, and I tried to keep the code as clean as possible.

  I need to improve my HTML semantic. I did try to use better naming conventions this time, but there is room for improvement.

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

  I got stuck with aligning the author avatar with the text containing his name. I eventually used flex, and used other simple properties to make the text horizontally aligned with the image.

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

  Semantic html, and tips on keeping cleaner css.

  

  Blog Card

  1

  20
  

  P

  Sabine•80

  @SabineEmden

  Posted 8 months ago

  Hi there! 👋 Good job on completing the challenge.

  Here are some suggestions how you can improve your solution. I hope this helps. Let me know if you have any questions!

  Does the solution include semantic HTML?

  Yes, the solution includes semantic HTML.

  • I would use an h2 element for the heading instead of an h1. The blog preview card is a component. It would be used as part of a page. We want to have only one h1 heading per page. And this would probably not be on the preview card. There may even be several preview cards on the same page.
  • The three lines of text under the heading are one paragraph and should all be in the same p element. You can control the length of the lines and the line breaks through the width of the card and its padding.
  • The semantic element that missing in your solution is the main element. It’s important for accessibility, and every page should have one.

  Is it accessible, and what improvements could be made?

  Yes, the solution is accessible to some degree. Font sizes are in rem and will adapt to the browser settings. But the design breaks because the container sizes won’t change with the font size.

  • The card only needs a max-width in rem. That would greatly improve the accessibility of your solution. As a general rule, never set a height on a container that contains text. Setting a max-width in rem allows the container to grow if the user increases the font size in their browser settings.
  • The image should get its size from padding on the card and max-width: 100%.
  • The content section of the card should get its size from the padding on the card and its content.
  • The yellow box with the word learning should get its size from its content and its padding.
  • The author image needs a width in rem or em, but no height. You can use aspect-ration: 1 on the image.

  Does the layout look good on a range of screen sizes?

  Yes, the layout works on a rage of screen sizes. The card has a fixed width of 320 pixel. In the Figma design file, the width is 384 pixel on desktop.

  • A better solution would be set the maximum width of the card to 24rem and let the width of the card shrink on narrower screens.
  • I would also set padding on the body element to prevent the card from touching the edge of the screen.

  Is the code well-structured, readable, and reusable?

  Yes, the code is well-structured, readable and reusable, but the CSS code could be simplified.

  • The content of the card doesn’t need to have a grid container. You can remove the div and layout the card with normal flow.
  • The yellow box with the word learning also doesn’t need a grid container. A p element with padding is all you need.
  • You have some very complicated CSS selectors for the main paragraph under the heading. As I mentioned above, this needs to be a single p element.
  • There is no need to combine several class selector with descendant combinators. You can, for example, simply use .card-author instead of .card .card-info .card-author. Look into BEM, if you want to use selectors that identify the hierarchy between .card, card-info, and .card-author.

  Does the solution differ considerably from the design?

  Yes, the solution differs considerable from the design. In the design, the heading is interactive. The brief for the challenge states users should be able to see hover and focus states for interactive elements on the page. There is also a design file that shows the active state.

  • Wrap either the heading or the whole card in an a element. The blog preview card needs to have a link to the blog post its previewing.

  Happy coding! 😎

  0
• 

  Sai Suhani•20

  @saisuhani

  Submitted 8 months ago

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

  I’m most proud of how I implemented a fully responsive QR code component using semantic HTML5 and clean CSS. The design is simple but effective, and I made the layout adapt smoothly to both mobile and desktop devices. I’m also happy with the use of CSS custom properties, which made styling more efficient and easier to manage.

  Next time, I would focus more on optimizing the layout for smaller screen sizes and explore the possibility of adding animations or transitions for visual enhancement. I would also experiment with more advanced CSS techniques, such as grid layouts, to improve design flexibility.

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

  One challenge I faced was ensuring the layout worked seamlessly across different screen sizes. At first, I had difficulty balancing the layout on very small screens without making the elements too cramped. I overcame this by using flexible widths and the mobile-first approach, where I started designing for mobile screens and then adjusted for larger screens using media queries.

  Another challenge was working with the QR code image to ensure it was scalable across different devices. To fix this, I used CSS to set the image width to 100% and ensured it looked good across various screen sizes.

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

  I would love feedback on how to improve the responsiveness of the layout even further. Any suggestions for improving the visual design or adding subtle animations would also be great. Additionally, if anyone has advice on how to enhance performance while maintaining visual quality, that would be incredibly helpful.

  

  Semantic HTML5, CSS Custom Properties, Mobile-first workflow

  3

  30
  

  P

  Sabine•80

  @SabineEmden

  Posted 8 months ago

  Hi there! 👋 Good job on completing the challenge.

  Unfortunately, I can't preview your site or view your code. I get a "page not found" error for both links, and your GitHub profile shows no public repositories.

  Happy coding! 😎

  1

  Marked as helpful
• 

  P

  Eddie Bones•220

  @EddieBones1

  Submitted 10 months ago

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

  I'm proud that I'm getting more comfortable and better with using HTML and CSS.

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

  A challenge that I encounter while working on this project is creating the table that is in the Nutritional Facts section of the recipe page. I overcame this challenge by doing tons of research until I found out about the :last-of-type pseudo-class from mdn web docs.

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

  I can't think of any specific areas of this project that I would like help with.

  

  Recipe Page

  2

  20
  

  P

  Sabine•80

  @SabineEmden

  Posted 10 months ago

  Hi there! 👋 Good job on completing the challenge.

  The solution includes semantic HTML elements. It’s accessible. The layout looks good on a variety of screen sizes. The code is well structured, with exception of the <main> element, and readable. The solution differs from the design in only a few minor points.

  I don’t have any experience with SCSS and can’t comment on your use of it.

  The biggest issue I see is the placement of the <main> element. Its opening tag is on line 26 under the <img> tag and inside <div class=“container”>. The <div> is closed on line 122 below the closing for the <table> element. The closing tag for the <main> element is on line 132 between the closing tags for the <footer> and <body> elements. The browser corrects that and treats <main> as a child of <div class=“container”>.

  Take a look at the MDN documentation for the main element. It represents the main content area of a document. In my opinion, the whole <div class=“container”> belongs inside <main>.

  Here are a few more suggestions how you could improve your code:

  • Using an <h3> element for the heading Preparation time skips a heading level. The heading is one level below <h1> and therefore should be an <h2>. Use a class to style it differently than the other two <h2> elements.
  • To match the design more closely, change the text color for the list items under Ingredients and Instructions.
  • Take a look at the placement of the list markers for all three lists and try to match the design in your solution.

  I hope this helps. Let me know if you have any questions.

  Happy coding! 😎

  1
• 

  Aqib-Yousuf•10

  @Aqib-Yousuf

  Submitted 11 months ago

  

  Social Media Link Profile

  1

  10
  

  P

  Sabine•80

  @SabineEmden

  Posted 11 months ago

  Hi there! 👋 Good job on completing the challenge.

  I’m guessing this is your first challenge on Frontend Mentor. Your code has a lot of room for improvement. Don’t worry! That’s perfectly normal. Try to learn as much as you can from this project. Then use what you’ve learned in your next projects.

  I’ll point out a some key issues you should work on. When you’ve reviewed those and improved your code, let me know, and I’ll be happy to give you additional feedback!

  Does the solution include semantic HTML?

  • The h1 heading and the two p elements for city and description are all semantic HTML and great choices.
  • The five links that you have in the div with class=“platform” don’t have any semantic HTML at all. This should be an unordered list with a elements inside the list items.
  • You also need a main landmark for accessibility. The attribution would not go into main. It would be in a footer element.

  Is it accessible, and what improvements could be made?

  • In addition to the semantic HTML I mentioned, the solution has a number of other accessibility issues.
  • The image needs to have alt text.
  • All font sizes should be in rem, not pixel. This allows the user to change the font size in their browser settings.
  • There should be no fixed height on the body element. Replace height: 100vh with min-height: 100vh or min-height: 100svh.
  • There should be no fixed height on the card component. Let the content determine the height. This allows the height to change if the user changes the font size in their browser settings.
  • The width of the card component should be in rem, not pixel.
  • The links should not have a fixed width in pixels. Add some padding to the card component and change the links to display: block. That will solve the problem.

  Does the layout look good on a range of screen sizes?

  • The profile picture is too large on smaller screen sizes, and there is an uneven gap between the card component and the edges of the screen.
  • This project doesn't need any media queries.

  Is the code well-structured, readable, and reusable?

  • The two divs with class=“image” and class=“title” are not needed.
  • There is a lot of repetition in the CSS, which make the code hard to read and to reuse. The links can all be styled together. And as I already mentioned, this project does not need any media queries.

  Does the solution differ considerably from the design?

  • The solution uses font-family: Verdana, Geneva, Tahoma, sans-serif. The style guide specifies Inter as the font family.
  • The colors in the solution don’t match the colors specified in the style guide.
  • The solution has no interactive elements and therefore no hover or focus states.

  I hope this helps. Let me know if you have any questions!

  I’d also recommend you look at community solutions for this project and read through the feedback other people received on their code for this project.

  Happy coding! 😎

  0
• 

  Vinicius•20

  @vinicim002

  Submitted 12 months ago

  

  Usei flexbox

  1

  40
  

  P

  Sabine•80

  @SabineEmden

  Posted 11 months ago

  Hi there! 👋 Good job on completing the challenge.

  All in all, you code looks pretty good. You could simplify it by using fewer HTML elements and default styling in place of CSS flexbox for the card component. Here are some points you may want to consider:

  HTML

  • The image on top of the card is purely decorative. The card looks better with it there, but it doesn’t add anything to the content. Decorative images should have an empty alt attribute (alt=””).
  • You wrapped both images in a <figure> element. I definitely wouldn’t use <figure> for a decorative image. I also wouldn’t use it for the author avatar. In my opinion, an <img> element for the avatar and a <p> element for the author’s name, wrapped in a <div> for styling is all you need. If you want to use <figure>, I would use <figcaption> for the author’s name instead of <p>.
  • You have two <section> elements and a <footer> on the card. I recommend removing all three. You don’t need them for styling, and in my opinion they don’t have enough content for a section or a footer.
  • You used a heading element with class=“box-learning”. In my opinion, this is not a heading. I would replace it with a <p> element as a more generic block-level text element.
  • You used <br> elements in the paragraph with the description of the blog post. Only use the line break element if the division of lines is significant, for example in a poem or an address.
  • Don’t forget to customize the attribution at the bottom of the page. I would replace <div class=“attribution”> with a <footer> element, replace Your Name Here with your name, and add a link either to your personal website or your Frontend Mentor profile.

  CSS

  • I like your use of CSS custom properties and how you used rem and px. Well done!
  • You used two font families, Figtree and Open Sans. I’m pretty the design uses only Figtree.
  • You used the <main> element for the card component and centered it horizontally with margin: 15rem auto. I would wrap the card in a <div> inside <main> and use flexbox to center it.
  • You gave the card component width and height in rem. All it needs is max-width. Setting height for a container with text is generally not a good idea.
  • Add some padding to the card component.
  • You don’t need display: flex on the card component itself, only on the element that wraps the avatar and the name.
  • You can use width: fit-content for .box-learning, then you don’t need text-align: center.
  • Move the CSS styling for the attribution from index.html to your style sheet.
  • I’m curious why you used @charset "UTF-8” at the top of your stylesheet. I have never seen this before.

  I hope this helps. Let me know if you have any questions.

  Happy coding! 😎

  0