Skip to content
OverviewSolutions
24
Comments
9
Eugenia Antonova
@EugeniaAntonova

All comments

  • Krishna Rawat•20
    @KrishnarawatethicSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This time I did it faster and learned many things and I would next time try to manage my tags properly to avoid confusion next time.

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

    The challenge was to arrange containers with style tags correctly also some concept related to list styles and table border CSS properties were new and challenging.

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

    I would like me to correct me to how to avoid this image error. I mean whenever I host my pages on GitHub images always never showed.

    Recipe-page || Pure HTML & CSS

    2
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 4 months ago

    Congradulations with the challenge!

    With the image you just need to change a path. You have this now <img id ="img" width ="602px" height="100%" position="absolute" src="/assets/images/image-omelette.jpeg" alt="Burger logo">. And the only thing to change is a dot. Like this: <img id ="img" width ="602px" height="100%" position="absolute" src="./assets/images/image-omelette.jpeg" alt="Delightful omlette you will have">

    Also, it would be much easier for you to use a little bit more semantic markup, and learn positioning techniques. Try with this one to make something like:

    <main> <article> <the rest of the code> </article> </main>

    then you can give the main a display of grid and place-items: center. And your article will be perfectly centerd all the time! You then can add a padding inside the main to give some air at the top and bottom;

    You can even go further and give a display grid to the article. With this you will not have to position the image absolut.

    So, learn more about semantics, grid, flex and semantic classes naming and you will very soon succeed!

    Good luck on your way

    0
  • Eugenia Antonova•400
    @EugeniaAntonovaPosted 4 months ago

    I struggled with the picture. What is the correct way to do it?

    0
  • CatalinaF-S•30
    @CatalinaF-SSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I really enjoyed doing this project and as time goes by I am becoming more agile and faster. I loved the styling I chose :)

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

    Choosing the appropriate and accessible color palette.

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

    I hesitated a bit on the responsive design. I think I need to refresh my knowledge on this subject.

    Social links profile with SASS

    1
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 5 months ago

    Hi and congradulations on this challenge! I really love the color pallet you`ve chose. A tiny bit of advice:

    • in rectangular shapes with not equal sides, like you have here, it is better to use border-radius given in px, em, rem etc. The result you have got now does not seem planned

    • use transitions for almost anything that changes, especially as significantly as background color in your links. It makes the feel of you UI more natural and frieandly to the eye

    • for margins it is a better choice to use margin property. When creating a document flow it is better to make margins from top to bottom and from left to right. In this way you would have h1 margin--bottom: .5em (for instance), .location margin-bottom: 1em (or just twice as the previous one to create connection between name and location and separate slogan as a thing of its own)

    Good luck!

    Marked as helpful
    0
  • Sudharsan-3•60
    @Sudharsan-3Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I made lot of mistakes but i finally made it

    faq-accordion-main

    1
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 5 months ago

    My first accordeon was a tough thing too, congradulations on beating it! It would be much more user-friendly though, if you would make the whole accordeon item a button, so that user would not need to point directly into a little + sign. Good luck!

    Marked as helpful
    1
  • Eugenia Antonova•400
    @EugeniaAntonovaPosted 9 months ago

    Amazing job you did with this challenge!

    I would only say that in terms of semantic the whole card is an article, and its parts are div with background image, h2, p, div with p and link, and then two buttons. The article itself could have made a great flex-container for its children. This way your markup could have been a lot shorter and thus more transparent.

    Good luck!

    0
  • Jack Phat•200
    @PhatJackSubmitted 10 months ago

    Hi there 👋, I'm Jack, and this is my solution for this challenge

    🖥️ Technologies:

    1. HTML
    2. CSS
    3. Javascript

    Thank you!!🤗🤗

    I always appreciate feedback on how to make my code better

    Age Calculator App (TailwindCSS + HTML + JS)

    1
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 10 months ago

    Hello, Jack! Great job, on this challenge, I love how you made your custom validation!

    I would only suggest using more of semantic html, not only divs.

    0
  • Jess•20
    @jessicaalinSubmitted 11 months ago

    Hey community!

    I would love any feedback on the code quality.

    I made sure to incorporate what I read from other comments (use main, h1, alt tag), but are there any other things I missed?

    I also only used the width/height from the Figma file for the text section and didn't use a margin—the only margin I used was on the image; is this fine?

    Thank you so much :)

    QR code component with CSS Flexbox

    2
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 11 months ago

    Hej, Jessica! I really love your work! I would only consider to get rid of unnessesery wrapper (.text) and this pice of css

    .text {
   display: flex;
   height: 129px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
   flex-shrink: 0;
}```
hard-coding height is not a good practice, as far as i know. and you don`t really need flex to vertically align text elements - they both have display: block natively - so they take the whole line anyway and align one under another beautifully. 

just give margins from top to bottom and everything lines up as you need!

wish you all the best in your career!
    Marked as helpful
    0
  • CloudOfAlemar•200
    @CloudOfAlemarSubmitted 11 months ago

    Hello everyone, I just completed the FAQ Accordion Frontend Mentor Challenge. It was fun building this component. I really enjoyed using Javascript to dynamically set the max-height of the li elements to hide its content. I really took my time to make sure that some small functionality details were handled as best as possible, which made me use the ResizeObserver API to fix some issues when the screen was being resized. I had lots of fun building this component overall, please let me know if there is anything I can improve on, thank you! :D P.S - I didn't use the design files for this project :p

    FAQ Accordion

    2
    Eugenia Antonova•400
    @EugeniaAntonovaPosted 11 months ago

    Hello! I really like your solution and as i am a newbie, i have more of a question, than advise: why did you decide to put background images directly into the murkup and not to use background-image? I read it is better practice

    0
  • Eugenia Antonova•400
    @EugeniaAntonovaPosted 11 months ago

    Hej, Victor!

    I really love your work. I am a newbie too, but still have a little bit of advise for you, if you agree to take it:

    this piece of css makes a little scence

    .text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  text-align: center;
  align-self: center;
}

h3, p {
  width: 85%;
  align-self: center;
}

    you could have achieved the same result with less efford, if you would have given padding: 15px; to the container and text-align: center; to the text elements. You can also get rid of unnessesery wrapper .text - it is only needed to center and give a gap to the text elements, which is achieved as i mentiioned before + margin-bottom.

    Wish you a good luck in your career!

    0