Skip to content
OverviewSolutions
26
Comments
16
Marley Semende
@Marley-Semende

All comments

  • Marley Semende•570
    @Marley-SemendeSubmitted 9 months ago

    Hey there, Frontend Mentor Community! 👋🏾. I just completed another project, and I'm excited to share it with you. This time, I tackled the [Interactive Notifications Page] challenge, and it was quite the learning experience. In this project, I utilized a combination of technologies, including:

    🚀 HTML 🚀 CSS 🚀 Vanilla JavaScript I used vanilla JavaScript to create functionality that allows users to mark notifications as read.

    Challenges & Learnings: Working on this project posed some interesting challenges, However, through persistence and resourcefulness, I overcame them and gained valuable insights.

    Key Features

    • Mark as Read Functionality:
    • Notification Count

    Responsive Design: I implemented responsive design techniques, including the use of @media queries for smaller screens.

    Feedback: I'm always looking to improve, so feel free to leave your feedback and suggestions. Your input is invaluable! Happy coding! 😊

    Notifications Page built with HTML, CSS and JavaScript

    2
    Marley Semende•570
    @Marley-SemendePosted 9 months ago

    Thank you!

    0
  • Omar•140
    @Omar-MiledSubmitted 9 months ago

    I had a difficult time with responsive design after I made the desktop version and then i realized i should make a phone version also and i had a difficult time editing it so i gave up after searching a whole day but here's the desktop version. I had difficult time choosing between whether i should do it with flex boxes or grids since still kind of learning the difference and where to implement them exactly. Any comments about my command choices and the structure of my code will be highly appreciated.

    Recipe page

    1
    Marley Semende•570
    @Marley-SemendePosted 9 months ago

    Hello @Omar-Miled. Your site looks good on big screens, for smaller screens styling you can use the CSS Media queries. Below are some free resources where you can learn about media queries and how you can start using them in your projects: https://css-tricks.com/a-complete-guide-to-css-media-queries/ https://www.w3schools.com/css/css3_mediaqueries.asp And I highly recommend this free course below:

    https://courses.kevinpowell.co/conquering-responsive-layouts I hope this will be helpful. Happy coding:)

    Marked as helpful
    1
  • dpiskov•50
    @dpiskovSubmitted 9 months ago

    Hello! I spent like 2 hours writing the css for this page, thinking and trying to find out how to do certain things! I learned something new after all and that was the whole point of the practice!

    I really need help with media queries and making this page responsive on mobile! I am taking any suggestions, tutorials, guides, etc... on how to improve. I've watched a couple tutorials, but I can't understand a thing about responsive web design and media queries, I guess I just need more time and practice!

    I'm still very new to html and css, only 1 month in, so I'll appreciate any advice on how to improve my skills.

    P.S. I just noticed the fonts doesn't work after I uploaded the site. Any guesses as to what could be the cause?

    Recipe Page

    1
    Marley Semende•570
    @Marley-SemendePosted 9 months ago

    Hi @dpiskov. Nice work! Here is my recommendations for learning responsivity. Checkout this free course by Kevin Powell. It really helped me when I was struggling with responsive layouts. I highly recommend checking it out if you havent already. https://courses.kevinpowell.co/conquering-responsive-layouts And also I use an app called Responsively, it's a great tool for checking if your sites are responsive. Happy coding:)

    Marked as helpful
    1
  • Marley Semende•570
    @Marley-SemendePosted 9 months ago

    Hi @Lawrencekalaw. nice solution! I found a few issues with your css. In your .container{} you used properties like justify-content and align-items but I noticed that your .container{} is not defined as a flex container. To define a flex container you need to set the display: flex; first. However according to the structure of your HTML file, .home{} is the one to be defined as the flex container not . container{}. Another thing I noticed is that in your media query your .home{} margin is set to 30px 500px 0. This margin may cause .home{} to extend beyond the viewport width on smaller screens. You should adjust the margins to fit the smaller screen sizes.

    Marked as helpful
    0
  • Lerato•60
    @Lerato123Submitted 10 months ago

    Seems I struggle with responsiveness. Please suggest ways I can master it, well not master but better understand how to work with responsiveness

    Social-proof-section

    3
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @Lerato123. This free tutorial by Kevin Powell, really helped me master responsiveness. I recommend checking it out if you havent already. https://courses.kevinpowell.co/conquering-responsive-layouts

    Marked as helpful
    1
  • Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @EdwinMugo, nice work! In-order to position the button correctly you can make use of the CSS Position property. For example:

    section {
position: relative
} 
button {
position: absolute
/*then you can make use of the top, right, left, bottom properties accordingly in the way you want to position your button */
}

    You can check out this resource to learn more about the CSS Position property: https://developer.mozilla.org/en-US/docs/Web/CSS/position I hope this helps. Happy coding :)

    0
  • Rohan deshmukh•70
    @Rrdesh07Submitted 10 months ago

    1] The main problem i was having when i was desinging the desktop version and there the height of body i had given 100 vh and for main i gave 100% it was working fine there , but when i was resizing for the smaller view the footer was coming up between 4 and 5 testimonial card and there i changed the body height to 100% and it got corrected but why it is like that why didn't the 100 vh worked there , can some one explain me that ? 2] any other suggestions also if requires

    By using Html and css flexbox and css grid

    1
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @Rrdesh07. The issue you encountered with the footer appearing between testimonial cards when resizing for smaller views may be related to the use of height: 100vh for the body and height: 100% for the main container. The problem arises when the body height is constrained to 100% of the viewport height, and there might be other elements such as headers, footers, or margins that are also taking up space. When you set height: 100% for the main container within the body, it means the main container will take up 100% of the height of its parent, which is the body in this case.

    You might consider using min-height: 100vh

    instead of height 100vh on the body, as using min-height on the body guarantees that the body will be at least as tall as the viewport height, but it can expand further if needed to accommodate its content.

    I hope this helps. Happy coding:)

    Marked as helpful
    1
  • Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @noelhoppe. Nice work on your project. I checked out your CSS and I noticed that your hover: rule is targeting the <li> elements when hovered, but it's not targeting the <a> (anchor) elements within those <li> elements. If you want to change the text color of the links when hovering over the list items, you should adjust your CSS like this for example:

    li:hover {
    background-color: green;
}

