Skip to content
OverviewSolutions
10
Comments
15
Elijah
@taco-neko

All comments

  • Feezle•10
    @FeezleSubmitted over 1 year ago
    • It was somehow difficult for me to get the first white div box to the center.
    • none
    • I need to know a shotcuts on how to get less stylesheets css codes. That looks much for me.

    I made use of the Vs code to write the codes.

    5
    Elijah•320
    @taco-nekoPosted over 1 year ago

    To center the div both vertically and horizontally, this is the absolute easiest method, in my opinion:

    Add these properties to the body:

    body {
    display: grid;
    place-content: center;
}

    Avoid using absolute positioning for this sort of stuff. In general, if you can achieve it without using absolute positioning, try to go with that route. Also, avoid setting a fixed height on elements unless they absolutely need it, because in a real-world scenario, if ever you add more text to the container, it will overflow at some point. If you leave it without a height, the container will adjust to the content you add.

    Can you elaborate on what you mean by less stylesheets CSS codes? The only instance I can see of you writing a lot of code is where you used the absolute positioning to try and center the card: if you just replace it with the method I suggested, that'll remove the unnecessary lines of code. Otherwise, there's nothing that looks off about how much code you've written.

    0
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    Can you elaborate what you mean by having problems with the DOM?

    I've noticed you haven't written an onclick event for the buttons, and also, you're not adding the event listener correctly. You've written

    let boton = document.getElementsByClassName("botonC")
boton = document.addEventListener('click', function() {
    
})

    but you should write

    const boton = document.getElementsByClassName("botonC")
