Skip to content
OverviewSolutions
27
Comments
10
Abere Fejiro
@Fejiro001

All comments

  • jpcardozx•100
    @jpcardozxSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a visually appealing and responsive layout using Flexbox. The project challenged me to refine my skills with Flexbox, especially when positioning elements in a clean and balanced way. Another aspect I'm proud of is including a link to chess.com, which, although not directly related to a professional purpose, adds a unique touch to the project and demonstrates a bit of creativity and personal interest.

    However, if I were to do this project again, I would focus on further refining the responsiveness across different devices and screen sizes. I would also consider adding more interactive elements to enhance user engagement. Additionally, integrating a more professional link could add more value and relevance to the overall design. Overall, this project was a great learning experience, and I look forward to applying these insights to future projects.

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

    One of the primary challenges I encountered was working with Flexbox to achieve the desired layout and alignment of elements. It took some time to get the spacing and positioning just right, particularly when ensuring the design was responsive across different screen sizes. I overcame this by revisiting Flexbox documentation and experimenting with various properties like justify-content and align-items until the layout felt balanced and aesthetically pleasing.

    Another challenge was deciding how to incorporate a personal touch without deviating from the professional tone of the page. Adding the chess.com link was initially challenging because it seemed out of place for a professional profile. However, I decided to include it because it adds a unique element that reflects my personal interests, making the profile more relatable and memorable. This decision underscored the importance of balancing professionalism with personal branding.

    Overall, these challenges were valuable learning experiences that helped me better understand layout management and the importance of integrating personal interests in a professional context.

    Personal Profile Links | Challange me on chess.com!

    1
    Abere Fejiro•490
    @Fejiro001Posted 4 months ago

    Adding your own personal flair to this challenge was very good. Great job!

    One thing I will add is to give all your projects a meta description; it provides a summary of a page's content that search engines include in search results, which is good for SEO (Search Engine Optimization). For example,

    <meta name="description" content="Put a description here concerning what this webpage is or what it does.">

    Marked as helpful
    0
  • Abere Fejiro•490
    @Fejiro001Posted 4 months ago

    Great work! Since you're using Tailwind, for the card, you can add a thin border using ring and a dark shadow using tailwind shadow which you can customise and hover effect for the active state. This is what I added to my card body:

    ring-1 ring-black shadow-black shadow-[8px_8px] hover:shadow-[14px_14px].

    There is also meant to be a hover effect for the HTML & CSS Foundations title.

    Marked as helpful
    0
  • Abere Fejiro•490
    @Fejiro001Posted 4 months ago

    Great job! Some recommendations:

    • Give all your projects meta description; it provides a summary of a page's content that search engines include in search results. For example, <meta name="description" content="Put your description here.">
    • When linking to sites to get resources like fonts it is highly recommended that you use the preconnect resource hint to establish early connection(s). Example, <link rel="preconnect" href="https://fonts.com">
    Marked as helpful
    0
  • andye•20
    @bv-andreaseSubmitted 9 months ago

    First attempt to design this social links profile from Frontend Mentor. How is the mobile version? Are there any points missing?

    Social links profile using HTML, CSS

    2
    Abere Fejiro•490
    @Fejiro001Posted 9 months ago

    Hi @bv-andrease work solution looks good. I believe if you want more responsive text you should use clamp(). You can read up on it. clamp() allows your text size vary from a minimum to maximum range so your text can be readable no matter the device its on.

    2
  • Abere Fejiro•490
    @Fejiro001Posted 9 months ago

    Good job.

    If you want your solutions to be as close to the design as possible, you can try out the chrome extension "Pixel Perfect".

    Marked as helpful
    0
  • Lukeba•60
    @LukebaKuenoSubmitted 9 months ago

    Every opinion is welcome

    Qrcode

    2
    Abere Fejiro•490
    @Fejiro001Posted 9 months ago

    Hi there good job with the solution. Some things I will point out:

    • Because you gave the card a fixed height height: 70%, the text is overflowing. so just put height: auto;
    • Also for accessibility, it would be better use semantic html rather than div for the card. For the card you can use section or give the div an ARIA role like contentinfo
    Marked as helpful
    1
  • Abere Fejiro•490
    @Fejiro001Posted 10 months ago

    You did well. A good solution to the challenge. Some advice I will give are:

    • Add a JavaScript code for the user to remove the modal that pops up when the user clicks on the background of the website after the submit button is clicked.
    • The rating numbers should be center aligned
    • Its not responsive especially for smaller devices.

    Keep up the good work

    Marked as helpful
    0
  • Nikola Petkovic•90
    @nikolapetkovicdevSubmitted 10 months ago

    -There were no major issues with this task, except for the overlay on the cover image. Prior to this, I didn't know how to do it, but with a bit more research, I managed to figure it out.

    -There were moments when I thought I couldn't do it and considered giving up. However, it's a good thing I didn't. That's why I love coding. Every day, you push your boundaries and enhance your knowledge. Because you can lose everything, but knowledge is something no one can take away from you.

    -Please let me know if there are any mistakes and what I could have done better. Happy coding, everyone!

    Responsive NFT preview card usig HTML5 and CSS3

    1
    Abere Fejiro•490
    @Fejiro001Posted 10 months ago

    Very good solution, love the little animation when hovering over the image. Some things I will love to point out are:

    • The duration of the animation I believe should be shorter
    • Change the cursor to pointer for the image and the two texts that change color when hovering
    • Surround the main element with margin of maybe about 1rem so it looks pleasing to the eye
    • I ran lighthouse on it and it is accessible, but the performance needs improvement

    Keep up the good work !

    Marked as helpful
    0
  • Abere Fejiro•490
    @Fejiro001Posted about 1 year ago
    • Instead of using
    width: 350px;
height: 350px;

    use width: 100% to scale the image according to the device its displayed on

    • Remove height: 60vh from the div and add padding to it to house all the elements
    • Instead of using px for font-size use em to make them more responive
    0
  • HenriettTipi•200
    @BlanchevalenSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is my first mini project, so everything was new for me. Thank you for the challenge!

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

    I don't know what is the good and what is the bad solution. So, the uncertainty is the worse. I believe that i will find the good way.

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

    At this point, I have to beat myself.

    Baby HTML and CSS mini project (QR Code page)

    1
    Abere Fejiro•490
    @Fejiro001Posted about 1 year ago

    • It looks good, but to center the card vertically, you can use justify-content: center.

    • Also wrapping all elements in a div will make it more structured, instead of using the body element as the background of the card.

    • The background color of the browser should be background-color: hsl(212, 45%, 89%).

    • Font family should be "Outfit" which you can get from Google fonts

    Marked as helpful
    0