Skip to content
OverviewSolutions
12
Comments
12

shwerts

@shwerts220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • shwerts•220
    @shwerts

    Hello, well done! I first want to give you one tip: If your image is SVG-formatted, you can rewrite it straight into your HTML-document (svg image can be opened by any text editor) as SVG technically behaves similar to <html>. This helps you to handle color and shape through svg-specific attributes.

    And here is some notes:

    • See any references for <picture> element and its benefits;
    • Acknowledge some of 'semantic' elements from HTML5, like in example <time> and date attribute for publish dates.

    Keep progressing and you will eventually win

  • vtopavlov•10
    @vtopavlov
    What are you most proud of, and what would you do differently next time?

    Proud of the structure I created.

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

    Vertically positioning in the centre was hard for me. Overcame it by asking chatgpt

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

    Centering elements

    Pure HTML + CSS

    2
    shwerts•220
    @shwerts

    Greetings, I see that you solved this challenge very good! Here's some moments for future considerations you should take to improve your frontend skills:

    • Use class instead of id, second can be used only to be used in JavaScript and for anchoring. Using classes can shorten selectors in every ruleset.

    • For font-size and element's sizing properties you should use rem mostly or em units to tolerate user's personal font settings. Relative units bases on user's font size settings, for most users, they have 16px for font size, so you can base on it.

  • shwerts•220
    @shwerts

    Hi, nice work! Cool to see that you've used Grid, Flexbox and media queries for this challenge.

    Marked as helpful
  • shwerts•220
    @shwerts

    Hello, excellent work! There are some detail you should fix:

    • Never use fixed height property to set body's height size. You've used min-height property for container, so you can just omit fixed height property for body element.
    • You can use section tag for a whole section and cards, leaving non-semantic div tag for grouping elements.

    Keep going and track your achievements on this journey of web-development!

    Marked as helpful
  • shwerts•220
    @shwerts

    Hello, very good!

  • shwerts•220
    @shwerts

    Hi, your solution looks well! Here are how you can improve your solution:

    • Avoid using fixed height for container, use min-height property instead to not let overflow happen.

    • Box shadow's property is this: x y blur color; where x & y are element coords offsets, and blur is self-explanatory, every value except for color must have <length> units (for example: rem, px or ch).

    • Replace some divs with semantic elements as <main> for container, <article> for card, <p> for para element. Also, wrap date time (not including published:) in a <time> tag with mandatory datetime attribute (don't forget to write value for this attribute like this: "YYYY-MM-DD").

View more comments