Skip to content
OverviewSolutions
10
Comments
6
somaye beiranvand
@somaye-beiranvand

All comments

  • Kiran kumar•120
    @kiran1095Submitted almost 2 years ago

    I am a newbie in a frontend development, I want to learn and design many more frontend designs. I wanted to learn about how to use the width property for responsiveness, like what units I need to use like pixel, %, rem or someother. Please help me or suggest me how I can improve in this aspect.

    I would be thankful if someone can suggest me how effectively I can develop pages responsively, It would be awesome if someone can suggest the ways I can improve by looking into my code.

    Thanks, kiran.

    Responsive page using Flexbox and media queries.

    2
    somaye beiranvand•220
    @somaye-beiranvandPosted almost 2 years ago

    Hello kiran

    nice job

    just a small suggession

    If you used grid for the layout of cards instead of flex it would be much more easier to make it responsive

    Here is my solution by grid for this challenge , If you like to take a look:

    four-card-feature-section-master using flexbox & grid

    Marked as helpful
    1
  • somaye beiranvand•220
    @somaye-beiranvandPosted about 2 years ago

    Hi Restu😊

    Great job on the challenge👏

    One advice to improve your solution:

    you can add best practice for menu using one line of jquery, when you click on a menu item the other one would get closed.

    $(document).ready(function () {
  $("details").on("click", function () {
    $(this).siblings().removeAttr("open");
  });
});

    Hope my feedback would be helpful, happy coding.😊

    Marked as helpful
    0
  • David•8,000
    @DavidMorgadeSubmitted about 2 years ago

    Hello and welcome to my Intro-Section-Dropdown solution

    This was the first challenge I submitted to FrontEndMentor, and also the first project I made without any kind of tutorial, just wanted to re-make it to practice a bit my CSS and Javascript after a long time just doing React.

    Problems with this solution:

    • Accesibility errors because of nesting a tags inside ul when they should be wrapped on a li tag, noticed this when I finished the project, too lazy to change all the styles that I already did :(, but learnt a value lesson from this and reinforce my html semantics.

    • Getting the border of the 'Learn more' button was a pain, but I'm satisfied with the resutls.

    Extra Features

    • Added an extra breakpoint from 768px to 1440px for Tablets
    • Border animations
    • Typewriter effect for the footer 'attribution'
    • Custom hambuguer menu that also has animations

    Built with:

    • HTML, CSS and Javascript
    • Mobile First

    Hope you like it!, as always open to any feedback for future projects.

    Landing page - Dropdown Navigation with HTML, CSS and JS

    2
    somaye beiranvand•220
    @somaye-beiranvandPosted about 2 years ago

    Great job 😊👏 and I like the descriptions that you add to your projects, I learn alot from them

    Just a small suggestion about your github profile:

    If you put the name of files or folders in .gitignore file they won't be uploaded on github and you can save more space.

    Hope my suggestion would be useful.

    Marked as helpful
    1
  • somaye beiranvand•220
    @somaye-beiranvandPosted about 2 years ago

    Hi David

    Congratulation on doing your first project on Frontendmentor and great job👏

    The only thing that I think would improve your project is to give min-height to body or container not a fixed number so they can stretch if necessary.

    also giving some padding to body helps that your container do not stick to the top of viewport in mobile devices.

    I hope my feedback would be helpful for you. happy coding😊

    Marked as helpful
    1
  • Rimsha•240
    @rimshubSubmitted about 2 years ago

    Hello everyone, here is my solution to the advice generator app challenge.

    Built With

    • JavaScript, Fetch API, HTML5, CSS3

    I wanted to practice fetch api and mobile first so i choose this challenge. It was easy, simple and didn't take much time.

    Question/Need Suggestions

    • How do you guys normally center a div/container? Which method is easiest for you?
    • How do you center it when the width/height is not fixed?

    Looking forward to hearing your feedback! Thank you✨

    Advice Generator - JavaScript Fetch API

    2
    somaye beiranvand•220
    @somaye-beiranvandPosted about 2 years ago

    Hi Rishma

    As I had your problem before I Know what exactly you meen by asking the question.

    In this project it's better to give this settings to body and just put your container inside it.

    body{
width:100%;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

    it't better to give body min-height not a fixed height, so if necessary it can stretch vertically.

    great job on doing the project, happy coding😊

    Marked as helpful
    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted almost 4 years ago

    Hello, everybody! 👋

    This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). 😆

    And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! 😂

    Feedback is welcome and appreciated, of course! 😊

    Happy coding! 😁

    Card Component With 3D Animation

    11
    somaye beiranvand•220
    @somaye-beiranvandPosted about 2 years ago

    Hi APG

    The way you managed the position of background bubbles is amazing. congratulation

    1