Skip to content
OverviewSolutions
9
Comments
8
P

schindlerdumagat

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

  • Responsive Meet Landing Page using BEM and Sass

    #accessibility#sass/scss#bem
    P
    schindlerdumagat•180
    Submitted 19 days ago

    I wanted to improve the implementation of the images and the number component of the page.

    Listed below are my questions:

    • What is the better way to implement the number component? In my solution, I have a specific class called .number and I just plugged it to an element. Here is my code.
    //CSS

.number {
    display: grid;
    place-items: center;
    position: relative;
    font-family: "Red Hat Display", serif;
    font-weight: 900;
    line-height: 1.5;
    color: #87879D;
    border: 1px solid #D1D1DF;
    border-radius: 9999px;
    width: 56px;
    height: 56px;
}

.number::before {
    content: "";
    position: absolute;
    top: -80px;
    height: 80px;
    border-right: 1px solid #D1D1DF;
}

//HTML
<p class="number main-content__number">01</p>
    • What is a better way to handle the hero images? I thought the images in the hero section are decorative, so I have used divs with background images. I could have used img tags with empty alt attribute but I find using divs easier.

    Here is my sample code

    // HTML

<section class="hero">
  <div class="hero__img-mobile"></div>
  <div class="hero__img-desktop--left"></div>
  <div class="hero__text-content">...</div>
  <div class="hero__img-desktop--right"></div>
</section>

    I styled my div images using some CSS background properties and I just hide and unhide some of the images based on the screen width using CSS media queries.

    • What is a better way to implement the footer background image? I have tried to match the footer image based on what's in the design but I wasn't able to achieve that. I think it is because of the provide image assets in the initial codebase provided.

    • How is my folder structure in this challenge?

    Any suggestions and recommendations are also welcome.

    1 comment

  • Responsive Order Summary Component using React TypeScript and Sass

    #react#typescript#vite#sass/scss
    P
    schindlerdumagat•180
    Submitted 2 months ago

    I wanted to import the files using aliases like this:

    import Card from "component/Card";

    But I had struggled configuring my react application to use that syntax especially in my tsconfig.json and vite.config.json files. When I set it up, it was working but I still get a red line on my imports so it raises an error when I build it. I don't know if there is something wrong with my IDE or in my configuration or something else. In the end, I ended up using relative paths to import my files.

    1. I wanted some help in solving the problem mentioned above.
    2. I also wanted to get some feedback on how I structured my files.
    3. I also wanted some feedback on the decisions that I have made on what components I need to create for my react application.
    1 comment

  • Responsive Testimonials Grid Section using CSS Grid and Sass Mixins.

    #sass/scss
    P
    schindlerdumagat•180
    Submitted 2 months ago

    I wanted to gain some feedback on this project and how I can improve the code. Here is the list of my questions:

    I declared my CSS grid layout template using this code:

    main {
    height: 90%;
    width: 90%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 24px;

    @media screen and (min-width: 64rem) {
        height: unset;
        grid-template-columns: repeat(4, fit-content(15.938rem));
        grid-template-rows: repeat(2, 1fr);
        gap: 30px;
    }
}

    • Is there a better way of declaring the CSS Grid layout template for this project?

    • Did I use the correct HTML elements to markup my HTML? What HTML elements do you recommend instead for each project components?

    • Did I use Sass mixin feature to create reusable CSS styles correctly? I have a lot of parameters in my reusable CSS styles made with mixin, is that OK?

    • Sass Mixin and Sass Inheritance has a common goal in mind which is the reusability of CSS styles in the project. Is it better to use the inheritance feature instead of the mixin feature or my approach is good enough?

    1 comment

  • Responsive four card section using CSS Grid and Flexbox with Sass

    #sass/scss
    P
    schindlerdumagat•180
    Submitted 2 months ago

    I already finished the project, but I would like to receive feedback on how I implement CSS grid.

    Did I implement CSS grid correctly? How can I make it better?

    1 comment

  • Product preview card using Sass CSS preprocessor and media queries

    #sass/scss
    P
    schindlerdumagat•180
    Submitted 2 months ago

    I wanted to know if my SCSS code follows the best practices. Is my nesting of CSS selectors just right or too deep? Did I use media queries and pseudo-classes correctly in SCSS? What else I can improve on the code?

    I wanted to know how to use icons properly in HTML. How should I import it in my HTML because instead of importing it using the img element, I just copy pasted the SVG markup to the html just like this:

    
          
          Add to Cart

    I didn't use the img tag because I wasn't able to fix the size of the icon using it. It appeared bigger using the img tag but when I use the svg markup with the width and height already specified, it fits correctly in the button.

    0 comments

  • Simple Recipe page built with List, Table and Some Other Elements.

    P
    schindlerdumagat•180
    Submitted 2 months ago
    0 comments
View more solutions

