Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7

shivak818

@shivak818120 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

  • testimonials grid

    #pure-css

    shivak818•120
    Submitted 7 months ago

    1 comment
  • four cards

    #accessibility

    shivak818•120
    Submitted 7 months ago

    1 comment
  • product-card

    #accessibility

    shivak818•120
    Submitted 8 months ago

    1 comment
  • reciepe page

    #pure-css

    shivak818•120
    Submitted 8 months ago

    1 comment
  • flex layout

    #accessibility

    shivak818•120
    Submitted 8 months ago

    1 comment
  • html and css

    #pure-css

    shivak818•120
    Submitted 8 months ago

    1 comment
View more solutions

Latest comments

  • Mohamed Khairy•190
    @mo7amed5hairy
    Submitted 8 months ago

    Responsive Testimonials-Grid-Section-Main

    #pure-css
    1
    shivak818•120
    @shivak818
    Posted 7 months ago

    css is very tough to understand keep it simple if u can it may help for some newbies like me

    Marked as helpful
  • why-not-phoenix•330
    @why-not-phoenix
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge was a bit challenging, especially, what I am guessing would be the most challenging part for any newbie, changing the 4 sections from column layout to a 2-way layout. I'm curious to see how others went about tackling it. I'm sure there's a better way than the one I used but I am proud of the way I handled it. It made everything seem basic if you put it that way. A simple flexbox in a bigger flexbox. Asides that, I had issues with responsiveness and scaling which I hope to improve upon.

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

    How to improve on responsiveness

    MOBILE FIRST FOUR CARD FEATURE SECTION WITH FLEXBOX

    #accessibility
    1
    shivak818•120
    @shivak818
    Posted 7 months ago

    u can use display type as grid right instead flex

  • why-not-phoenix•330
    @why-not-phoenix
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This wasn't a particularly difficult challenge, although for whatever reason it took to more time than I expected to complete. Was my first time really diving deep into Bootstrap and I often found myself doing some things myself rather than using Bootstrap. I had to look up some pages for responsiveness and chatgpt was my friend when I had things seemingly not work well. Some it helped with while others I had to figure out myself. I guess what took the most time was trying to perfect the dimensions, which I still don't think I got right. I think going forward, I'd not bother too much on making my dimensions exactly as in the design but instead focus more on getting the design in itself right. Hopefully my OCD allows this. All things considered, I guess I am improving everyday. If you've read this far then, well thanks for indulging me.

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

    Everything

    Mobile First Product Preview Card Using Bootstrap

    #bootstrap#accessibility
    1
    shivak818•120
    @shivak818
    Posted 8 months ago

    good

  • P
    Josh Kahlbaugh•540
    @Joshk7
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with how the media queries turned out because I approached the challenge by styling the mobile version and making media queries to add on top of mobile.

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

    I big challenge I encountered was trying to align the markers of list items to the left and the padding and margin with the ul, ol, and li tags in css.

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

    I'd specifically like help with the ::marker selectors and styling of the bullet points next to list items:

    .instructions ol {
        padding-left: var(--space-300);
    }
    
    .instructions li {
        padding-left: var(--space-200)
    }
    
    .instructions li::marker {
        font: var(--text-preset-5);
        color: var(--brown-800);
    }
    

    Additionally, the text wrap of the nutrition description p tag on mobile could look better if anyone has tips on text-wrapping properties.

    Responsive Recipe Page with Mobile First Workflow

    #pure-css
    1
    shivak818•120
    @shivak818
    Posted 8 months ago

    the code is perfect

  • parkerrn9•210
    @parkerrn9
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    what can i do to improve upon my work and what are the things i need to focus on?

    Responsive social links page

    #accessibility
    1
    shivak818•120
    @shivak818
    Posted 8 months ago

    good

  • Mohamed Khairy•190
    @mo7amed5hairy
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    ability to use css different techniques to make my code compatible with the design

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

    wrapping all elements with the same align using container in order not to wrap each element

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

    all project

    html and css and using container and flex display technique

    #pure-css
    1
    shivak818•120
    @shivak818
    Posted 8 months ago

    well done

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub