Skip to content
OverviewSolutions
4
Comments
4

Egor Pyankov

@egorpyaPerm Krai, Russia60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Re-learning web development (front-end and back-end) with intention to get a job! Also re-learning how exactly to job =)

Latest solutions

Latest comments

  • Egor Pyankov•60
    @egorpya

    Hi, great job on making this site! HTML looks good to me, except for "Preparation time" block, <p> parent container feels off. But the practice makes perfect, so it is not a big mistake.

    With CSS, there are several things I want to mention:

    1. The website should be viewable on mobile devices, as pictured on design/mobile-design.jpg in your repo.
    2. In .recipe, you used Flexbox with flex-direction: column. But it is not needed, the page still looks the same after turning display: flex off.
    3. The elephant in the room: <main> is not centered. I've spent 30 minutes trying to solve this, and I got my answer:
    body{
  min-width: 375px;
  max-width: 1440px; /* <--- that! you sneaky sneak!*/
}

    You should not under any circumstances do this to any-<body> - setting size with 'px' that is. Just use width: 100%.

    Marked as helpful
  • Ezemaolisaemeka•50
    @Ezemaolisaemeka
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I was able to complete the layout to closely match the design, especially making it fully responsive using only HTML and CSS. I also liked how I managed the spacing, alignment, and used flexbox to position elements cleanly.

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

    One of the main challenges I faced was centering the content vertically and horizontally on the page. At first, I struggled with margin and padding, but I eventually solved it using display: flex with justify-content and align-items to center everything properly.

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

    I’d like feedback on how to improve responsiveness, especially for very small or large screens.

    Social links profile using CSS

    2
    Egor Pyankov•60
    @egorpya

    Hi, good job on the project!

    Several things I want to mention:

    • Do not use <button> tag for links, use <a> instead. Buttons should only be used inside <form> or when a function should be activated.
    • button:hover does not include changing color to grey, as shown in design images.
    a:hover{
  background-color: var(--green-color-from-style-guide);
  color: var(--grey-color-grom-style-guide)
}
    1. You can set border-radius with percentages, like this:
    #avatar{
  border-radius: 50%; /* crops <img> to circle*/
}

    Aside from that, you did a really good job! Keep it up!

  • Shikur•160
    @shikurassefa
    What are you most proud of, and what would you do differently next time?

    one of the thing i proud is trying to keep forward.in the next time i focus on react project once i master a css project to design really really amaizing website because functionality is not enough for the page but also beatuiful interface is must.

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

    i got a challenge on how to style svg element but thankyou for CloudCovert online rsource it change for me into a jpg format

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

    as an extra i wana be a ui/ux designer in order to create work opportunity and if you know the best resource please recommend

    responsive blog-preview

    1
    Egor Pyankov•60
    @egorpya

    I have no idea why Frontend Mentor is showing this solution to me, given that you already 7 months in learning. Well, it's really nice that you did not give up and continued learning!

  • Fernando Andrade•10
    @FSA-1606
    What are you most proud of, and what would you do differently next time?

    Com esse projeto, aprendi a estruturar um componente simples usando HTML e CSS de forma responsiva e acessível. Também pratiquei o uso de Google Fonts para melhorar a tipografia e entendi a importância de caminhos corretos para imagens em projetos hospedados no GitHub Pages. Além disso, melhorei minhas habilidades de versionamento com Git e publicação na plataforma GitHub Pages.

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

    O maior desafio foi garantir que a imagem do QR Code fosse exibida corretamente no GitHub Pages, o que exigiu ajustes no caminho do arquivo para se adaptar à estrutura da hospedagem. Também enfrentei algumas dificuldades para configurar o repositório Git local e remoto corretamente, mas resolvi com comandos específicos para remover e adicionar a origem remota.

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

    Gostaria de receber feedback sobre a organização do código e a melhor forma de estruturar os arquivos para projetos estáticos simples. Também tenho interesse em dicas para melhorar a acessibilidade do componente e para tornar o layout mais responsivo em dispositivos variados.

    Propriedades personalizadas do CSS, Marcação HTML5 semântica

    #accessibility#stylus
    1
    Egor Pyankov•60
    @egorpya

    Good job! Keep it up!