Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions30Comments11

All comments

  • P
    Diogo Luxa• 50

    @DiogoLuxa

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm pleased with the outcome, this, in my opinion, is my best project so far as I've been improving my approach to building HTML in an organized way, as well as working more efficiently with vanilla JavaScript before advancing to React.

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

    Challenges included considering keyboard usability and card rotation.

    Interactive rating component with vanilla Javascript

    #sass/scss#bem

    1

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @DiogoLuxa!

    Congratulations on completing this FrontendMentor challenge! Well done!

    • Only one teeny tiny observation: You can apply a justify-content: space-between property on the .card__buttons class as it already has a display: flex; property applied, so the rating buttons will not be alligned to the left. It would be a better user experience.

    Keep up the good work!

    Marked as helpful

    0
  • P
    Aydan• 420

    @AydanKara

    Submitted

    What are you most proud of, and what would you do differently next time?

    • I pride myself on getting as close to the design as possible.
    • Next time I'll try to use as few div tags as possible.

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

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

    I think I did pretty well with the challenge. But of course I would appreciate feedback of any kind.

    Newsletter sign-up form with success message solution HTML, CSS, JS

    #accessibility

    1

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @AydanKara!

    You did a great job on this challenge!

    One observation of mine:

    • You can add a small padding-inline css property to the body tag (2-5vw) so the conent does not stick to the side of the viewport on medium screensizes (such as 800px).

    Keep up the amazig work!

    Marked as helpful

    1
  • Mariana Mandziuk• 40

    @mmandziuk

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I integrated various CSS techniques to create a visually appealing and responsive blog card design. Using flexbox layout, custom fonts, hover effects, and media queries allowed me to craft a polished and user-friendly interface.

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

    One challenge was maintaining consistent styling across various screen sizes, which I addressed through extensive use of media queries. Integrating custom fonts with @font-face posed initial hurdles, but I optimized font loading and cross-browser compatibility to overcome this challenge.

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

    I'd appreciate assistance with optimizing my CSS code for improved performance and maintainability, as well as exploring advanced CSS techniques to enhance the user experience further.

    responsive visit card using CSS Flexbox, Hover Effects, and Object Fit

    2

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @mmandziuk!

    Your solution is very similar to the original design! Nice work!

    • As I see, you mainly use px units to font-sizes and other layout related properties. I recommend you to check out rem and em units. It is better for accessibility. Watch this video on how to choose your unit on each property.

    Marked as helpful

    0
  • hannibal1631• 40

    @hannibal1631

    Submitted

    What are you most proud of, and what would you do differently next time?

    I structured the divs much more clearly this time ig.

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

    NA

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

    If anyone can explain to me in short how does the length of the webpage works and how i can customize it, on which elements it depends. please help.

    Recipe-Page-Hannibal

    2

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @hannibal1631!

    Congratulations on finishing this FrontendMentor challenge! Well done!

    • The glitch you mentioned is caused by a list-style-position: inside; property on your <li> element. That makes the list marker part of the li element and moves with it when you apply a margin or padding property on the <li> element. Also you set a margin-left: 10px only on the <strong> element in the list item so only the <strong> element is pushed to the right. Use the margin-left on the <li> element (delete the strong word from the css selector) and delete the list-style-position: inside; property.
    • Also I recommend you not to use px unit on font related propertie as it is not accessible. Visually impaired people use their browser with large font settings, and px units do not adjust to this browser setting. Have a look at rem and em units. Use px units only on border-radius, box-shadow and such properties as their visual do not effect readability.

    Keep up the good work!

    Marked as helpful

    0
  • Letícia Fernanda• 90

    @Leticiafbm

    Submitted

    What are you most proud of, and what would you do differently next time?

    I used grid to make the part with the annual plan and I thought it was cool but theres probably an easier way to do it

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

    To make it responsive

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

    The image inst loading i need help with that

    Responsive order summary

    2

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @Leticiafbm!

    Congratulations on finishing this frontendmentor challenge! Nice work!

    The image isn't loading because you missed a dot in the src attribute. You need this: src="./images/..."

    Marked as helpful

    0
  • Oppqwjk• 60

    @Oppqwjk

    Submitted

    What are you most proud of, and what would you do differently next time?

    I tried my best, I didn't knew how to put the atribute at the bottom so it staid like that haha.

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

    Nothing really, maybe the padding of the buttons but I used width 100% and it was fine.

    Social-Links-Flexbox

    1

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @Oppqwjk!

    Congratulations on completing this frontendmentor challenge! Well done!

    • As the attribution section is not a vital part of the challenge, you can move it to the bottom of the screen with a position: fixed; bottom: 0; combo. However, the best workaround for these fits-in-screen-without-scrolling challenges, in my opinion is to set the component's container to min-height: 100vw; instead of setting it to the body element, so it will push down the attribution section to the bottom of the page by default.
    • Also I recommend to you to use semantic markup elements for better accessibility, such as <main> <section> <article> and for social links <ul> and <li> <a> elements and also you can wrap the .attribution section into a <footer> element. Newby challenges do not require semantic markup, but it is best to use any possibility to practice them and their use. Semantic markup elements have the same functionality as divs but they have a structural and grammatical meaning for screen-reader programs.
    • For social links I would use the above mentioned <ul><li><a> combo, as they are links. I only use buttons for form submitting or for actions that do change(s) to the current page's state and not redirect you to another page (such as "mark all as read" if we are speaking of notifications or messages).
    • You have set the img width and height to px units. It is better to change them to their rem equivalents, so they grow with the font-size, when the user changes the browser's font size (CTRL+num.plus). This video helped me a lot to decide when to use which unit: video

    Best wishes!

    0
  • Godbless Ikadoi• 90

    @TariCodes

    Submitted

    What are you most proud of, and what would you do differently next time?

    Its was quite an intriguing project, it sharpened my knowledge on how to use the :focus pseudo selector and the transition property. I'd like to learn how to start my projects with mobile first as I am still learning the process of responsive web design

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

    If it would be possible I'd like to get a positive feedback on how to use the new units such as the dvh unit its still unclear to me.

    Responsive social link card using css flex

    #accessibility

    1

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @TariCodes!

    Congratulations on completing this challenge! Nice job!

    • Firstly, let me advise you to put an inline margin on your <main> element, so it does not touch the side of the screen on smaller screen sizes.
    • Secondly, the dvh, as I could understand, is a dynamic viewport unit. Its most useful area is on mobile devices, where the upper section of the browser is being hided when scrolling down the page, and showed again when you scroll up or reach the page's top. The dvh detects the when the browser's upper section is being hided/showed. Technically when the upper section is showed, 1dvh = 1svh, and when it is hided, the 1dvh = 1vh.

    Best wishes!

    Marked as helpful

    1
  • Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello @ahmed-shahat!

    Congratulations on nailing this challenge. The mobile size is almost the copy of the design.

    Let me write here my observations:

    • You can improve the semantic markup. Usually the header, main and footer tags are separate from each other. You should not wrap them into one div. The header element in general holds the logo and the navigation bar and other elements that are always on top of every page of the site. For components like this whole challenge's card can be a whole section because it's content are semantically meant to be together.
    • You used max-width: 29% on the .container class. It makes the page fall apart on smaller screen width above 375px. You can improve it if you wrap this 29% in a max function like: max-width: max([x]rem, 29%); But it is better to define a min-width: [x]rem, and define a width: 29%.
    • Above 1500px screen width, the hero section picture get narrower then the whole component. You capped the img element to max-width: 100%, which is good in general, but you can define a .header-img {width: 100%} to eliminate this artifact.

    Best wishes!

    Marked as helpful

    0
  • Adann Jacinto• 770

    @DanCodeCraft

    Submitted

    What are you most proud of, and what would you do differently next time?

    This is my second project, and I could figure it all out with little help.

    I'm also very proud that I could think ahead and plan the project from beginning to end before starting to write my first line of code.

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

    I wasn't sure how to make the project to fit a smaller screen (375px) and I opted to start from the desktop version.

    I used media query to have the job done, and it worked perfectly.

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

    I think I got everything right. However, I'm very open to criticism.

    Blog Preview - HTML + CSS + media query

    3

    Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hi @DanCodeCraft!

    I like your solution and thanks again for checking out mine!

    One minor observation of mine:

    • On smaller screensizes, the illustration image should be cropped when the card is not wide enough to contain it.

    As you mentioned: "I wasn't sure how to make the project to fit a smaller screen (375px) and I opted to start from the desktop version."

    • You can do it by not using media queries as the layout does not change on different screensizes, only font-sizes get smaller on smaller screens, but it does not mean that your approach is not good. I am a big fan of intrinsic design and love to use the clamp, min and max functions especially the clamp function, where you define an absolute minimum, an absolute maximum with a fix unit and an ideal in-between value with a dynamic unit such as: clamp(1rem, 5vw, 2rem); Check out this workflow if you like the idea :)

    Keep up the awesome work :)

    Marked as helpful

    1
  • Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello there!

    Congratulations on completing a new FrontendMentor challenge!

    A few observations:

    • The purple background section is part of your main content, it is better to place them it the <main> section istead of the <header> section. The <header> section is for mainly header informations such as a nav-bar, the logo of a company if you are making a site for a company etc.
    • The page doesn't have any styling below 320px viewport width. It is not necessary to enclose all you styling in a media query. The best practice is to start at one end of the viewport width range that you are planning to handle without any media-queries, look at it as your base styling, and make your way through to the other end of the viewport width range. The most used practice is the mobile first approach when you start with the smallest screen width. Just be consistent :)
    • The summary data is directly in the <main> section. It is advised to put your content in container tags (preferrably semantic markup elements, such as <section> and <article>). You can imagine it like this challenge's whole content is one component on your page contained by a <section> element and in that the two halves are each contained by an <article> element.
    • You can make use of more classes on your elements. It is better to get used to them in the long run. Such as styling of the "Great" text you can wrap it in a <h[1-6]> tag, or give it a class like <p class="large-text"> for easier identification. This way you don't have to select the normal text ("You scored higher than...") with a p+p combinator. Just keep it as simple as possible. Also it is easier to make changes later if you know which css selector selects which element.

    I hope I helped a little on your frontend journey :)

    Best wishes! kemenyfa-szu

    Marked as helpful

    0
  • Bálint Korpai• 580

    @kemenyfa-szu

    Posted

    Hello there!

    Congratulations, on completing a new FrontendMentor challenge!

    My observations:

    • This is a perfect challenge to practice the usage of <details> and <summary> tags. They bring the hide/show answer capability by default. Give them a try. In addition the summary tags are focusable by pressing the tab key and show/hide the ansers when pressing the enter or space keys.
    • If I hover/click the question they don't act like it is written in the brief of the challenge, you can use the :hover, :active and :focus pseudo classes to reach this goal.

    Also I love those animations, they bring life to your work. Awesome job!

    Best wishes! kemenyfa-szu

    Marked as helpful

    1