Skip to content
OverviewSolutions
4
Comments
3
Alfonso Manuel Vidrio Lizaola
@AlfonsoVidrio

All comments

  • Alfonso Manuel Vidrio Lizaola•70
    @AlfonsoVidrioPosted about 2 months ago

    I couldn’t access your repository (404 error), but I really liked your solution. It turned out just like the original design. Congratulations!

    0
  • Ayhem18•40
    @ayhem18Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    1. using the flexbox Layout extensively to make the structure close to the design
    2. finally understanding how flex-grow / shrink / basis behave with respect to justify-content and align-items
    What challenges did you encounter, and how did you overcome them?
    1. My main goal was to design this page using flex layout while having a clear understanding of the behavior. I have gone through several resources prior to that and most of them seemed to just throw the attributes at me in isolation without explaining the big picture. I linked the best resource on the flex layout in the repo Readme
    What specific areas of your project would you like help with?

    1. Mainly feedback on my usage of the flex layout and the responsiveness of the page

    2. I am perfectly aware that several styling details are completely ignored. This was done on purpose. I am currently focusing on building a big picture of CSS and HTML focusing solely on the most important skills (the flex/grid layouts, positioning, the box model....) as I would like to move to JS and NodeJS as soon as possible.

    Blog Review Page: FlexBox Layout

    1
    Alfonso Manuel Vidrio Lizaola•70
    @AlfonsoVidrioPosted 4 months ago

    You might find it helpful to use semantic HTML tags like <article>, <header>, <section>, and <footer> instead of <div> to improve both the structure and accessibility of your content. For example, you could wrap the main content in an <article>, use <header> for the top part of the blog, <section> for the main content, and <footer> for the author information. This approach can make your HTML more meaningful and easier to work with.

    Consider using CSS variables to define your color values. This practice not only enhances consistency across your stylesheet but also simplifies future updates and maintenance. By declaring color variables in the :root selector, you can ensure that your color scheme is uniform and easily manageable.

    :root {
    --yellow: hsl(47, 88%, 63%);
    --white: hsl(0, 0%, 100%);
    --gray-500: hsl(0, 0%, 42%);
    --gray-950: hsl(0, 0%, 7%);

    --font-text: 'Figtree', sans-serif;
}

/* Example usage */
body {
    background-color: var(--yellow);
    font-family: var(--font-text);
}
    Marked as helpful
    0
  • Anny Chagas•10
    @AnnyCarolineSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I could deliver the solution fast. I would try a front-end library or framework next time to improve my learning.

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

    I never used versel to publish a web page. It was a good first experience

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

    I would like help to understand how should I style the space between textual elements. Most of the time it looks a little random to me.

    Vanilla QR code page

    1
    Alfonso Manuel Vidrio Lizaola•70
    @AlfonsoVidrioPosted 4 months ago

    Although I don't have much experience with HTML and CSS, I would suggest considering the use of more classes instead of applying styles directly to elements. Using classes can help keep your CSS more organized and modular, making it easier to reuse styles and manage your code as the project grows.

    0