Skip to content
OverviewSolutions
6
Comments
6

Howslifem8

@Howslifem8100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive Four Card Section Using Flexbox

    Howslifem8•100
    Submitted 2 months ago
    1 comment

  • Responsive Product Card

    Howslifem8•100
    Submitted 3 months ago

    I had issues formatting my text to look like provided screenshots. I changed the font and tried my best at the font-weight but it still looks off.

    1 comment

  • Mobile Responsive Recipe Page

    #accessibility
    Howslifem8•100
    Submitted 4 months ago

    I'd appreciate any feedback on my code structure. Does my code make sense to you personally ? Do my class names make sense ? Is my HTML semantic enough ? How can I improve my structure for both HTML & CSS. Thank you !

    1 comment

  • Basic Social Link Card

    Howslifem8•100
    Submitted 7 months ago

    Responsive Web Design (RWD) is what I'd need help with. I tried adding a query to my code for bigger sized iphones but it's extremely basic and I wasn't very happy with it. Next time I plan on beginning my design phase on smaller screens, then I'll add the scale / additional functions the bigger the screen gets.

    1 comment

  • Blog Preview 'Mess'

    Howslifem8•100
    Submitted 7 months ago

    I would like to understand Mobile Response better, I honestly didn't even try it for this project. I have forgotten how to even begin implementing such a feature, I remember I need queries but I'll have to relearn.

    3 comments

  • Beginner QR code display Website

    Howslifem8•100
    Submitted 8 months ago

    I would love to improve the background of the website. Behind all the containers, just the base body could use some more work. The default design Frontend Mentor gives us lacks a background image, so I'm having a hard time imagining how they got all the shapes & designs back there only using HTML & CSS.

    1 comment

Latest comments

  • NATNAEL GETACHEW ASEFA•100
    @Eng-NatoleSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of successfully implementing a clean and responsive layout using Flexbox. Next time, I’d focus on optimizing my code structure and improving accessibility features.

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

    A challenge I faced was aligning the card components correctly across different screen sizes. I overcame this by refining my Flexbox usage and adjusting spacing with CSS custom properties.

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

    I’d appreciate feedback on improving my mobile-first workflow and making my CSS more efficient and scalable. Any tips on enhancing visual hierarchy and accessibility would also be valuable.

    Four card feature master

    2
    Howslifem8•100
    @Howslifem8Posted 2 months ago

    Hello, your final product looks great ! I do have some recommendations for your semantic structure though. Firstly, within any <div> your header elements should be in hieratical order. For example within your <header> you used two <h1> elements. The semantic approach would've been using a single <h1> for the top-first line then a <h2> for the second and a <p> for the longer text. Using CSS you then change how the <h> text appears.

    Additionally, I believe you could've used less classes to structure your code better. In your code it seems you utilized 5 unique classes (container, content, combiner, card & card-component), I believe you could've combined card & card-component, and scrapped the combiner class. I personally used 2 classes (Container & Card). For this project the combiner class could've been scrapped if you used your container class for only the card section, excluding the <header> that's pre-placed with html. The html also places the card in it's respective column so if you put 2 cards inside 1 <div> that means they share a column. Lastly, the card & card-component could be combined.

    All-in-all you got the job done and it looks sleekly professional so awesome job. Hope the feedback helps, keep on going !

    Marked as helpful
    0
  • Howslifem8•100
    @Howslifem8Posted 3 months ago

    Hello, as a junior dev your code seems flawless to me. The html & CSS are incredibly semantic & flow in a logical manner. I found it really easy to read through your code & figure out your solution. Sorry I can't offer any advice for improvements but I would like to let you know that I've learned a lot from reviewing your code. Such as using variables for your text colors, and how you applied your mobile-first design. Awesome job on your code structure, and amazing job making your code semantic. Great job, keep up the amazing work !

    0
  • jerwin_nico•10
    @jerwinq19Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    that i manage to solve the how to get the image in the mobile cover the whole width of the scren :)

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

    the mobile part where i need to ensure that the whole image cover the whole width of the screen

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

    none much thanks :)

    recipe page using flex box

    #accessibility
    1
    Howslifem8•100
    @Howslifem8Posted 4 months ago

    Hello jerwinq19 ! I think you did a great job on the website. The mobile design looks flawless. My feedback would be to try and work on your media queries, I believe you could have done a bit more for your desktop design. You did a good job using semantic HTML, although I believe you could've done better at naming your DIVs I noticed with some you gave them meaningful names such as "prep-time" but others you named "container-3". Using meaningful names will make your life easier by remembering exactly what its targeting, while also making it easier for others to read. All in all you did a amazing job, I can only see you getting better ! Please continue you are doing great !

    0
  • Howslifem8•100
    @Howslifem8Posted 7 months ago

    Hello, your page seems to have everything needed but it wasn't quite done. You could improve your CSS to make the spacing look more natural. Additionally you can use anchor tags <a> to add your own links to those buttons. Good work, I can see the effort but spending a little more time with CSS may help you improve.

    0
  • Howslifem8•100
    @Howslifem8Posted 7 months ago

    Hello Joseph, your work here has amazed me. I'm quite the junior so to say, so seeing your well organized code looked beautiful. As for the website, it looks spot on ! even the hover 'animation' was there. Wish I could've tested mobile response design but I couldn't. Anyways great job keep it up ! I definitely learned some stuff from your code, thank you.

    Marked as helpful
    1
  • anthony•170
    @Codingtry123Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    keep the simple project simple. Using container to wrap the element you want to style.

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

    how to position child element away from the parent element. Setting appropriate size for parent and child element. Using margin to distance border of parent element and child element.

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

    how do I choose sizing unit for different types of context and when building website responsively?

    QR code component using html and css flex box

    2
    Howslifem8•100
    @Howslifem8Posted 8 months ago

    Hello Anthony, you've done a great job with this project. Your website looks identical to the design. The only 'thing' was the size of the card container as it looks a little smaller than the original but besides that everything looks great. As for your question, the sizing units differ based on the context of your website. There 2 categories of sizing units, Absolute units and Relative units. The main behavioral difference between them is distinctly in their names. Absolute units are sizing units used to create fixed dimensions. They do not change size or location when the screen size changes (EX: px, cm, mm, etc). Relative units on the other hand scale with the environment (EX: em, rem, %, etc). Relative sizing units change depending on how the website is being viewed (on a smaller/larger screen etc). For example a relative unit known as 'rem' is used for scaling text relative to the root element, meaning if the root font size is 16px then 1rem = 16px. Hope this helped a little. Have a nice one !!

    0