Skip to content
OverviewSolutions
9
Comments
13
P
mantis
@morauszkia

All comments

  • Gina Wang•170
    @gina-wang-1021Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Learnt how to implement javascript!

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

    I didn't know how to structure the DOM so that the pop-out can react in different ways when viewed in different sizes of viewports but eventually solved the problem after asking for advice in the discord community!

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

    There are multiple areas that I was struggling in - would love any advice on how to approach them!

    1. How do I create a tailwind for the popout? I saw a great approach using position absolute for the :after element and position it in relation to the popout, but my popout is itself positioned absolute so I couldn't us this approach.
    2. For the desktop view, I'm currently positioning the popout with top and left properties, however, I had to calculate the px for both of these properties to center the popout according to the share button. Would appreciate any ideas that would make this more responsive and straightforward!
    3. I can't figure out a way to make the share button align with both the author's information and the share popout in all devices size. At some point when I shrink the viewport to a size between desktop and mobile, the share button is positioned weirdly (it always stays horizontally aligned with the author's information, but it's a lot higher compared to the popout)

    Would appreciate any ideas to solve these problems! Thank you.

    Preview page with HTML, CSS, and vanilla Javascript

    1
    mantis•240
    @morauszkiaPosted 4 months ago

    You can create a tail for the popout either using an ::after pseoudo-element of a square shape and rotate it, and position it (using absolute) relative to the popup element, and then rotate and translate it, and add a z-index lower than the popup, so that only a triangle is seen and is right in the centre. The other solution is to use a thick top border on a 0x0px ::after element. (I used the first solution, but you can find examples for the second online) You can position the popup using calc directly in the css, and add together % values, custom properties, etc. so that if anything changes, it adapts automatically. I used a custom property for the height of the author part and positioned everything vertically in the middle, and then I used the same height (var(--footer-height)) for the popup on smaller screens, and positioned everything vertically in the middle, and so they are nicely alligned. I hope I was able to help you, or at least give you some suggestions to think over! Good job otherwise and happy coding in the future!

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

    I think I made a very similar copy of this challenge version.

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

    I think I usually overthink which semantic elements use.

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

    Did I make good html elements choices ? I gladly receive a feedback about that. Thank you!

    Blog preview card using Flexbox, CSS Custom Properties, Media query

    2
    mantis•240
    @morauszkiaPosted 5 months ago

    Hi Péter! (Szia!) Yes, I think your html tag choices are all right. Maybe you could have used header instead of the first section of the article for tag, date and title, but I think section is fine, too. And overall, the article is a good choice, or if you would have multiple cards, you could also choose to have a ul with multiple li elements for each card.

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

    It has been a while since I built projects after learning HTML and CSS. When I started the project, I thought I could finish it in 24 hours, after I got stuck, I was thinking of going through the CSS course again, until I summoned courage and decided to do it step by step. I am so proud I was able to complete it. Still much work to be done, but it a start.

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

    Centering of the image and div: I had to read different article on centering images and divs.

    Creating the space on top of the QR-Code in Desktop and mobile view: The CSS was not responding, until finally I put the padding-top in the body

    CSS not implementing: I discovered that after the mobile first approach, the root styling where my colors were, was in the mobile screen

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

    How to center objects(images/divs) vertically?

    How to place divs properly in the HTML?

    Responsible design using HTML and CSS. Git Gitbut and Github pages.

    2
    mantis•240
    @morauszkiaPosted 5 months ago

    I don't see your code, so I cannot comment specifically on your solution, but it is the easiest to center things using flexbox. You give a min-height to the container, so that it is higher than the content, and then you can center horizontally (supposing you kept the default arrangement, which is flex-direction: row) with justify-content: center and vertically using align-items: center. You have everything right in the middle.

    Another solution, but a little bit hacky, and far more complicated than flexbox, would be absolute positioning either combined with transform: translate() or using calc() have the element right in the center. But nothing is easier than using flexbox.

    Marked as helpful
    0
  • andiaz•150
    @andiazSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of feeling as if, generally speaking, I am in control when using both Flexbox and CSS grid now. I am also happy that I started using a mobile-first approach to the implementation, this makes things much easier to implement from my experience.

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

    Handling the background images and its properties was a challenge but in the end I think it worked out quite nicely.

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

    I'd like to know how, given my current solution, I'd make the images to the left and right of the hero section (on larger resolutions) span slightly off "canvas" (outside the viewport). I can't get it work after trying various ideas so any feedback there is much appreciated! :)

    Meet landing page using Flexbox and CSS grid

    1
    mantis•240
    @morauszkiaPosted 5 months ago

    Your solution looks and works great! I also like your utility classes. Regarding the hero images, I added a width, that is larger than 100% to the img/div so that it overflows at the edges, and an overflow-x: hidden (I think, to the body) so that I don't get a scrollbar at the bottom due to the overflow.

    0
  • mantis•240
    @morauszkiaPosted 5 months ago

    I like this solution. It uses semantic markup, which is great, and the layout change works fine. You might perhaps consider adding an inbetween layout with maybe 2 or 3 columns, so that the cards in the final layout just above the breakpoint wouldn't be as narrow as they currently are. The solution is very close to the design. You are only missing the borders on two photos. In your css you could also use additional classes or ids to distinguish the cards for the background colors and their placement in the grid. Otherwise the css looks great, too. Maybe you could omit parts of your reset which don't affect this webpage (ul, inputs, etc.) to get an even smaller css file.

    1
  • SandyAstorga•460
    @SandyAstorgaSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    The result was good, the responsive part of the Grid was a bit complicated for me.

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

    I think at that time the handling of the Grid was a challenge, both the shading and the colored edges.

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

    I think I need to reinforce the theme of the Grid and have my styles more organized so as not to repeat them.

    Four Card Section

    2
    mantis•240
    @morauszkiaPosted 6 months ago

    I like your solutions with grouping the two middle cards. I thought about such a solution, too, and only decided against, because I wanted to add the "middle" layout between the one column layout and the three column layout. In fact, I am still thinking about it, maybe I could use it to simplify the css.

    1
  • raheem king•80
    @Raheem-kingSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    doing it sucessfully

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

    none

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

    none

    four card feature using css grid

    1
    mantis•240
    @morauszkiaPosted 6 months ago

    Your solution is nice! I would maybe suggest to add something to distinguish the cards from the background (e.g. a box-shadow or a border, or a slightly different background-color). Also, some gap in the one-column layout would improve the overall look. Also, you could try to add some padding, or a min-height or an aspect-ratio to make the cards a bit taller compared to their width.

    0
  • Mohammad Waris Fayiz•470
    @fayiz770Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This was one of the most easy challenge that I solve but I really enjoy it.

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

    This challenge was very simple I didn't encounter with any challenge, but I love it.

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

    i

    product preview responsive

    1
    mantis•240
    @morauszkiaPosted 6 months ago

    Hello! I liked your solution, and the change between the horizontal and vertical arrangement works really well. I only have a couple of ideas to consider to improve upon your solution.

    I liked the two different fonts used in the design. You might consider adding the other font for the title and the current price, which would make these stand out. Also, you are missing the hover/focus state for the button.

    Finally, on really small screens the cards edges overflow. You might consider adding some constraint so that there always remains some space around the card, e.g. with max-width or using clamp() or min() for the width.

    And for the border-radius, you can do it simpler, if you add the border radius to the card, and then specify overflow: hidden, which would hide the overflowing corners of the image, without needing to add the border radius there as well. So later, if you would decide to use some other border-radius, you wouldn't have to worry about changing it everywhere, and also you would't need to specify four separate values for the four corners.

    Marked as helpful
    0
  • ayesorobolu•140
    @ayesoroboluSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how well my design came out although, it's not very identical, they look pretty the same. I wouldn't try to do anything differently, but i'm open to any criticism.

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

    I really didn't encounter any challenges. The past exercises has really helped me, so this ne was easy to get by.

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

    Currently i really don't need any help, but i'm open to any help you offer to any faults you see.

    A single Recipe page webpage using HTML and CSS

    1
    mantis•240
    @morauszkiaPosted 6 months ago

    Your solution looks quite nice. Maybe a couple of tips: I would advise you, to use semantic html instead of regular divs: main, header, fotter, section, article all work like div, but give meaning to your parts of the page so people with screen readers who cannot rely on visual cues, can navigate the site better. Instead of divs with class line, you can also use hr as a horizontal line, or maybe even borders, if you don't need the thing in the markup only as a visual separator between sections. Also, you can use the table html element for the table, which I admit is not that easy to style, but semantically may be a better choice.

    0
  • Eric Kamau•30
    @kamauErSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I wrote the code seamlessly.

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

    None so far.

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

    Any Help or feedback is welcome :)

    Social Links Profile using CSS GRID

    1
    mantis•240
    @morauszkiaPosted 6 months ago

    I liked you solution, especially for using responsive units for the sizes with 1rem=10px. I only found you solution for centering the attribution a bit of an overkill. A position: absolute or fixed and a text-align: center in a block level element would have been sufficient.

    0
  • mantis•240
    @morauszkiaPosted 6 months ago

    I liked your solution using flexbox for centering. I would maybe advise you to use other units (e.g. rem) instead of hardcoding sizes with pixels, so that the user can change e.g. font size, and then the size of other elements would adapt. You might also consider using classes to select elements for styling. Finally, you could add some alt text to the images for visitors with screen readers.

    Marked as helpful
    0
  • Martinna Lazcano•40
    @martinalzcSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Im proud of how i didnt gave uo whrn i couldnt center the card

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

    I struggled centering the qr card

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

    I need feedback of how i centered the qr card because i think i did it a little weird

    I used position absolute to center the div

    2
    mantis•240
    @morauszkiaPosted 6 months ago

    For centering divs, you might want to check out the flexbox way, which is really cool, and easy way to center things in flex containers. I see you are using flexbox within your article, but you can turn your body to a flex container too, and justify and align items to the center. In this case, you should remove the attribution from the flex container, but using position: absolute, which you do, solves this problem, too.

    0