Skip to content
OverviewSolutions
5
Comments
5
Prashant Uniyal
@mod-prashant

All comments

  • Prashant Uniyal•90
    @mod-prashantPosted about 2 months ago

    Hello, I think your code is close to the design, But

    • you could try using css grid intead of flex to center the parent
    • For <h1> Use Font Family mentioned in style-guide.md to make it more accurate to the design
    0
  • Prashant Uniyal•90
    @mod-prashantPosted about 2 months ago

    I think to make it more like the design.

    You can add styles to headings And, you can add left padding to lists like

    ul{
    padding-left: 1rem;
}
ul ::marker{
    color: var(--Rose800);
    font-weight: 600;
}
ul li{
    padding-left: 1rem;
}
    Marked as helpful
    0
  • Prashant Uniyal•90
    @mod-prashantPosted 3 months ago

    Here are some suggestions to improve your code :

    1. Semantic Elements

    • Instead of using generic <div> tags for every section, try to use more semantic HTML elements like <article>, <section>, and <header>. This makes the code more readable and improves SEO. 2. Accessibility Improvements
    • Add 'alt' attributes to the '<img>' tags to describe the images for screen readers. 3. Use Variables for Consistency Define common colors, font sizes, and spacings as CSS variables in :root. This ensures consistency and makes future adjustments easier.
    /* STYLE.CSS */

:root {
    --font-base: 1rem; 
    --font-small: 0.75rem;
    --font-large: 1.3rem;
    --line-space: 1rem;
    --image-side: 5rem;
    --image-radius: 2.5rem;
    --btn-padding: 0.7rem 5rem;
    --btn-radius: 0.5rem;
    --btn-spacing: 0.8rem;
    --btn-weight: 600;
    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey700: hsl(0, 0%, 20%);
    --Grey800: hsl(0, 0%, 12%);
    --Grey900: hsl(0, 0%, 8%);
}
    0
  • JosephArifin•60
    @JosephArifinSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of using rem and em units for more consistency which I believe is better than pixels (please correct me if I am wrong). I would try to do this project a bit faster. Any general tips on time saves would be nice.

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

    On the author div section, I couldn't figure out why flex-direction row wasn't working and I realized that for display I had put flexbox instead of flex.

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

    Tips on how to save time in general. Maybe how I can catch stupid errors faster. Also some tips on how I can improve my code would be nice :)

    Used rem and em for relative consistency(I think its for relative con)

    2
    Prashant Uniyal•90
    @mod-prashantPosted 3 months ago

    First of all, I want to commend you on the excellent work you've done with your project. As a beginner myself, I can clearly see the effort you’ve put into it.

    Here are some suggestions to improve your code :

    1. Semantic Elements

    • Instead of using generic <div> tags for every section, try to use more semantic HTML elements like <article>, <section>, and <header>. This makes the code more readable and improves SEO.

    2. Accessibility Improvements

    • Add 'alt' attributes to the '<img>' tags to describe the images for screen readers.

    3. Avoid Repeated ID Selectors for Styling

    • Use class-based selectors for reusable styles instead of IDs (#tag, #title, etc.), as IDs are specific and limit reusability.
    • IDs should be reserved for unique identifiers that are referenced by JavaScript or anchors.

    4. Avoid redundant class

    • Avoid redundant class names like 'class="inside-card"' for each child element of '#card-container'.

    5. Simplify Complex Rules

    • Simplify overly specific selectors and avoid redundancy. For example, #content #title:hover can simply be .title:hover.

    6. Use Variables for Consistency

    • Define common colors, font sizes, and spacings as CSS variables in :root. This ensures consistency and makes future adjustments easier.
    /* STYLE.CSS */

:root {
  --primary-color: hsl(47, 88%, 63%);
  --secondary-color: hsl(0, 0%, 7%);
  --light-gray: hsl(0, 0%, 42%);
  --white: hsl(0, 0%, 100%);
  --font-family: 'Figtree', sans-serif;
  --border-radius: 20px;
  --shadow-color: black;
  --font-small: 0.875em;
  --font-base: 16px;
  --font-large: 1.5em;
  --spacing: 1.5rem;
}
    Marked as helpful
    0
  • Prashant Uniyal•90
    @mod-prashantPosted 3 months ago

    Your github link is not to available to me so, Iam not able to check your code

    0