Skip to content
OverviewSolutions
7
Comments
96
argel omnes
@argelomnes

All comments

  • argel omnes•1,780
    @argelomnes

    Hi @sahil899,

    I think one way to optimize this is to not use font-awesome at all.

    • Even though you only used it on 2 elements, browsers still need to load the whole library.
    • The images to be used are provided in starter file

    Here’s how that centering works:

    top: 50%; left: 50%; 50% here pertains to the viewport's dimension. So if the viewport is 980px wide, the card is moved 490px from the left. You may have expected the card to be centered already with this, but it's not. That's because the distance is between the viewport's edge and the card's top-left corner.

    This is where transform: translate(-50%, -50%); comes in. 50% here pertains to the card's dimension and starts at its center. If the card is 350px wide, it's moved back 175px.. from its center.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    hey @KamaTwoPlusTwoEqualsFive,

    Congrats on starting the challenges. However your work is not showing up. You can follow this guideline to set it up properly.

  • argel omnes•1,780
    @argelomnes

    hey @hensusanto,

    You're almost there. Nice work! To achieve it with flexbox, you'll need to group "Annual plan" with the icon or with "Change" first. And be sure to also apply flexbox again with this new grouped elements.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey @Chuyto70 ,

    Nice work with the layout. If you really want to go the no-js route, I suggest looking into <details> and <summary>. The chevron will be challenging to implement but I think these tags will be your best bet.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey @titocs ,

    I’ve taken this challenge and also used pseudo-class for the list. You need to add width: 100%; in your :after so the borders take up the whole space.

  • argel omnes•1,780
    @argelomnes

    Hey @abdellahelaajjouri ,

    Desktop layout looks off with regards to the design. Mobile is good tho. I’ve seen some submit their works with only mobile and desktop design. So I guess it’s optional. I prefer doing the tablet layout as well. And suggest you do too as that’s what will be expected with client work.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey @Naveen39O,

    You missed the mobile design. You can contain both in an element and play with flex property.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hi Mel,

    Just a heads up. Your solution is broken. Both the preview and the link to your project's GitHub.

    Preview: Recheck your stylesheet's path. GitHub: This usually happens when the repo is set to private. Change visibility to public.

    I also noticed you’re using absolute URLs for your images. I recommend switching them to relative to avoid broken links. E.g.,

    file:///C:/Users/kouas/OneDrive/Desktop/Web%20Development/Project%201/CSS/illustration-hero.svg to CSS/illustration-hero.svg

  • argel omnes•1,780
    @argelomnes

    Hey Thaweesha,

    Congrats on your first challenge! The technique is called responsive design. There’s the Resources section if you like to dig around or continue with YouTube.

    You actually got the card's layout right on mobile. Add the shadows and it's perfect. Now you only need to adjust it for tablet* and desktop.

    *optional but I highly recommend not skipping it

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey @pccipri,

    I think you got the triangle just fine on the desktop. However, you'll need to hide it when on mobile. I noticed the arrow’s tail was chopped off. This is caused by the border-radius.

    For the images as backgrounds, yes, the way you did it is good. But I think using the furniture as an inline image is better.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    hey @whoiskekeanyway,

    Tablet starts at 768px in dev tools. But I suggest resizing your viewport from your small breakpoint. See where it breaks and then adjust your layout. Your medium breakpoint might start sooner or might not be needed at all.

    You're almost there. Some revisions are needed. I recommend starting with the fonts. Barlow should be used in some of the texts. E.g., navigation area.

    For mobile, hamburger animation is nice. But about and services are not clickable due to the arrow overlapping them.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey Ashish,

    Yes, your structuring of the files is good. One suggestion is to group stylesheets in one folder if you have 2 or more. I sometimes don't do this if one of my stylesheets is the source and the other is the output. In your case you referenced each in the HTML, so I highly recommend it.

    HTML is also neat. Putting icon-music.svg inside a div is optional. A minor thing you may consider is putting footer at the bottom of your stylesheet. Just above the media query. So it follows the structure of your HTML as well. Reading it is easy this way.

    Overall, good job!

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey @carlin-mitchell,

    You can. To keep the background image centered, you can remove the background-size declaration. Its default value is auto. So you can resize your window wherever you like and it will scale accordingly while maintaining its aspect ratio. Same with background-position: top;. You won't need it because the default value is top-left.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    Hey Sharath,

    I prefer rems. It's predictable. I also use it in combination with ems and percentages sometimes.

  • argel omnes•1,780
    @argelomnes

    Hey Viola,

    For learning purposes, yes. For client work, no. My suggestion is to use grid. Second best choice is flexbox. You can also combine these two.

    I also recommend organizing your files. Like grouping svgs inside an 'image' folder and a 'font(s)' folder for font(s). Speaking of fonts, you haven't linked yours yet. You can directly link it from here. Choose only the styles you need and it will generate the link ready for use. Note: You won't need the font file/folder anymore if you do this.

    You also missed the mobile layout. Google recently launched Learn Responsive Design. Some sections are still in the works but you should definitely bookmark it. Frontend Mentor also has a resource section if you want to explore more.

    Cheers!

  • argel omnes•1,780
    @argelomnes

    Hey Florence,

    I'm getting a 404 when I clicked the preview ang view code buttons. Your repo is set to private perhaps?

    Can't answer the text-size issue and the last question if I can't preview your work. But for the first one, I'd reach for Grids for this layout. I also prefer not having team builder and karma grouped into a container. This makes it more flexible for me to reposition these cards. This is also achievable with flexbox. But Grids feels less work.

    Marked as helpful
  • argel omnes•1,780
    @argelomnes

    hey @Anubliss-0,

    yes. nice work btw.

  • argel omnes•1,780
    @argelomnes

    Hi @gethoopp,

    Frontend Mentor challenges always have style guides included. I find reading them first gives me a good start. Let me share with you a workflow.

    1. Read the style guide.
    2. Take note of the widths given. This is helpful when doing media queries.
    3. Set custom properties (CSS variables) using the colors and fonts provided.
    4. Link the fonts.

    From here, your setup is pretty much done. You can continue with the mark up and layout. This might not improve you skills technically, but doing these first will surely make your work closer to the design provided.

    Now, on improving your skills technically. My suggestion is to start small and build it up from there. Start with a Newbie challenge. Complete 1 or 2, then take on a Junior challenge and so on. And of course, post your work together with specific question/s you'll have along the way. This community is here to help you.

    Marked as helpful