Skip to content
OverviewSolutions
9
Comments
11
P
Enziu
@DefinitelyNotPatrick

All comments

  • P
    Enziu•100
    @DefinitelyNotPatrick

    Good job! Just add hover effects

  • Raven Matibag•130
    @ravenmatibag
    What are you most proud of, and what would you do differently next time?

    N/A

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

    My problem is determining the width of the box models and how to make it more responsive

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

    A little feedback will help. :)

    Responsive Stats Preview Card Using HTML & CSS

    1
    P
    Enziu•100
    @DefinitelyNotPatrick

    Great Job Raven Matibag! I like your idea to use variables

  • P
    Enziu•100
    @DefinitelyNotPatrick

    GJ!!!

  • P
    Enziu•100
    @DefinitelyNotPatrick

    Świetnie praca.

  • P
    Enziu•100
    @DefinitelyNotPatrick

    you did a really good job!!!

  • Adesh Katiya•420
    @adeysh
    What are you most proud of, and what would you do differently next time?

    I created the layout pretty close to the design png and was able to figure out the grid card layout by tinkering with grid-template-areas property. So I would try to be more organized next time with the code as it gets messy real quick.

    What challenges did you encounter, and how did you overcome them?
    • The main challenge was to figure out the card layout which I had to search for on google. After you figure it out you realize that It was not that hard actually.
    • I also encountered problems in making the layout reponsive according to the container that my main layout was in.
    What specific areas of your project would you like help with?
    • I think the html markup is pretty accurate but the styles that I have used may be overly complicated according to the bem syntax that I have used.
    • If you see some code that is unnecessary complex, please give me your feedback as to why you thought about doing that and I will surely reflect upon that. Thnx.

    Responsive four card feature section using BEM syntax and SASS.

    #bem#sass/scss
    1
    P
    Enziu•100
    @DefinitelyNotPatrick

    I can't see how it works because I don't have access to the site. Could you change it?

  • Adesh Katiya•420
    @adeysh
    What are you most proud of, and what would you do differently next time?
    • I built this using SCSS for the first time which took some hard learning.
    What challenges did you encounter, and how did you overcome them?
    • using SCSS syntax , more like knowing where I can write code using it because in the long run it would be very helpful to write optimized code, so for this challenge I tried following a workflow.
    What specific areas of your project would you like help with?

    How do you guys organize your scss files? The workflow and directory structure that I followed was from coder coder.

    Responsive product card using HTML and CSS/SCSS

    #bem#sass/scss
    1
    P
    Enziu•100
    @DefinitelyNotPatrick

    One-to-one style, good job and long may it continue. I saw that when hovering over the button with the cursor it does not change to pointer

  • Mateus Lima•490
    @mts-ml
    What challenges did you encounter, and how did you overcome them?

    This project had a lot of tags, so to facilitate CSS development, I wanted to use nesting. Since styled components and SCSS modules don't work in pure HTML/CSS projects, I did some research and found out that you can use Sass with HTML. You just need to configure the package.json file and run yarn watch-css in the terminal.

    It helped a lot.

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

    Would like some tips and constructive criticism.

    Responsive page using Flexbox, Grid and Sass.

    #sass/scss
    1
    P
    Enziu•100
    @DefinitelyNotPatrick

    It's cool that you're using scss and that the code is semantic but it would be better if you referenced classes rather than tags directly and it's cool that you put alt in the IMG tag

  • P
    Enziu•100
    @DefinitelyNotPatrick

    The design has been reproduced one-to-one gait card is smaller and the photo has been changed. Everything is in its place anyway

  • P
    Jan•170
    @Negligence
    What are you most proud of, and what would you do differently next time?
    • Mixins for Media Queries

    I'm very happy to be able to use my mixins @include mobile-media-query(1440px) and @include desktop-media-query(374px). From now on this is how I'm going to create my media queries.

    What challenges did you encounter, and how did you overcome them?
    • Image Wrapper

    I learned the benefit of wrapping a container on my img

    In this particular design, it was needed because resizing the image itself did not reflect the design. I needed to set a smaller container size, added overflow:hidden; to hide the extra contents, and also add display grid to be able to set justify-content: center; to the cropped image.

    .blog-image {
  width: 100%;
  height: rem(200px);
  border-radius: rem(10px);
  justify-self: center;
  justify-content: center;
  overflow: hidden;
}

    Responsive Blog preview card

    #sass/scss
    1
    P
    Enziu•100
    @DefinitelyNotPatrick

    The site is responsive and the design is as it was intended. Great job!!!

  • P
    Enziu•100
    @DefinitelyNotPatrick

    The design is reproduced perfectly. And it displays well on screens, however, the description of the picture is missing and people with a screen reader will not even know what kind of picture it is.