li:hover a {
    color: black;
}

    I hope this helps. Happy coding :)

    Marked as helpful
    0
  • PrimeHouston•30
    @PrimeHoustonSubmitted 10 months ago

    I think my main question for this challenge is how can I make mobile viewing better? I tried to open this page on my phone and it seems like the main part of the site is too big for mobile-viewing causing it to be cut off on the left side and blown up too big. Any help is appreciated!

    Order Summary Challenge

    1
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @PrimeHouston. Nice work on your project. You can add CSS media queries to adjust your styling for different screen sizes. Here are some resources I found quite helpful with learning responsive layouts and the CSS @media :

    • https://courses.kevinpowell.co/conquering-responsive-layouts

    • https://www.w3schools.com/css/css3_mediaqueries.asp

    Marked as helpful
    0
  • Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @Karimullabegamch. To arrange name and image in the same line in CSS you can achieve that using a combination of the display property and inline value and you can also use the vertical align property to ensure that they have the same alignment vertically, for example :

    .name {
display: inline;
vertical-align: middle;
}

    This should give you your desired results. I hope this helps.

    0
  • Abdulrazaq-Abunuqta•10
    @Abdulrazaq-abunuqtaSubmitted 10 months ago

    Solving problems and enhancing front-end development skills, BoxShadow ,Training on Flexbox,Designing HTML structure.

    HTML - CSS - Flexbox

    2
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @Abdulrazaq-abunuqta. Nice work overall on your project. However you can make use of the align-items property to align items along the cross axis. This would center your card vertically. For example:

    main {
min-height: 100vh;
align-items: center;
justify-content: center;
}

    I hope this helps. happy coding :)

    Marked as helpful
    0
  • SharmarkeAhmed12•10
    @SharmarkeAhmed12Submitted 10 months ago

    What are the best code practices that I should adopt in my codes. How can I increase my level of competence in regards to designing UI and implementing my designs using different frameworks. Which framework should I learn in order to further my skills.

    Qr Component using HTML and CSS

    2
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    Hi @SharmarkeAhmed12. Nice work. Adding a border radius to your QR image will make it look as much closer to the original design.

    1