Skip to content
OverviewSolutions
3
Comments
4
Raj Kiran Chaudhary
@rk-codeflow

All comments

  • Bhoami K Khona•360
    @bhoamikhonaSubmitted about 1 year ago

    Frontend Mentor - Single Page Developer Portfolio

    This is my solution to the Single Page Developer Portfolio.

    Screenshot

    portfolio-challenge

    Links

    • Solution URL: Link
    • Live Site URL: Link

    Built with

    • Semantic HTML5 markup
    • CSS
    • CSS Flexbox
    • CSS Grid
    • CSS Animations
    • JavaScript

    Challenges

    • Resizing and adding hover effects to svg icons
    • Learning to use <picture> and <source> for displaying images on various screen sizes i.e. using media queries
    • Image overlay for the projects section
    • Learning to use keyframes to add animations

    Feedback

    Any constructive feedback is welcomed.

    Responsive Single Page Developer Portfolio

    2
    Raj Kiran Chaudhary•100
    @rk-codeflowPosted 11 months ago

    It looks great on desktop however there are some issues in mobile devices like horizontal scrolling. Instead of using vanilla CSS, using SCSS would be much better and using mobile-first approach instead of desktop first would be great for responsiveness.

    Marked as helpful
    0
  • Raj Kiran Chaudhary•100
    @rk-codeflowPosted almost 3 years ago

    You did a great job @tymren608. I am impressed.

    0
  • Raj Kiran Chaudhary•100
    @rk-codeflowPosted almost 3 years ago

    Active here means when you click certain element or say clicked state.

    You can refer here to my solution which I did in Tailwind. https://nft-card-componentt.netlify.app/

    If you have just began then better try with vanilla CSS first

    0
  • Anosha Ahmed•9,300
    @anoshaahmedSubmitted almost 3 years ago

    First time using SCSS! I love it! It's so convenient!

    One thing I wish I had done differently is not nesting. I don't know why I was nesting at first... maybe because I was using SCSS for the first time?and it felt cool? But when it came to do media queries, it was so inconvenient to deal with specification etc. I'm gonna make sure not to do that again if I don't need to.

    One problem I kept having, with this solution, was that every time I would save, and my live server would reload, the font-size of random paragraphs would appear larger than before I saved last time. And it was weird because I didn't even touch the font-size of those paragraphs. So, I would stop the live-server and open it again, and the font-size would be back to normal. Then I'd save again, and the font-size would appear larger. Ugh, it was such a hassle.

    But yay I'm happy with the result!

    "clipboard landing page" + sass + flexbox + mobile-first + responsive

    17
    Raj Kiran Chaudhary•100
    @rk-codeflowPosted almost 3 years ago

    Look so clean. But if you are not going to use nesting then won't it feel like using vanilla CSS again?? Nesting makes us write less code which I love.

    Marked as helpful
    1