Skip to content
OverviewSolutions
9
Comments
9

lij110397

@lij110397230 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

  • P
    Matt Pahuta•650
    @MattPahuta
    What are you most proud of, and what would you do differently next time?

    This was a fun project and a great way to practice fundamental CSS Grid and flexbox as well as incorporate some basic JavaScript.

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

    At the time, I hadn't used the pseudo elements or absolute positioning very often, so getting the social-share component working properly took some trial and error.

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

    I think my JavaScript code, minimal as it is, could probably be improved.

    Responsive preview component using CSS Grid and Flexbox

    1
    lij110397•230
    @lij110397

    The code is so neat and I learnt a lot from the code. The thing I like about it:

    1. using descriptive content for the image
    <img src="./images/drawers.jpg" alt="Green dresser, arranged stylishly against a white brick wall" class="article-img">

    2.using place-items as short for align-items and justify-contents

      min-height: 100vh;
  display: grid;
  place-items: center;
    1. All CSS parts are designed in the classes inside the CSS stylesheet. The javascript file only uses remove or add classes to control different styles, which makes all codes separate and neat.

    What may the alternatives?

    1. using overflow:hidden to set the border-radius of the img using overflow to set the border-radius of img, then don't have to set each corner of the image. The overflow image part will be adjusted to the div container's border radius.
    .article-card{
  overflow: hidden;
}
    Marked as helpful
  • Meseriasul19•100
    @Meseriasul19
    What are you most proud of, and what would you do differently next time?

    I've learned a lot of things working with grid.

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

    I've had problems with quote image, i didn't know how to place it in correct position, but finally i resolved it.

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

    If you can give me a feedback about the technics I used and the clarity of the code would help me a lot.

    Responsive testimonials page using Grid

    1
    lij110397•230
    @lij110397

    The solution of desktop looks almost the same as the design! The code is very neat and includes what the design needs! **For improvement: ** 1. Here you use <b> on verified graduate, however in the design it is not bolded. This semantic label is to strength some information.

    <b>Verified Graduate</b>

    2.When the screen's size is changing, the class of "card-text" is sketched. The avatar is distorted.

    .avatar {
    border-radius: 50%;
    width: 3rem;
    margin-right: 1.5rem;
}

    Using margin-right here may be the problem to cause the distortion. Instead, you can try to add gap and set "align-items" and "justify-content" in your flex box layout. 3. For .card-Daniel, .card-Jonathan, .card-Jeanette, .card-Patrick, .card-Kira, they share some same feature. It may be a better way to define a common class for them, such as "card"

    <div class="card daniel">
<div class="card jonathan">
    Marked as helpful
  • lij110397•230
    @lij110397

    The code is so neat and simple! I've learnt a lot from you!

    Using "rem/em" as unit may be better.

    Give content to "alt" of images

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

    1. How to use preprocessor like SaSS

    • Define variables
    $primary-color: #3498db;
    • Define mixin
    • Define combined rules

    However, in this case, I don't think it is necessary to use SaSS, since there are limited variables.

    2. How to add strikethrough

    .strikethrough-text {
  text-decoration: line-through;
}

    3. How to add a responsive picture The image source will change according to the media scale, instead of simply switching the size of image. source only indicate the source of the image. But most of css styles are still changed by img

    This can match with media queries. The image will change and some other styles.

    @media (min-width: 43rem)
    What challenges did you encounter, and how did you overcome them?

    When it is necessary to use preprocessor like SaSS to style the css codes? I did not use preprocessor in the project, but I still add one potential sass file if i would use sass.

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

    When it is necessary to use preprocessor like SaSS to style the css codes?

    Mobile-first -product-preview-card

    2
    lij110397•230
    @lij110397

    Thank you for giving me so many suggestions!! I've learnt so much from the comment! **Things I will adopt in my code: **

    • I took your advice and put my component into <div>
    • I changed the alt of the image into <img alt="This is a perfume product."> to give more accurate description of the image.
    • I changed the using CSS style of "line-through" into semantic labels like <del> and <s>
    • I change the "width:100vw" into "width:100vw"
    • I deleted the "position:absolute" lines. (I was doing so because sometimes I found only making parent container flexbox cannot centralize the child.)
    • I change the width of component from fixed width into "max-width" and delete "height".
    • I moved the border-radius setting of product image to its parent using
      /* border radius */
  border-radius: 0.7rem;
  overflow: hidden;
    • I deleted the button's height and using the code instead.
      padding: 0.7rem;

    I 've renewed the code in the github page!

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

    I am proud that i have completed this project. The feedback which i got with the previous solution was very helpful. I will apply the methods which i learnt through this project in my future works.

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

    The challenges for this project was pretty easy. The only challenge was to make the design responsive for all kinds of screen sizes. Therefore i tried my best to make it work. I will also look for others solutions to learn more.

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

    I am new to responsive designs. I don't know how can what methods should i use to make a responsive designs for webpages. Open for any helpful feedback...

    Responsive landing page using HTML, CSS (flexbox and media queries)

    2
    lij110397•230
    @lij110397

    Overall, the solution fits the design.

    In the css file, I think using a class selector may be better than using a id selector in general.

    The image of product did not change when it changes from desktop screen to mobile screens. You may consider the method as followed:

    <picture class="product-image">
        <source media="(max-width: 43rem)" srcset="images/image-product-mobile.jpg" />
        <source media="(min-width: 43rem)" srcset="images/image-product-desktop.jpg" />
        <img src="images/image-product-mobile.jpg" alt="images of the product" />
</picture>

    This can be used when in different screen size, there are different images besides the difference in size.

    Marked as helpful
  • JakeJames00223•100
    @JakeJames00223
    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    fries recipe website

    1
    lij110397•230
    @lij110397

    **It does not include semantic HTML. <main> label is not included in the <body>, which makes the code more understandable. ** The overall design is correct and neat. However, the screen should be scrollable instead of placing all in the current viewport.

    • The code in the body should be put in the <main> </main>.
    • The height of <main> should adjust to the content.

    I like how you put all global font setting in the :root variables

        --font-size: 16px;
    --font-family-young-serif: 'Young Serif', serif;
    --font-family-outfit: 'Outfit', sans-serif;
    --font-weight-regualr: 400;
    --font-weight-bold: 600;
    --font-weight-extra-bold: 700;
    Marked as helpful
View more comments