Skip to content
OverviewSolutions
9
Comments
24
Siege
@idesmar

All comments

  • Jessica•880
    @perezjprz19Submitted almost 3 years ago

    A question that came while I was starting to build this, is:

    • If all sections have the same importance, how do you determine what heading to use since having multiple H1 headings is frowned upon, but in context, it doesn't make sense to have more than one level of heading or have a different type of tag that's styled the same as a heading?

    • I felt like using margin at the bottom of the paragraph to create the spacing was a bit of hack. Is there a better way to do that?

    • I wanted the buttons to remain in the same place regardless of the space taken up by the paragraph. Is there a way to achieve that without using absolute positioning?

    • Any tips to improve the legibility of my code would definitely be helpful.

    Responsive 3-column layout using grid and flexbox

    2
    Siege•520
    @idesmarPosted almost 3 years ago

    Hi Jessica! I think you did a great job with this challenge and you have very valid questions.

    Here are my personal opinion regarding your questions?

    • Multiple H1: In this challenge/design, there isn't a clear level one heading. There is, however, a way to resolve it. It's by making your own level one heading and applying an sr-only class to it to hide it visually but available to screen-readers and web crawlers for SEO. I've seen some web apps that used that approach. The BBC web page is one that I've seen recently. Side note: Please don't use display: none; to hide elements that you want screen readers to detect.
    • Spacing between paragraph and button: Using padding-bottom on the container as oppose to margin could be an option. The padding should be of enough size to cover the button, plus some allowance so the <p> and button will not touch.
    • Absolute position on button: There may be other solutions out there but an absolute position combined with padding from the container is the best I can think of right now.

    Thanks for reading my thoughts on your questions. Happy coding!

    Marked as helpful
    1
  • Siege•520
    @idesmarPosted almost 3 years ago

    Hi Elvinas! I think you just encountered a collapsing margin issue on your web app. There's a blank space above and below your <body> element caused by margin-top from .logo and margin-bottom from <main>.

    Quick fix for this issue is to use display: flow-root on your <body>.

    If you want to read more about collapsing margin, this is going to be a good read from CSS-Tricks.

    Happy coding!

    0
  • Fernando•145
    @Faerk77Submitted almost 3 years ago

    Hi!, I've just finished another challege. This one take a lot more time that the others, the elements were very hard to style but i think it's a great job.

    I use BEM for the first time, so pls be nice haha...

    I got some problems position backgrounds so if you got some advice about this let me know pls :c

    like always, thanks for any feedback, and see you soon.

    Grettings.

    HTML, CSS && BEM

    1
    Siege•520
    @idesmarPosted almost 3 years ago

    Hi Faerk! How was your experience with BEM? I hope you had fun with this challenge.

    The approach that I've thought of in this project is to use 2 primary containers. 1 at the top which contains 2 inner-containers side by side (I believe you had that as .header and .rate). You can use display: flex; to control the position of those two inner-containers. Then the 2nd primary container would be .comment at the bottom. Oh! and you can use the <footer> as a 3rd primary container if you opt to include the .attribution.

    If ever you refactor your code and it works well for you, let me know. Cheers!

    Marked as helpful
    0
  • Siege•520
    @idesmarPosted almost 3 years ago

    Hey Ali! Your solution looks good!

    For Accessibility and sematics though, please look into tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful
    1
  • Siege•520
    @idesmarPosted almost 3 years ago

    Hi Rogelio!

    Nicely done! Nothing much to say but keep doing what you're doing.

    Happy coding!

    1
  • Guillermo Ochoa•40
    @GuillermoOMSubmitted almost 3 years ago

    I was wondering about whether I did right for any kind of display size, just to be sure if its correct to use px sizes from time to time (for padding and margin for example)

    First try with plain css

    1
    Siege•520
    @idesmarPosted almost 3 years ago

    Hi Guillermo! How was your first challenge with FEM? I hope you had fun.

    On using px for sizes, I normally just use rem for most sizes even padding and margin. Some uses em on the latter two but then again that comes down to your preference. I might use px for very small details like outline or borders.

    Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful
    2
  • Shikhar Vohra•60
    @Shikhar0411Submitted almost 3 years ago

    Hi, this is my solution to the Order Review webpage challenge, please take a look. Any general feedback would be appreciated. The following are the main problems I faced, 1 - How to lighten a colour given its hsl, other than just directly using VS code features 2 - Should the main font size also be changed when going from web to mobile, as I have done it, and it did make things slightly better. Answers to these would be highly appreciated Thanks

    Order Review Web page design using HTML,CSS

    2
    Siege•520
    @idesmarPosted almost 3 years ago

    Hi Shikhar! I hope you had fun with your first challenge on Frontend Mentor.

    Regarding your questions:

    1. How to lighten colors using HSL? The easiest would be to adjust the third value which pertains to lightness. HSL stands for Hue, Saturation and Lightness. There are other ways like filter: brightness() but the first option would be enough in most cases.

    2. Font-size change when on mobile? In almost all cases, yes, unless specified by the design. You don't want to have large fonts on mobile where the user has to scroll more just to read a few lines of text. You did great in adjusting the font.

    Regarding accessibility issues, you may want to look into using container tags like <header> <main> <section> <article> and <footer>. MDN is always a good source.

    Marked as helpful
    1
  • Yazzybandyham•120
    @yazzybandyhamSubmitted almost 3 years ago

    Hi!

    This is my first ever project that I did without a tutorial, and I know there are a million ways I could have simplified it. I would love feedback on how I could have positioned elements using less code, and if there is a better way, I could have tackled the responsive web design using Media Queries. Thank you in advance for taking the time to look!

    Responsive Order Summary Component

    2
    Siege•520
    @idesmarPosted almost 3 years ago

    You did great! Putting what you learn from tutorials to solving frontend mentor challenges makes you improve your personal technique and approach on web development.

    If you want to shorten your code a bit, you could use shorthands for margin and padding, or using flex-box to center items. Shorthands are great but you don't have to use them everytime. There are cases that shorthands could make your code too complicated and hard to debug. What those cases are... you'll learn on the journey to improving more. :)

    Happy coding and happy new year!

    Marked as helpful
    0
  • Siege•520
    @idesmarPosted almost 3 years ago

    Congratiolations in completing this challenge, Nate!

    • I assume you were trying to develop the site mobile first, however, I saw a few media queries with max-width. For simplicity, you can uniform it to min-width.
    • Also, since you're using SCSS. You can assign a variable for each screen size you want to work on (ie. $mobile: 500px, $mid-screen: 800px, ...).
    • For easier positioning of the cards, you can separate the #title_card from the grid so it will only contain the 6 info cards. That should allow you to easily create transitions when the screen resizes (eg. 1 column on $mobile, 2 columns on $mid-screen, 3 columns on $full-screen)
    • Simplify grid-gap by shortening it to gap

    I hope I was able to give you good feedbacks that could help improve this challenge. Happy coding and happy new year!

    1
  • Siege•520
    @idesmarPosted almost 3 years ago

    Hi Jaycee, regarding your border-radius problem, you can set it on the parent container. That would be on .class__container if I read your code correctly. In the event you encounter problems with contents going beyond your container, you may want to look into overflow: hidden;. Hope I was able to help you with that problem.

    Happy coding!

    Marked as helpful
    3
  • Michael•160
    @Minard-NGSubmitted almost 3 years ago

    This was quite a daunting challenge...Learnt a lot from this challenge.

    Kindly review, feedbacks are very welcome!

    URL Shortener | vanillaJS

    4
    Siege•520
    @idesmarPosted almost 3 years ago

    Some additional container tags to suppliment @Aakash suggestions are <header>, <section> (section will require a heading tag inside: h1-h6) and <footer>.

    Happy coding!

    Marked as helpful
    1
  • Siege•520
    @idesmarPosted almost 3 years ago

    Hi Ronel, Congratiolations in completing this project! The site looks great on mobile and desktop view. Your code looks clean and understandable.

    Just a few feedback on HTML that wasn't covered by the report generated by FEM regarding <small>. Although this is allowed, it goes against the principle of separation of concern. So even if it's allowed, taking SOC into consideration is always a good thing to bear in mind. Click here to read more about the <small> tag.

    Regarding landmarks, you may want to use <header> to contain the logo and <main> for the rest. That should fix some of the landmark concerns on your page.

    For JS, perhaps, create a return where if output is NaN, it won't change textContent or something similar.

    Great work and Happy coding!

    Marked as helpful
    0