Latest comments

  • P
    Mars - Martiniano Leguizamon•255
    @martinianolSubmitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of the clean, responsive design and well-structured Sass. Next time, I’d refine accessibility and optimize animations for a smoother experience.

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

    One challenge was aligning the button to the right in the footer. I fixed it by using margin-left: auto instead of justify-self, which only works in CSS Grid. Debugging layout issues with Flexbox helped me understand its behavior better. 🚀

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

    Images are not exactly as the prototype but I believe the images provided are not the correct ones...

    Responsive Landing Page | HTML, Sass, Flexbox & Media Queries

    #sass/scss
    1
    P
    schindlerdumagat•180
    @schindlerdumagatPosted 19 days ago

    Here are my feedbacks:

    • I recommend that you use some CSS methodologies like BEM in styling your elements for better readability and code structure. But you can use other CSS methodologies as well if you want.
    • For the logo, you can use img tag with alt attribute value of "meet" for better accessibility.
    • I think using the article tag for the hero text content is not right since it doesn't stand out when this is moved to another page. And since it doesn't have an aria label, it is just like div. So, it is better to use div instead.
    • It is better to import fonts in the HTML head element instead because HTML is the first resource the browser reads. Thus, it is faster to load.
    • You can further breakdown you styles.scss by creating another scss partial file called _variables.scss or whatever you want to call it and just import it to your styles.scss for better readability and for separation of concerns. You can check the sass documentation on how to implement this. Just some nice tips.
    • Avoid using fixed units like px on your font sizes, use rem instead. Font sizes set in rems adapt automatically to user preferences. I recommend you read this resouce.
    • Avoid styling elements by their ids, use classes instead. Ids have a higher specificity than classes and it would be difficult to change styles later on.
    • I also recommend not to style elements by their tag name for maintainability reasons. For example, you want to change the element used in your html for accessibility reasons, you would have to change it in your CSS as well. You can use class instead for easier maintainability.
    • Its better to use unitless values on line heights as it scales properly according to the font size.
    • Don't use px in media queries, use rem or em instead.
    • I recommend that you read the benefits of using relative units instead of px for you to become wiser in what unit to use. I have seen in your CSS file that you use px in most of the time which is not a good idea.
    • There are also some modern CSS resets on the internet which can check or even add to your code. Just for you to be aware.
    • As for your concern on the images in the hero section, you can check on others code, understand it and then apply it to your code.
    Marked as helpful
    1
  • P
    schindlerdumagat•180
    @schindlerdumagatPosted 4 months ago

    I recommend that for each reviews in quotes, you can use a blockquote or q element instead of div with p element in it for better semantic meaning.

    Your usage of class to create the base styles for the card is great but I recommend you check out Sass's mixin feature which helps with CSS reusability. You might want to use that in the future.

    1
  • P
    Rinta Roy•100
    @rinta-gitSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    Positioning the cards in the desktop view to match the design was quite challenging. The grid-row property of CSS Grid proved to be particularly useful in this situation.

    Feature card page using SCSS

    #sass/scss
    1
    P
    schindlerdumagat•180
    @schindlerdumagatPosted 4 months ago

    I think it is better to put the "Reliable effective ..." title and the paragraph below it in a header element and the cards in the main element. You can also improve the semantics of your code by setting each card as a section element. As much as possible, avoid using divs. If you can use semantic elements, use them.

    To further improve the view on tablet screen size, you can make a 2x2 grid to place the cards to utilize the remaining space and not leave it empty. You can do this even though it is not in the design.

    Marked as helpful
    1
  • theMaskedOtaku•10
    @FunkycodesSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    My biggest takeaway, I suppose, would be finally coming to the realization that there is a real world use case for the lessons evangelized in the layout bible; Every Layout

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

    I kept forgetting to synchronize changes in my viewport values in html; picture tag media queries and whatnot, and those in css.

    Product preview card component

    #sass/scss#vite
    1
    P
    schindlerdumagat•180
    @schindlerdumagatPosted 4 months ago

    Upon inspection, you forgot to add cart icon in the button and also make the button text color pure white and not cream.

    Aside from my visuals, I also checked your HTML and I recommend that you should practice using semantic elements than using div tags. I think you should use the main tag in your HTML to enclose all the contents within your body element. You should use at least one landmark element to contain some elements in your HTML for better accessibility. In this case, you should use the main tag because using header, footer or any other landmark semantic elements is not needed because we don't have header and footer in the design.

    Additionally, I think it's better to use the h1 tag for the product name because it is the title of the product. The word "PERFUME" is just a tag to identify what kind of product it is.

    0
  • P
    schindlerdumagat•180
    @schindlerdumagatPosted 5 months ago

    Upon checking your html, I recommend that you should only h1 once. Put the "Simple Omelette Recipe" as the h1 and make "Preparation time", "Ingredients", "Instructions" and "Nutrition" as h2 because they are sub sections. It is a best practice to only use h1 once on every page and use h2 - h6 for the succeeding sub sections in order.

    Marked as helpful
    0
  • P
    schindlerdumagat•180
    @schindlerdumagatPosted 5 months ago

    I can see that there are still inconsistencies with the styles. I assume this is not yet done.

    Marked as helpful
    0
View more comments