boton.forEach( (item) => {
    item.addEventListener( 'click', (event) => {
        // your function here
    })
})
    0
  • ilyemm•140
    @ilyemmSubmitted over 1 year ago

    I decided to focus on vanilla HTML/CSS since I'm a complete beginner and wanted to practice in understanding the fundamentals before introducing things like Sass into my workflow.

    When making the projects, I had a hard time understanding how to break the components into different parts, resulting in me needing to restart the project. Initially, I was trying to tackle different parts of the design all at once which ended up making things really messy. Eventually, I came up with a result by taking it by the outer layer of the design before going into the details, but I definitely feel like I could have made this more efficiently.

    My main question is about best practices: how does someone start off their HTML/CSS before building on top of that foundation to create the rest of it?

    Thanks!

    Using Vanilla HTML/CSS for Results Summary Component

    2
    Elijah•320
    @taco-nekoPosted over 1 year ago

    Can you explain what exactly you mean by breaking the components down and starting from the "outer layer"? I think I get what you mean, but the wording is confusing for me and I don't want to assume only to get it wrong. If you could elaborate a little more on what your workflow was I could offer some advice on it.

    Personally, I always start with getting the basic layout of the page down without worrying about styling until everything is in the right place. Your HTML is well structured, with the exception that you don't have a <main> tag. Just wrap your whole card in that, and it should be good.

    One piece of advice I'd like to give you based on your code: avoid display: table. It's really rare that you'll ever need to use it, flex or grid is a much better (and simpler) option for this kind of layout. I think you could have simplified the CSS for the summary elements a lot.

    I think despite the troubles you had, you nailed the design down pretty well! Keep it up!

    Marked as helpful
    0
  • fidaatag•20
    @fidaatagSubmitted over 1 year ago

    When I built this using SAAS there is something I'm still confused about using @import and @use. The SASS documentation recommends using @use. However, I decided to use @import because it can be reviewed immediately.

    Then,

    Using @mixin for @font-face, I found an article about using @mixin for @font-face, but when I follow the code it doesn't run correctly, maybe I don't understand. For that I use a simple method, but for projects with lots of fonts, using @mixin for @font-face is more effective.

    Responsive page using CSS Grid With SASS

    1
    Elijah•320
    @taco-nekoPosted over 1 year ago

    @import in Sass is deprecated. It might work for now, but it will eventually stop working completely. You have @use and @forward now. They were confusing for me at first too. Here's a video that helped me understand them better.

    I also suggest you look into the 7-1 architecture, for keeping your files organised. This is the article about it. Note: the article is quite old so it still talks about using @import, but the same concept applies to @use and @forward. This is a boilerplate that you can reference for your folder setup. You don't have to do it exactly like this, for example if you have no need for a "pages" folder (if you are working on a single page site) you can omit it entirely. Same for the other folders. It helps a lot once your files have a lot of stuff in them.

    1
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    Your site link leads to a markdown file, not your webpage. Don't put the project files nested inside a folder, Github Pages does not know how to detect it when you do that. Ensure that you've uploaded the files correctly so that your solution is viewable.

    Marked as helpful
    0
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    You should use the :hover state instead of :active for the text, in this case. It communicates better that something is clickable. Remember, if this was a real site and those links actually led somewhere, the user would only see the :active state for less than a second.

    Check this link for a very simple example of how to make a hover effect on an image.

    Marked as helpful
    0
  • Diego Vieira•10
    @diegovieirafSubmitted over 1 year ago

    The design is not responsive. I'm looking forward for feedback on the HTML structure and the use of CSS properties. Appreciate any suggestions, hints and corrections. Thanks a lot!!

    QR Code (no responsive)

    1
    Elijah•320
    @taco-nekoPosted over 1 year ago

    A very very simple way to make it responsive is to write width: (your width here) max-width: 100%. Realistically, almost no one is using a device small enough to make it cause any issues, but the max-width of 100% is always a safe bet.

    Also, avoid using strict pixel sizes and use rems instead. You can treat it exactly like pixels and convert your pixel width to it, but the benefit is if that a user has their browser's font-size property modified it will scale properly and not break.

    Marked as helpful
    2
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    You can use a srcset in the HTML to implement the second image. These pages: W3Schools MDN explain how to implement it.

    I struggled with this too, because this isn't commonly taught in most HTML courses. Don't feel bad about it!

    Alternatively, you can set the images as background images in the CSS and use a media query to switch them out, but this is very bad for accessibility as you can't put alt text on them. If they were just decorative images though, it would be a fine approach.

    Marked as helpful
    1
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    Yes, the color and font scheme is complete.

    Checking your code, you didn't set a colour on the subtitle, and it inherited the body's colour. That's why it looks wrong.

    I recommend making all colours into custom properties, so you can reuse them and not have to worry about accidentally making a typo or using the wrong one.

    This is how I set it up in my file:

    :root {
    --white: 0, 0%, 100%;
    --light-gray: 212, 45%, 89%;
    --grayish-blue: 220, 15%, 55%;
    --dark-blue: 218, 44%, 22%;
}

    Then I call them by writing hsl(var(--grayish-blue)). The benefit to this is that you can also adjust the opacity simply by writing in a value like this: hsl(var(--grayish-blue), 0.5).

    Marked as helpful
    1
  • Syd•20
    @SydBrainSubmitted over 1 year ago

    My second Front End Mentor Project!

    I had a few problems with the semantic structure of the HTML since this time I had to build only one component and not an entire page. Let me know if I made any mistakes in regards to the HTML, especially the headings!

    Results Summary Component Using HTML & SASS

    1
    Elijah•320
    @taco-nekoPosted over 1 year ago

    You've done a good job! Regarding the headings, every page should have an h1 element. You can make "Your Result" into an h1 instead of h2 and that should fix the single accessibility error that's showing up.

    Remember, you can always style elements to look different. If the default way an h1 looks doesn't suit you, you can always change it. Headings are meant to show the structure of the page, rather than be text styles.

    Marked as helpful
    0
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    Your font is not working on your site. After checking, it seems you didn't do the @import correctly. The link in your file simply takes you to the Google Fonts page for this particular font.

    Replace it with this:

    @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');
    Marked as helpful
    0
  • Elijah•320
    @taco-nekoPosted over 1 year ago

    I noticed you're using absolute positioning to center items while also having a display of flex and using justify-content. It's a bit redundant, and you should just use one or the other (I'd recommend flex). Or remove all of that and just use margin: auto.

    This part of your code caught my attention:

    .attribution {
  font-size: 11px;
  text-align: center;
  position: absolute;
  bottom: 0;
  font-size: 1em;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
}

    You set a font-size of 11px and then overwrote it with 1em. I'm not sure if this was intentional. Also again, you could center this with margin: 0 auto 15px or margin: 15px auto instead of absolute positions.

    Marked as helpful
    1