Skip to content
OverviewSolutions
4
Comments
10
SaruMakes
@SaruMakes

All comments

  • SaruMakes•160
    @SaruMakesSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my solution to style the various list-items and their bullets/numbers without having to resort to very exotic CSS. I'm also proud of my growing understanding of, and ability to troubleshoot my code.

    I took great care to try to emulate the design, based solely on the provided .jpg images, by overlaying boxes on top of the design in Figma, to be able to measure distances between elements. As of writing this, I have yet to see how my site compares to the original, when seen side-by-side on Frontend Mentor, so that will be interesting to see. I may have to make some edits, based on how it turns out.

    As for what I'd do differently: I wish I'd done the mobile version first, or at least planned for it a bit better from the beginning. I ended up having to do a good bit of changes, to fix the border padding/margins. Which, as I'm writing this, I'm realising might've been easier to fix by simply changing my overall setup in HTML.

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

    I really struggled with the layout for the and once the text spread across more than one line. Initially I'd used to make the beginning of the paragraphs bold, and then have the rest set as paragraphs. I then learned that it's generally not good form to even use to style your text as being bold. I then considered if I should use a custom styled or simply use. I ended up choosing the former, as I felt that the bold text was more of a stylistic element, rather than something that conveyed extra meaning.

    This switched some indentation issues, I was struggling with.

    The next issue was then figuring out how to vertically align the bullet points to the content when the content spans multiple lines. In the end I removed the bullet points from the list styling, and then added them back in as a custom symbol, that I could then style independently. I then made the parent `` a flexbox and set it to align-items: center;.

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

    Any tips on how I can improve my code would be greatly appreciated!

    I'm still very much trying to focus on Semantic HTML, so if anyone has some comments, critique or advice, then that would be great! 🙂

    Recipe Page - Custom List Styling in CSS

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Hmmmm, I can see that I created some spacing issues after rewriting parts of the code for mobile. I'll have to fix those tomorrow.

    EDIT: I fixed some of the spacing parts, but now I see that there are some indentation issues. I may come back to revisit this again in the future, and fix these parts as well, but for now I'll move on to the next project.

    0
  • Tim Avidon•300
    @timavidonSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have completed this challenge.

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

    Make this similar to the example.

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

    I'm open to feedback and any suggestions on how to improve this solution or achieve better performance.

    thanks.

    Recipe page w/ (HTML + CSS)

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Hi Tim 👋

    First of all, congratulations on finishing the project! Well done 👍

    I can see that you completed it quite a few months ago, but if you decide to revisit this project, I have some thoughts on things you could improve.

    Matching the design

    In your lists, you are using the same nutmeg color for the bold text as you have in the bullet points/list numbers. The bold text is supposed to be black/dark charcoal. Also, when viewing the site on mobile devices, the design images show that the bullet points are centered vertically with the contents of the <li>, but this isn't the case on your project.

    The latter was tricky for me to solve, but by removing the list-styling (to remove the bullet point) and then adding it back in as a bullet point symbol with a li::before, you can then use a flexbox on the parent <li> to align the list-content and the bullet points.

    Other than that, your code looks great to my relatively inexperienced eyes. Great job! 😁

    I hope my comments are useful and/or helpful to you. Happy coding!

    0
  • Tuna Erten•340
    @tunaertenSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I downloaded the Figma files and used Figma for the first time. I didn't use Figma in my first project, but I found it very useful and will use it in all my projects from now on. Edit: I made some changes. When I first completed the project, I hadn't noticed the hover effect. First, I added that, and second, I placed the cursor from the Figma file. (Thanks to @SaruMakes for the tip.)

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

    I had the most difficulty making the cursor pointer have a black and white border. I struggled with this for a long time. It took me a considerable amount of time because I searched extensively on the internet for a solution to color the cursor pointer but found none. As a result, I ended up using an icon instead. I learned that a URL could be added to the cursor, which also took me a long time to figure out.

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

    If there is a way to color the cursor, please show it to me. I would be very happy.

    Blog Preview Card with css custom properties and media queries

    3
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    @tunaerten, try having a look at my solution for this challenge, if you want to see one way to do the shadow animation (FYI: as per the figma file, it also needs to be different between mobile and desktop). 🙂

    As for the mouse cursor, there isn't a ton of stuff you can really do with it, to my knowledge. What you can do is, as you said, to replace the image with a different one. If you look closely, you'll find that the cursor for the design is actually hidden in the Figma file too, if you want to use the exact same cursor as the design. 😉

    I hope that helps!

    Marked as helpful
    0
  • KN•170
    @kaiens-labSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This project had many details, which made me stuck for a long time. But I am still very happy to have completed it.

    What challenges did you encounter, and how did you overcome them?
    1. Tried to fix overridden functions.
    2. Learned something new - CSS Counters.

    Not completely overcome, hoping someone can offer guidance.

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

    Mainly want to solve the problem of the font turning bold. But any advice or suggestions are very welcome!

    Recipe HTML, CSS

    2
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Hi there! 👋

    Great job on completing the challenge. 👍 I'm still working on completing it myself, and I might have more comments that might help you, after I've finished my own take on the project, but for now I can at least try to help you with your font issue:

    Bold font:

    • Since headers have default styling (unless you've reset these properties), they often have font-weight: bold; applied to them already. Try changing the font-weight to 400 and see if that helps.🙂
    Marked as helpful
    0
  • Layiwola Tobi•110
    @LaytixSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I had slightly better understanding of responsive design. I will plan to make the designs, particularly the positioning and height work better in different sizes.

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

    I tried coding with fixed width and height but received feed back that unless specific it is not good practice to do it often.

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

    Better understanding of how to use em, rem, vw, vh. How to have the divs be the sizes I want without having them be a fixed size.

    Responsive Qr component Using FlexBox

    2
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Hi there! Congratulations on finishing the challenge! 🎉👏

    I'm not the most experienced developer out there by far, but these are things I've learned so far, which might help you out as well:

    Using em/rem 🔤

    The em unit inherits its size from the font size of the parent element, which makes it trickier to work with. I'm sure there are cases where it could be useful, but I find it far easier to stick with rem throughout my projects. If I need to declare a specific font-size on an element/container, I can simply convert the desired font-size into rem. That way, if a user sets their browser to use a larger standard font size, I'm sure that all of the elements/attributes that are sized with rem units will scale proportionally to each other.

    I try to only use pixel values for very specific use-cases, where it won't interfere with the rest of the design, if everything else is scaled up. The basic font-size for browsers is 16px, so you can divide your values by 16 to get your sizes in rem units instead. Be careful with declaring your individual font-sizes in px for the same reason, as that will prevent users from scaling the font-size to fit their needs.

    Controlling Width & Height 📏

    You are sorta already controlling the sizes of your elements of the containers. In this instance, if you feel like the main element is too wide, you can simply set max-width:<value>;, which will prevent the element/container from growing larger than that. As long as you haven't set any fixed widths on nested elements within the container/element, then they should simply scale with the container.

    That way the container won't grow larger than that size, but it will still shrink with the viewport, if it gets smaller than that size.

    Inversely, you can set max-widths on elements nested inside the container, to constrain how large they can be, which in turn will determine the size of the container itself, as it'll grow or shrink to fit its contents.

    I hope this helps! Happy coding! 👍👍

    Marked as helpful
    1
  • SaruMakes•160
    @SaruMakesPosted 5 months ago

    Hi @riishi101! A very late congratulations on completing this project. I can see that you've moved far past this stage, so I don't imagine you're looking for much feedback on this submission. As such, I'll leave you with one main comment:

    The main thing which stands out to me, is your use of <button> for the external links. In my research on the topic, I've learnt that it is best to use <a> elements for any actual links, as it works much better for users of screen readers.

    The reason is that the way that screen readers work with <button> and <a> is very specific, and it can be confusing to the user if the elements don't act/work the way that they would expect them to. You can still style your links to look like buttons, the screen reader won't care about that, but it is better to have links be actual links, and leave <button>s for actual buttons, that trigger actions on the page itself.

    You can read more about it here: https://theadminbar.com/accessibility-weekly/buttons-vs-links/

    I hope this information is useful to you. Have a great day! :)

    0
  • aryakrishnaksh2021•50
    @aryakrishnaksh2021Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to give smooth animation to the component, make the site mobile responsive, and build a web page that scored 100% in performance and 91% in accessibility on the Lighthouse evaluation test.

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

    I didn't face any challenges

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

    Want help with the accessibility evaluation of web page and handling variable font-face

    Blog preview card challenge

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Great job at recreating the design! The only differences between your version and the design brief that I can see, are different line heights for the main paragraph and a smaller header. With these matching the design, I imagine the height of the card would match as well. :-)

    Your animation looks fantastic. I like your choice of speed. I went with a slightly slower speed than you, but I like yours better. It feels a bit more "snappy".

    As for variable font-faces, I'm not sure what you mean exactly. Are you talking about how to work with Variable Fonts or how to vary the font-sizes between your different @media query breakpoints?

    0
  • Uche Ofatu•260
    @Macnelson9Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It was a pretty easy challenge.

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

    I didn't encounter any challenge.

    Responsive Blog Preview Page

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    I like your take on the project! I think your code structure is cleaner than mine. Well done!

    A small comment, and it might be something you're already aware of, but instead of writing line-height: 1rem; for example, you can simply write line-height: 1; instead. Without the rem unit, the value becomes proportional to the text. So a line height of 1.2 is 1.2 times the size of whatever the font-size is. I find it to be a bit more intuitive and easy to reuse, compared to directly declaring units in rem or px.

    Of course, feel free to disregard this. It is merely an observation :-)

    Marked as helpful
    0
  • vitchet•80
    @vitchetSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Even though this challenge was very simple, making it responsive and written with modern css was very interesting. Next time I would make it according to "mobile first" approach.

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

    Making it responsive was a little challenging since it was my first responsive markup but I learned a lot.

    Responsive QR Code Component made using flex box css.

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Great job on the challenge, Vitaly!

    Since you didn't ask for any advice, I'd just like to say that I think your solution is very clean and I like how you solved the challenge. You seem to be using only exactly as much HTML as is needed, with a elegant, and no-nonsense CSS styling. I like your idea of scaling the fonts by declaring the rem for each screen size. I haven't seen it done that way before, but it's definitely a method I'll be using in the future too.

    Keep up the good work!

    Marked as helpful
    0
  • Silo de Menezes•20
    @Silo30Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Estou orgulhoso de ter conseguido completar o desafio e tê-lo deixado o mais próximo possível do design proposto. Espero poder concluir o próximo desafio de forma mais rápida, pois sinto que a falta de familiaridade com alguns conceitos e inexperiência foi o que me custou mais tempo durante este desafio.

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

    Tive dificuldade em deixar os objetos na posição certa. No fim tive que usar um padding-top para que o card não ficasse grudado no topo da tela, mas não acho que seja a solução ideal.

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

    Preciso melhor meu controle de layout. Tive um pouco de dificuldade em deixar os objetos na posição certa.

    Desafio "Qr code Component"

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    A really good attempt at this project. You got very close to the original design. Well done. :)

    I can very much relate to losing time due to a lack of familiarity with concepts and due to general experience. It's a great opportunity for learning and for assessing what you're good at and which things you need to work on.

    I was going to make a suggestion on how to use Flexbox to fix your positioning-issue, but it looks like you fixed it in a later commit. Great job!

    Marked as helpful
    1