Skip to content
OverviewSolutions
8
Comments
10
Carsten Körner
@carstenkoerner

All comments

  • jasoneczek•320
    @jasoneczekSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy that after much trial and error my solution is responsive, seems to be working correctly on different browsers and devices, and that I learned new techniques while practicing and reviewing others. I know its only a Newbie challenge, but for me it wasn't easy.

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

    It was difficult to extend and center the hero image to be wider than the viewport width without causing horizontal scroll. Ultimately, I applied 110vw to the image (wrapped in a picture element) with -5vw margins left and right for mobile and tablet screens. The desktop image is different in that it is 2 image that surround the text, still escaping the bounds of the viewport. Using grid, I set the display to none for the right side image on small screens, and display block when it reaches the desktop width.

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

    I would really like to know if my use of and tags is ok for this project. Especially this piece of code in the hero section:

    and within the hero I have this ``:

    Group Chat for Everyone

    Meet Landing Page with Grid, Flexbox, and Fluid Type

    1
    Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Hi, great work. Looks very good.

    I see that you have found a solution for the hero image. I will try that in my project right away.

    I can't give you any suggestions for improvement but maybe you would like to have a look at BEM. This is a methodologies to clearly structure CSS classes for a better overview.

    0
  • Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Nice work, looks god.

    • I saw that you linked the font but didn't assign it.
    • Otherwise you could leave out the first breakpoint at 375px if you give the cards a max-width.

    JM2C

    Marked as helpful
    0
  • Sharm•40
    @sharms-mySubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting used to using Flexbox and somehow understand how it should be used. I incorporated sass variables to the stylesheet for the repeated color.

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

    Following the correct sizes of the elements (card padding, margin, image size) is not easy when you don't have figma. Keen eye to details is very much needed here.

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

    I would appreciate any feedback on the proper structure of html. I am still not confident if I am using the right tags for each element.

    Social Links Profile - SASS & FlexBox

    2
    Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Your solution looks very good. Recognizing and rebuilding the correct dimensions without Figma is not easy, especially at the beginning. But it will get better with time.

    Regarding the HTML structure, the only thing I noticed is that you could choose a heading for the name (e.g. h3). Otherwise, it is important for accessibility that you also define a focus in addition to the hover. This helps disabled people when they scroll through the elements on a page using the Tab key on the keyboard.

    JM2C

    Marked as helpful
    1
  • mendesdomingosdev•110
    @mendesdomingosdevSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I could do it without figma files, I got a bit perfectionist with pixel while doing it. 🤣

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

    I think that was using Sass for a really small project where I tried to separate everything as for a large project.

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

    Right know I don't know much, but I hope you will find something strange in my project to help me improve. 🤣

    Social Links Profile with SCSS

    2
    Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Your result looks really good. Great work. I'm not a professional yet, but if you'd like some tips, I can tell you the following.

    • You are working with several scss files. You should set your tool for compiling so that only one css file is created, which then contains everything.
    • For more accessibility on your pages, you can also set a focus on links. This helps people who use the keyboard and the tab key to scroll through the links or input fields on the page.

    JM2C

    Marked as helpful
    1
  • Garg2006•250
    @Garg2006Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    Responsiveness

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

    nothing

    Responsive Four Card Preview

    1
    Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    The headings in the cards do not have the correct color and the cards are slightly larger in the desktop view of the design template. Otherwise it looks very good.

    0
  • Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Hi, your solution looks really good and the responsive design works fine. I would just switch to the desktop view a little bit earlier (not at 1024px.). But that's my subjective opinion.

    1
  • felipenwn•10
    @felipenwnSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i think my site looks like the original design and i'm proud of it, but i need to study more to make less work around

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

    mainly the spacement challenges, because i didn't sutied about the paddings and margins yet but i can get by this situation

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

    there is a nutritional table in the last portion of the site, i couldn't figure out how to solve the spacament problem, because in the original design there is a medium gap between the words and the numbers, and i could only think in the property : justify-content: space-between; but this property made a big gap between the contents and that wasn't what i was looking for

    Responsive html page using only html and css resources

    1
    Carsten Körner•170
    @carstenkoernerPosted 7 months ago

    Hola, that looks really good. For the nutritional value table I worked with a real html table and not a flexbox. I set the table with 2 rows to 100% width and thus had the right spacing. Your responsive.css works well. Unfortunately only up to a width of 375px. From 376px to approx. 770px the responsive design unfortunately does not work. Better leave the responsive css active up to 450px and limit your recipe card with max-width. Then it adapts to the width of the viewer until the responsive.css finally takes effect.

    JM2C

    0
  • Savvas Chrysostomidis•820
    @savchrisostomidhsSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Social links profile with HTML and CSS

    1
    Carsten Körner•170
    @carstenkoernerPosted 8 months ago

    Hi, good work. Looks nice. Here are a few details:

    1. For a better overview, you might want to move the CSS code to a separate CSS file.
    2. Better use h2 for the name here. h1 should only be used for a real heading.
    3. The card is not centered vertically.
    4. Do not use max-height for the card. The content must define the height of the card.
    5. Set a margin around the card so that there is still a gap between the card and the browser frame on narrower screens.

    JM2C

    1
  • Moises2710•190
    @Moises2710Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I want to do differently next time my flexbox because I feel that I can take it better.

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

    This challenge was very easy so I didn't encounter it.

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

    I would like to receive help in my knowledge about responsive design.

    card-main with flexbox and responsive design.

    1
    Carsten Körner•170
    @carstenkoernerPosted 8 months ago

    Hola Moises2710,

    your solution looks very well. I just have a few comments.

    1. Use more meaningful class names. section_1, section_2, etc. can't help other people reviewing your code. Have a look on the BEM methology.
    2. You don't need media queries for little projects like this. Use a max-width for the container.
    3. I did not recognize any letter-spacing in the headline in the template. But I could be wrong.

    YM2C

    0
  • Prince Eze•60
    @princeezeSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Should have started with flexbox

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

    using flex

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

    none

    QR code component design

    1
    Carsten Körner•170
    @carstenkoernerPosted 8 months ago

    Hi, I have also just uploaded my first solution. But I would still like to make a few suggestions.

    1. Firstly, read Grace’s comments on my solution. You can use them completely for your solution. Link to Grace’s comments

    2. You can use rem instead of working with px everywhere. The advantage of using rem is that all sizes depend on an initial size. If you adjust this - all other sizes and ratios adapt. This makes it easier to adjust responsive displays. The default font size in this project should be 15px. You can use this as the font size for the body-element and thus serves as the initial size, as it is inherited by all subordinate elements. By setting the initial size, you define 15px as 1 rem. So if you want to use 20px somewhere, for example, you convert this to 1.6rem.

    3. Read the definition of BEM. BEM can help you to bring a better structure to your CSS. This is not necessary in small projects like this one, but can help you later in larger projects. https://getbem.com

    4. Your page does not behave responsively if the screen width becomes smaller. In this project, it is sufficient to work with max-width and not define the height at all. Height must be able to adapt flexibly via the content.

    JM2C

    Marked as helpful
    0