Skip to content
OverviewSolutions
4
Comments
10

SaruMakes

@SaruMakesDenmark160 points

I'm a former healthcare professional, who's looking to pivot towards working as a web-developer. I'm starting out with Frontend Development, and then I'll see if I want to add Backend Development to my skillset later as well.

I’m currently learning...

HTML + CSS and I'll be getting started on learning Javascript relatively soon.

Latest solutions

  • Recipe Page - Custom List Styling in CSS

    #accessibility
    SaruMakes•160
    Submitted about 1 year ago

    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! 🙂

    1 comment

  • Social Links Profile - w. hover animation

    #animation#accessibility
    SaruMakes•160
    Submitted about 1 year ago

    As always, I'd love feedback on my HTML code regarding the structuring and semantics. I'm still very much trying to learn the best way(s) to work with semantic HTML.

    Also, if there's anything in my CSS code that stands out to you, as something I could improve or something that seems strange to you, I would love to know!

    1 comment

  • Blog Preview Card - Animation and Custom CSS Variables

    #animation
    SaruMakes•160
    Submitted about 1 year ago

    I'd love some feedback on my HTML structure, as I'm not entirely sure I got it set up in the most logical way.

    Also, if there's anything in my HTML or CSS code that stands out to you as odd or some part that I can improve on, I'd love to know!

    1 comment

  • QR Code Component - First Frontendmentor Project

    #accessibility#lighthouse
    SaruMakes•160
    Submitted about 1 year ago

    I would like to know if my code is generally structured well or not, and if I've made the page to a decent level of accessibility.

    Also, while I used all the information I could glean from the figma files, I'm curious if that is how web developers generally use figma design files. Do you take as much information as you can from the design files and then translate that into your code, or how do you usually work with design files like that?

    Is there anything in my code that I should have done differently, to either make it easier on myself or to make the code better/more easily readable?

    1 comment

Latest comments

  • SaruMakes•160
    @SaruMakes
    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

    #accessibility
    1
    SaruMakes•160
    @SaruMakes

    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.

  • Tim Avidon•300
    @timavidon
    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)

    #accessibility
    1
    SaruMakes•160
    @SaruMakes

    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!

  • Tuna Erten•430
    @tunaerten
    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
    @SaruMakes

    @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
  • KN•220
    @kaiens-lab
    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
    @SaruMakes

    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
  • Layiwola Tobi•110
    @Laytix
    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
    @SaruMakes

    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
  • SaruMakes•160
    @SaruMakes

    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! :)

View more comments