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

Abere Fejiro

@Fejiro001Nigeria490 points

Hi, my name is Fejiro but you can call me Stephanie. I recently graduated from university with a degree in Computer Engineering. I love crafting beautiful and responsive sites and I am excited to continue building on my skills using Frontend Mentor.

I’m currently learning...

JavaScript, Sass, React, TailwindCSS, Laravel, ASP.NET Core MVC

Latest solutions

  • Contact Form using React and React Hook Form

    #accessibility#react#lighthouse

    Abere Fejiro•490
    Submitted 8 months ago

    0 comments
  • Testimonial Grid Section (Vanilla CSS)

    #accessibility#lighthouse

    Abere Fejiro•490
    Submitted about 1 year ago

    0 comments
  • FAQ accordion card (Vanilla CSS)

    #accessibility#lighthouse

    Abere Fejiro•490
    Submitted about 1 year ago

    1 comment
  • Intro Component with Signup Form (Vanilla CSS)

    #accessibility#lighthouse

    Abere Fejiro•490
    Submitted about 1 year ago

    I believe I achieved what I set out, so I do not need help for this project.


    1 comment
  • Base Apparel Coming Soon (TailwindCSS)

    #lighthouse#tailwind-css#accessibility

    Abere Fejiro•490
    Submitted about 1 year ago

    0 comments
  • Article Preview Component (TailwindCSS)

    #accessibility#tailwind-css#lighthouse

    Abere Fejiro•490
    Submitted about 1 year ago

    0 comments
View more solutions

Latest comments

  • jpcardozx•100
    @jpcardozx
    Submitted 10 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!

    #accessibility
    1
    Abere Fejiro•490
    @Fejiro001
    Posted 10 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
  • irfan hendianto wijaya•30
    @irfanwijaya
    Submitted 10 months ago

    blog preview card

    #tailwind-css
    1
    Abere Fejiro•490
    @Fejiro001
    Posted 10 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
  • sfschiavetto•100
    @sfschiavetto
    Submitted 10 months ago

    Responsive landing page

    #accessibility#bootstrap
    1
    Abere Fejiro•490
    @Fejiro001
    Posted 10 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
  • andye•20
    @bv-andrease
    Submitted over 1 year ago

    Social links profile using HTML, CSS

    2
    Abere Fejiro•490
    @Fejiro001
    Posted over 1 year 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.

  • Lukeba•140
    @LukebaKueno
    Submitted over 1 year ago

    Omelette responsive

    2
    Abere Fejiro•490
    @Fejiro001
    Posted over 1 year 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
  • Lukeba•140
    @LukebaKueno
    Submitted over 1 year ago

    Qrcode

    #bootstrap
    2
    Abere Fejiro•490
    @Fejiro001
    Posted over 1 year 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
View more comments
Frontend Mentor logo

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