Skip to content
OverviewSolutions
10
Comments
8
0xblu
@0xblu

All comments

  • jl-stephenson•100
    @jl-stephensonSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It was fun experimenting with the CUBE CSS methodology. I liked categorising the CSS into composition and blocks in particular. It made it easier to manage and tweak.

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

    I didn't stick to the font sizes in the style sheet as they were smaller than 16px. This made it challenging to match the designs. I researched CSS Grid more, to try to keep a similar formatting for the cards.

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

    Headings:

    • In the end I went for the bold headlines as the h2s but was torn between these and the names. Is this the right choice?

    Grid:

    • In the design, the end of the paragraph box containing the quote is the same distance from the container edge. It was difficult to achieve this, while maintaining cards with balanced proportions display: grid and align-self: end pulled some of the cards out of whack. Is there a way to shift any existing space between elements within a container, without enlarging the container itself?

    CUBE CSS-inspired solution

    1
    0xblu•130
    @0xbluPosted 3 months ago

    The project looks very good; there isn’t as much gap in the container with the grid, and the margin between the name and the 'verified graduate' is too large

    0
  • jpcardozx•100
    @jpcardozxSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully integrating the visual design elements into the project, particularly the decorative line and the way it interacts with the container's borders. The effect of creating a quarter-circle at the edges added a unique touch to the design, making the layout more visually appealing and professional.

    Next time, I would start by sketching the design layout and structure on paper or a digital tool before jumping into the code. This could help in visualizing the alignment and spacing more clearly, potentially saving time on adjustments later. Additionally, I would explore more advanced CSS techniques or possibly use SVGs for even greater precision and flexibility in the design.

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

    One of the significant challenges was ensuring that the decorative line and mainly the CSS Grid were integrated seamlessly with the containers designed in Figma, particularly in making the edges appear as quarter-circles and the containers to get a bad position in the grid. It was tricky to align the line correctly without it either overflowing awkwardly or being misaligned with the container's borders.

    I overcame this by experimenting with border-radius and carefully adjusting the line’s positioning using negative margins and overflow properties. Iterating on the design and testing various configurations helped me find the right balance between aesthetics and functionality.

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

    I would appreciate feedback on a few areas:

    I'm curious to know if there are more efficient ways to make this design fully responsive across different screen sizes, particularly mobile devices.

    Any tips on improving the accessibility of this layout? I'd like to ensure that the visual elements don't hinder screen readers or create issues for users with visual impairments.

    Four Card Section using Advanced CSS Grid

    3
    0xblu•130
    @0xbluPosted 3 months ago

    great work! icon images for cards are not displaying correctly, remember to use relative paths or your app won't work on production environments :)

    0
  • 0xblu•130
    @0xbluPosted 3 months ago

    good

    0
  • Mohammad-Moneer•120
    @Mohammad-MoneerSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In this project I got more experienced with semantic HTML, and I created and styled a simple table and make it accessible as possible. As for what I would do differently next time: I think there might be an optimization related to the image file size, as I mentioned in the question below regarding specific areas where I would like help.

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

    How to create custom bullets and numbering with custom colors for the list items? for this issue I used the pseudo-element (::before) to generate content and style it with CSS, and for numbering I used CSS Counter.

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

    I noticed that the image dimensions are very large, so I need to know if it would be better to create a new copy of the image file for the webpage and resize the image dimensions to be smaller to reduce the image file size

    Semantically Structured Article

    1
    0xblu•130
    @0xbluPosted 3 months ago

    it looks very similar to design. just titles have a little more font weight than they should have.

    1
  • 0xblu•130
    @0xbluPosted 3 months ago

    Good

    0
  • 0xblu•130
    @0xbluPosted 3 months ago

    It looks cool!!

    0
  • Carson Haskell•120
    @Carson-HaskellSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Implementing the Figma designs precisely, as I'm just learning how to use it.

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

    HTML/CSS is still pretty straightforward for me; mainly it's just working with Figma and implementing the designs.

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

    I could not figure out how to dynamically change font-size without using media queries. I normally use TailwindCSS, which makes something like that a piece of cake. Couldn't figure out how (and I don't know why you would even do it without media queries) so I just ended up using media queries. Would be curious to hear the solution though!

    Blog Preview Card

    2
    0xblu•130
    @0xbluPosted 3 months ago

    foundations was in lowecase

    0
  • Darshan•20
    @darshan744Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Analyse the steps to be done first and then coding.Research more about why this code is being written rather than just knowing if i put this it will work

    QRcode using Basic HTML

    2
    0xblu•130
    @0xbluPosted 4 months ago

    The QR image is a bit smaller compared to the original design and is not entirely readable. Additionally, while the background is similar, it is not the same color.

    0