Skip to content
OverviewSolutions
9
Comments
9
lij110397
@lij110397

All comments

  • Matt Pahuta•580
    @MattPahutaSubmitted about 2 years ago
    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
    @lij110397Posted 8 months ago

    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
    0
  • Meseriasul19•100
    @Meseriasul19Submitted 8 months ago
    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
    @lij110397Posted 8 months ago

    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
    0
  • lij110397•230
    @lij110397Posted 8 months ago

    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

    0
  • lij110397•230
    @lij110397Submitted 8 months ago
    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
    @lij110397Posted 8 months ago

    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!

    0
  • MohammadAzmatAli•50
    @MohammadAzmatAliSubmitted 8 months ago
    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
    @lij110397Posted 8 months ago

    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
    0
  • JakeJames00223•100
    @JakeJames00223Submitted 8 months ago
    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
    @lij110397Posted 8 months ago

    **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
    0
  • JakeJames00223•100
    @JakeJames00223Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I could finish the challenge and make my own website and also learned many stuff like making buttons and how to layout things and also how to make it responsive

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

    It wasn't really that hard but I'd say responsiveness

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

    I didn't encounter any obstacle

    Social links profile with html and css and a responsive design

    1
    lij110397•230
    @lij110397Posted 8 months ago

    I like how detailed the profiles is and every link connects to its specified page! I like how you also manage the fonts in a global way in :root I like how you include and try different animations. I am inspired!

    It will be better if the font size are using units like rem or em. It will be more responsive.

    Marked as helpful
    0
  • Mohamed Tahiri•30
    @mohamed-tahiriSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i went to do something more complexe

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

    yes

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

    test

    landing page css

    2
    lij110397•230
    @lij110397Posted 8 months ago
    • I like the name standard of the class. It gives lots of meanings and the code is neat.
    <div class="card">
<h2 class="card-category">Learning</h2>
<div class="card-author">
<h3 class="card-author-name">Greg Hooper</h3>
    • The box shadow of the card is different from the design.
    box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 1);

    The third parameter should be changed to 0, which control the blur range.

    0
  • Firas•20
    @firasibrahimSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Yes, and not the first time for me

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

    Actually it awesome it's make me refresh for somethings should I focus on it

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

    All is good no need to help

    responsive landing page using flex and tools using html & CSS

    1
    lij110397•230
    @lij110397Posted 8 months ago

    The solution is very different from the design

    • The content of the card overflowed.
    • The content text should be align to the center.
    text-align: center;
    Marked as helpful
    0