Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
3
Emerson-Henrique
@Novicks

All comments

  • Muhamad Rukhul Kirom•380
    @rukhulkirom
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how clean and well-structured the code is, making it easy to read and maintain. The dark theme with contrasting green accents creates a visually appealing and modern look. Using Flexbox ensures proper alignment and responsiveness, while the smooth hover effects on the social media links enhance user interaction.

    Next time, I would introduce CSS variables for colors and avoid redundant styling by grouping common properties. These improvements would make the project more scalable, user-friendly, and easier to update in the future.

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

    One of the challenges I encountered was ensuring that the card design remained responsive across different screen sizes. Initially, the card looked great on larger screens, but on smaller devices, some elements felt cramped. To overcome this, I used flexbox to center the content properly.

    Another challenge was making the social media links visually appealing while maintaining good accessibility. At first, the hover effect didn’t stand out enough. I refined the styling by adding a background color change and a slight contrast shift, ensuring better user interaction.

    What specific areas of your project would you like help with?
    1. Responsiveness & Mobile Optimization – The design looks good on larger screens, but I want to ensure it adapts well to all devices. Are there better CSS techniques I can use to improve responsiveness, especially for very small screens?

    2. Hover & Focus States – I added hover effects to make the buttons more interactive. Do they feel intuitive, or are there improvements I could make to enhance the user experience further?

    3. Code Optimization – I tried to keep my CSS clean, but I feel there might be redundant styles. Are there any ways I can refactor my CSS to make it more efficient and scalable, perhaps using CSS variables or utility classes?

    Responsive Social Links Profile using CSS Flexbox

    #pure-css#web-components#accessibility
    2
    Emerson-Henrique•50
    @Novicks
    Posted 6 months ago

    Your code is well structured, but you just need to pay attention to some lines that sometimes end up being repeated in your style.css, such as .social-media ul li a or display: inline-block is repeated twice, which ends up being redundant.

    1- For better responsiveness on different screen sizes, I recommend using the @media screen and (min-width or max-width) CSS, which changes part of your application's style at certain width measurements, allowing your application to adapt to different screen sizes. I recommend that you structure your site with the mobile version in mind first, so that when you use the media query to adapt the layout from mobile to computer, it will be easier and simpler to adapt the elements to a larger screen.

    2- The hover and focus states are great, congratulations on your work.

    3- When it comes to optimizing style.css, I recommend that you always try to check if certain lines of code are already found in parent elements of the object you are styling so that there is no code redundancy, but your code in general is optimized and very clean.

  • Fakeye Tami•30
    @FakeyeTami
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?
    • Successfully built a clean and accessible blog preview card.
    • Used CSS variables to maintain consistent colors and typography.
    What challenges did you encounter, and how did you overcome them?

    Had trouble aligning it properly but fixed it by setting align-self: flex-start;.

    What specific areas of your project would you like help with?
    • I’d love feedback on reducing font sizes and spacing for better responsiveness—I’m not very confident in responsive design.
    • Any tips on making box shadows look cleaner? Also, how does my code look overall?

    Blog Preview Card [ SEMANTIC MARKUP + VANILLA CSS + FLEXBOX + RESPO

    #accessibility#bem#pure-css
    1
    Emerson-Henrique•50
    @Novicks
    Posted 6 months ago

    In general, your code is well structured, I don't think there is much to worry about responsiveness, as your solution is very responsive, good work!

  • ErasmoCR02•50
    @ErasmoCR02
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Me orgulho em ter conseguido interpretar e replicar o projeto do primeiro desafio. Acredito que com os aprendizados superados pelo desafio teria uma ótica diferente para os próximos.

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

    Meu maior desafio foi a estilização com CSS ver todas as propriedades até aqui estudadas sendo realizadas na prática, e como elas funcionam nas soluções dos desafios

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

    A minha parte com maior dificuldade foi deixar o site responsivo, isso, infelizmente não consegui realizar, precisaria de ajuda neste sentido

    Meu primeiro desafio front and mentor com HTML e CSS

    #pure-css#workbox#bootstrap
    1
    Emerson-Henrique•50
    @Novicks
    Posted 6 months ago

    Em geral, ficou bom, minha dica e ver as recomendações de tamanho contida no style-guide do projeto, e estudar um pouco mais afundo as propriedades css para alinhamento. E em questão de responsividade, recomendo que começe primeiro desenvolvendo para sistemas mobile e depois faça a adaptação para desktop, onde terá o uso de mais estilizações e recurso, para uma melhor responsividade busque criar container flexbox, e um pouco dificil de utilizar no começo, mas com um pouco de pratica você compreende ele por total, utilize de valores em porcentagens para que o site correspanda ao tamanho da tela do usuário.

    Marked as helpful

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