Skip to content
OverviewSolutions
9
Comments
4

Juliette Lepan

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

  • Enes Aliev•330
    @Enes-hacker
    What are you most proud of, and what would you do differently next time?

    I am proud that I have experienced new featureslike adding layers in css. I have learned bunch of new things from this tutorials. It tooks much time to complete it but I did it eventually

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

    The entire project was a challenge for me

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

    The design looks great but when I have hosted vith github pages itsome of the css is invisible. I NEED HELP THERE!

    News homepage using HTML, CSS & JS and layers

    #pure-css
    1
    Juliette Lepan•150
    @jlepan

    Hi,

    I looked at the errors and here are some important points to fix:

    1.Issue with _base.css and GitHub Pages

    The file _base.css starts with an underscore _, and GitHub Pages uses Jekyll by default, which ignores all files and folders starting with _. So, this file is not published, causing the 404 error.

    To quickly test and fix this:

    • Rename _base.css to base.css (remove the underscore) in components/css/

    • Update the import in style.css accordingly:

    @import url('./components/css/base.css');
    • Then push these changes to GitHub and check if the error disappears.

    I’ve seen there’s another way by creating an empty .nojekyll file at the root of the repo to disable Jekyll, which would allow keeping the _base.css name and have GitHub Pages properly publish all files. You might want to look into that :)

    2. Issue with CSS layer names in heaer-overlay.css

    In that file, there is:

    @layer component {
  /* styles */
}

    Whereas in style.css, the layers are declared as:

    @layer base, components, utilities;

    The layer name is components plural, not component singular.

    As a result: The styles in heaer-overlay.css don’t apply correctly because they’re in a different layer.

    You should either change heaer-overlay.css to:

    @layer components {
  /* styles */
}

    Or add component to the layer declaration in style.css.

    I hope this helps you fix the issue, good luck!

    Marked as helpful
  • Juliette Lepan•150
    @jlepan

    Hey!
    It would be great to prevent the form from submitting and show an alert message if the user hasn't selected a rating.
    For example, you could check if ratingSelected is not null inside handleSubmit, like this:

    if (ratingSelected === null) {  
  // display an alert message here (you might want to create a dedicated function!)  
} else {  
  // your code if everything is okay (remember to remove the alert message if it was shown before)  
}

    This would improve the user experience by avoiding submissions without a rating. :)

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

    maybe i'll try with bootstrap

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

    responsiveness has been difficult for me

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

    Responsiveness

    Profile Social with CSS and HTML

    #pure-css
    1
    Juliette Lepan•150
    @jlepan

    Hello ! To help you with responsiveness, I recommend using the mobile-first approach, which means designing for small screens first. Then, you can adapt it for larger screens using media queries, for example:

    @media (min-width: 1200px)

    Also, use percentages (%) for the width of your body instead of fixed values to make it more flexible. I hope that helps !

  • Tharidu Deshan•160
    @deshanekanayaka
    What are you most proud of, and what would you do differently next time?

    I tried to use semantic html tags and DRY principle as much as possible.

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

    I got stuck when styling the Instructions section, but managed to get much closer to the design with the help of box model in dev tools

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

    In mobile screens, I can't style the bullet points in Preparation time section. What should I change in my code ?

    Recipe Page - Vanilla CSS

    1
    Juliette Lepan•150
    @jlepan

    Hello! I'm not sure if this is the best approach, but here's what I did to style the bullet points in the Preparation time section:

    .preparation-time li:first-of-type {  
    list-style: none;  
}  
  
.preparation-time li:first-of-type::before {  
    content: "•";  
    font-size: 1.5em;  
    position: absolute;  
    left: 34px;  
    top: 70px;  
    color: hsl(332,51%, 32%);  
}

    Let me know if this helps or if you have any suggestions! 😊

    Marked as helpful