Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions10Comments101

All comments

  • Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    There are native HTML elements - <detail> and <summary> that will get you most of the way there!

    Marked as helpful

    1
  • Jordan• 180

    @GitNutts

    Submitted

    I definitely found this one tougher than the first project and it showed me that I still have a lot to learn. I think it's turned out good enough though. I would appreciate any help/feedback.

    Few questions:

    Why does 'overflow:hidden' work on the card border-radius instead of having to do it on each box separately? Also, when in mobile view in dev tools the mix-blend-mode overlay disappears. Can anyone advise how to fix this?

    Thanks

    Stats Preview Card

    1

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    The overlay on mobile is a bizarre one! I couldn't diagnose it precisely, but I think it's to do with the fact that your overlay's height: 100% inherits an explicit value from... somewhere in its parentage, although I suspect it might ultimately be based on a width value (!). I'd love to know the precise explanation!

    For a quick fix, change min-height to height on .box-2 (although that causes some secondary problems). I'd look for a different approach to implementing the image behaviour TBH.

    Not sure I understand your question about overflow - the card is the container, so you're telling it to hide any contents that overflow the border. Changing the radius of the border's corners then masks content that would otherwise stick out. Does that make sense?

    0
  • Yazdun• 1,310

    @Yazdun

    Submitted

    I'm going back to my previous challenges and improve them one by one, I used plain css instead of scss as I thought scss is a overkill for this one. Also I added some animations to the design to make it look a little bit cooler !

    I'll be glad to know what you guys think about this solution

    Profile card component

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I'm impressed by your commitment to browser fallbacks! I should probably think about that a bit more when there's no tooling to add them automagically...

    To me the heading hierarchy seems odd - if the user's age is h2 and location is h3 that suggests to me that location is a subsection of age, which doesn't make sense to me.

    Similarly, the card__profile-stat nodes seem backwards; you could make those divs into sections and reverse the order of the h and p for a better result (IMO):

    <section class="card__profile-stat">
    <h3>Followers</h3>
    <p>80K</p>
</section>

    Re-ordering visually them with flex-direction won't affect their order in the document:

    .card__profile-stat {
    display: flex;
    flex-direction: column-reverse;
}

    Oh, I'd leave the alt tags on your circles blank too, like you have some other images.

    Marked as helpful

    0
  • Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I don't mean the breakpoints, I mean the width of the card when detail is opened.

    If you look at viewport width 550px with all the FAQs closed, then open one the whole card expands horizontally.

    Anyway, good luck.

    0
  • Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    This looks great - transitioning the height property makes the accordian open so smoothly!

    I notice that below the desktop breakpoint the width of the card increases with a jump when you open the accordian, which is a shame when you've gone to so much trouble with the height.

    0
  • Henok Hailemariam• 40

    @henokhm

    Submitted

    1. I tried to use Grid on a container that had nested elements. For example, if I have the following markup:
    <body>
  <header>Header</header>
  <main>
    <section class="section_1">Lorem, ipsum....</section>
    <section class="section_2">Lorem, ipsum....</section>
  </main>
</body>

    and I have set display: grid; on <body>, is it possible to have the header and the two sections as grid items, essentially "ignoring" the <main> element?

    1. I tried to time myself for this challenge. What would be a reasonable amount of time needed to complete this mini-challenge from start to finish for a professional frontend developer?

    HTML, CSS, BEM

    1

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I've seen lots of people focusing on speed of execution for FEM challenges and I don't think it's a good thing to worry about when you're learning.

    This phrase "from start to finish" is what makes it a difficult question to answer.

    As a professional developer it'll probably be rare to start a brand new project from scratch. You won't have to figure out what font to use, or what base styles, or page-level layout, tooling, naming scheme - maybe even component patterns. So what does "start" mean?

    "Finish" is just as tricky. You have accessibility and HTML issues in your FEM report, so is this challenge finished? Have you tested it across different browsers?

    lol I expect you'll unfollow me after advice like this! 😜

    TL;DR - this solution looks pretty robust and responsive, and I like how it adapts to tablet sizes. I can see you making efforts with the semantic HTML, which is great, and there are some quick fixes you could make in that department. Focus on quality rather than speed - the speed comes with practice.

    0
  • Henok Hailemariam• 40

    @henokhm

    Submitted

    1. When the page loads, unstyled fonts appear for a split second. Is there a way to fix that?
    2. I want to know if I implemented the media queries and responsive design correctly (ie as the instructions say)

    Any other suggestions and improvements are also welcome!

    HTML, CSS

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Hi @henokhm,

    I know this is an old solution, but since you've followed me I thought I'd give some feedback!

    Flash Of Unstyled Content (FOUC) is something that will probably come up regularly in your career. I've come to the conclusion that it's more of a political problem than a technical one; designers and executives often want to eliminate FOUC for aesthetic reasons, but IME the standard strategies for doing so are often not in the user's best interests.

    Here's a (kind of!) recent article you might find useful.

    I think the best first step is to choose a fallback system font that's as close as possible to the target, and/or which looks good in its own right. In this case there's not much (on my system at least) that's as narrow as Big Shoulders Display, so there's always going to be a visible shift, but you can change the fallback from cursive to sans-serif so the FOUC doesn't look quite so web 1.0!

    It's probably a bit of niche issue, but if you're interested there are lots of "interesting" articles about system fonts to dive into...

    0
  • Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I've looked at the CSS file and had a poke around with the solution in dev tools and I don't see anything much to be unhappy about!

    You seem to have a class accordian__title that you're not using, and styling the <h1> directly.... is my only observation (and I had to look quite hard for it).

    I can't even work out what's going on with the images... maybe I'll do the challenge myself and come back to you.

    Seems like you've got a solution that works and there's no glaring issues!

    Marked as helpful

    0
  • Ben• 770

    @BenConfig

    Submitted

    Sorry for uploading something that looks incomplete. It is complete, but this is my first time using Tailwind and I've not figured out how to link the CSS. I've been struggling with this for the last 4 - 5 hours so any help would be greatly appreciated.

    Profile Card Component (Tailwind)

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    "I think every page must have an h1 element, so the name was the most obvious choice for this."

    Yeah, i think that's right. And i reckon if your card was an <article> nested under <main> then the <h1> would be valid for the component wherever it was used in a page.

    I ended up making "followers", "likes" and "photos" into level 2 headings, but it took me a lot of thought and testing to come to that conclusion.

    I love using tailwind - all the best with it.

    1
  • Leon• 20

    @rupiacodes

    Submitted

    After coding along to tutorials for about a month I realized I was just coding along and not grasping concepts. So, I decided to give this a shot. It was pretty challenging but I learnt a lot!

    Here are some challenges I encountered:

    • Responsiveness: I used a desktop first approach to create the card. I then worked on the responsiveness but I wasn't able to make it responsive across all devices. So, I opted for a column layout for devices 768px and below. But, I feel this wasn't the best approach. Recommendations on how I could have done this better will be appreciated.
    • Using CSS classes: I'm still learning how to use classes appropriately. I feel like I could have written less CSS than I did. Any feedback on how I've used CSS classes will be appreciated.
    • Semantics: Finally, I'll appreciate any feedback on HTML semantics.

    Finally, any additional comments and recommendations are welcome. Thanks! :-)

    3-column preview card component using CSS Flexbox

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    @rupiacodes try taking a mobile-first approach next time. I struggle to articulate the benefits beyond saying "you will find it easier" or "you get more for free".

    You can achieve the mobile design with less CSS, which means you're only adding what you need to reach tablet/desktop designs in an additive way, as opposed to trying to take stuff out... I hope that makes sense!

    I don't think your CSS is obviously bloated, but it is a bit confusing.

    The following looks like a utility class:

    .dark-cyan {
  background-color: var(--dark-cyan);
}

    But there are different properties that could take that color:

    • color
    • background-color
    • border-color

    .bg-dark-cyan might be better if you take this approach.

    And then you have these classes:

    .bright-orange {
  background-color: var(--bright-orange);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.very-dark-cyan {
  background-color: var(--very-dark-cyan);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

    This will cause you problems very quickly. What has border radius got to do with being bright orange?!

    Have a look the BEM CSS methodology and see what you think.

    As well as for naming classes, I take a BEM-like approach to CSS custom variables. For organising your code and making best use of intellisense, you might find it helpful to change:

    --bright-orange: hsl(31, 77%, 52%);
--dark-cyan: hsl(184, 100%, 22%);
--very-dark-cyan: hsl(179, 100%, 13%);

    to something like:

    --color__orange--bright: hsl(31, 77%, 52%);
--color__cyan--dark: hsl(184, 100%, 22%);
--color__cyan--very-dark: hsl(179, 100%, 13%);

    Marked as helpful

    0
  • PecheMelba• 610

    @PecheMelba

    Submitted

    Hi everyone,

    12th challenge from Frontend Mentor. I couln'd find a clean way to have the social button hover in blue. I tried use filter css and fill and event change the svg file to put in blue. ^^" Also if someone has an idea about how to avoid my layout "jumping" when the error message appears I'm in.

    Thanks : )

    Ping comming soon master HTML CSS

    1

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    For your social buttons, instead of using <img src="[icon.svg]"> you can inline the SVG - that is, just embed the whole <svg class="icon"></svg> right in your markup.

    Then you can target it with CSS just like any other element and manipulate its properties:

    svg.icon {
    transition: all 0.2s ease;
}
svg.icon:hover {
    fill: blue;
    transition: all 0.3s ease;
}

    demo

    Note that you might need to remove "style" attributes from your SVG to give control to the CSS - inline attributes will override class properties like any HTML element.

    You can do all kinds of fun things with this technique!

    Marked as helpful

    1
  • mohamed yasser amer• 610

    @mohamedyasser27

    Submitted

    How Can I layout The Components better because it got really messy with all those divs that i made?

    VSCode,

    1

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Oops, it's gone!

    0
  • Ben• 770

    @BenConfig

    Submitted

    Sorry for uploading something that looks incomplete. It is complete, but this is my first time using Tailwind and I've not figured out how to link the CSS. I've been struggling with this for the last 4 - 5 hours so any help would be greatly appreciated.

    Profile Card Component (Tailwind)

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I'm sort of astounded by how little structure there is here, in terms of actual elements I mean. It's impressively minimal, but I wonder how someone using, say, a screen reader would understand the content.

    The user name is a heading, but then everything else is just paragraphs. I think it is possible to infer what everything means, just about, but it'd be difficult. (I'm just thinking aloud here, BTW - parsing this design into semantic HTML is tough; I spent ages figuring something out! 🙂)

    Anyway, to answer your question - you said CSS, but I guess you mean SVG? I don't know why the background-images aren't working; changing the filepath from / to ./ didn't work the way I thought it would.

    You could try extending your config if you want to adhere strictly to the utility-first approach, but if I were you I'd just slap style="background-image: url(./images/bg-pattern-card.svg)" straight into <main>.

    Marked as helpful

    1
  • Mark Mitchell• 1,820

    @markup-mitchell

    Submitted

    These abstract backgrounds for component challenges are my new Least Favourite Thing Ever.

    I can't figure out how they're supposed to behave responsively and I can't even seem to get them positioned absolutely to match the different device designs.

    Partly I consider them window-dressing for a component that lacks a real context (and therefore unimportant), but I still spend too much time compulsively messing around with magic numbers trying to get a visual match.

    If you're happy with your background for this challenge, or have seen it done well, please send me a link to the solution!

    Profile Card Web Component

    3

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    lol, i tried with background too, and it was even worse!

    Maybe you've got a better approach - I'll check it out, thanks. 👍

    1
  • Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    don't worry about speed, that happens naturally with practice.

    2
  • Gregg Christofferson• 295

    @gchristofferson

    Submitted

    Is there a better way to blend a background color with an image? I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image? Maybe with the single background shorthand property?

    Mobile first card component using Flexbox and BEM

    4

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    👍 you're welcome 🙂

    0
  • Gregg Christofferson• 295

    @gchristofferson

    Submitted

    Is there a better way to blend a background color with an image? I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image? Maybe with the single background shorthand property?

    Mobile first card component using Flexbox and BEM

    4

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    "I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image?"

    That's an interesting solution! The image contrast is lower in the design, is the only slight difference I can see, and the use of a linear gradient from and to the same value looks confusing at first...

    Your solution works because gradients and images occupy the same background "space". As you suggest, background-color and background-image live in different layers so you could set:

    background-image: url('../path/to/image.jpg');
background-color: var(--accent-color);

    The visual effect is the same, but IMO the code's a bit more explicit and readable.

    To reduce the contrast of the image mix-blend-mode with the exclusion or lighten values get you into the neighbourhood, although you might then need to tweak the color value for a closer visual match.

    Marked as helpful

    1
  • João Paulo Roland• 20

    @jp-roland

    Submitted

    1. Is it overkill to use Create React App/Tailwind CSS in such a simple challenge or should I use it as much as possible to get comfortable with them?
    2. Below "Why Us", I wanted "opacity-80" for every <p> tag. So I created a <div> on line 29 of app/src/index.js to encapsulate the opacity. Is this good practice or will it become infeasible in larger projects?
    3. I notice a sharp angle on every rounded corner as if the shadow were applied to a non-rounded corner. Is there a way to fix this?

    Responsive page using Tailwind CSS

    3

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I think everyone tries to get into frameworks too early... I did too! 😅

    I believe until you've felt the pain of the problem you can't really understand the solution.

    If you want to learn React, I'd advise trying to build something with JavaScript where the document updates depending on user input or actions. A todo app is the eqivalent "hello world" exercise for this.

    Look at organising your code with the Model View Controller (MVC) approach. The difficulty of that will make you appreciate the problem react solves.

    Doing FEM challenges with CSS you'll experience the problems of specificity and the cascade and organising stylesheets and the kinds of problems that TW is aimed at addressing.

    There is a lot to learn, but slow and steady wins the race!

    Marked as helpful

    0
  • Carlos Guzman• 285

    @guztrillo

    Submitted

    I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?

    Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.

    If you have any suggestion about my solution I would be thankful.

    Four card feature section master with CSS Grid en SASS

    4

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    My pleasure Carlos! I think the "tablet" layout looks cool too, but good luck convincing a UX designer 😂

    0
  • Carlos Guzman• 285

    @guztrillo

    Submitted

    I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?

    Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.

    If you have any suggestion about my solution I would be thankful.

    Four card feature section master with CSS Grid en SASS

    4

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Oh, and I noticed that between 576px and 847px viewport width the layout "breaks" in a way I assume is unintended for this (broadly speaking) tablet range.

    It reflects well on your implementation choices that the layout still looks good and could conceivably be intentional!

    Marked as helpful

    0
  • Carlos Guzman• 285

    @guztrillo

    Submitted

    I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?

    Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.

    If you have any suggestion about my solution I would be thankful.

    Four card feature section master with CSS Grid en SASS

    4

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Hi Carlos,

    There's no single "right" solution and yours looks really good to me! The use of container elements looks very economical and the semantic elements and headings hierarchy looks good. You really went all-out with grid didn't you?! My instinct would have been to use flexbox more for the grid-items, but I'm not sure whether that would offer any advantages, really.

    For the top border I'd add another level to the card markup. Put the border on the inner element and the shadow and border radius on the outer element. demo.

    You might want to have a look at the order of your sass imports. By importing base third you end up with

    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

    being declared some way down your outputted stylesheet... it doesn't seem to be causing a problem here, but it could easily do in a larger project. Your base styles probably want to be imported first and then overridden as your specificity increases.

    I'm not super familiar with sass, but I feel like you're not taking full advantage of its features? You could be nesting selectors like:

    .cards-header {
     display: grid;
     gap: 1rem;
     place-content: center;
     place-items: center;

     h1 {
          font-weight: 200;
          text-align: center;
          max-width: 30rem;
     }

     p {
          max-width: 32rem;
          text-align: center;
     }
}

    and using sass (or just css custom variables) to store common values. For example you have font-size: 15px in quite a few places, and for reasons of responsiveness and scaling that might better be expressed as a rem value.

    If you declared

    :root {
    --font-size--small: 15px;
}

    and set all the instances of font-size to font-size: var(--font-size--small) you could update the variable definition like so:

    :root {
    --font-size--small: 2rem;
}

    and it would update everywhere at once.

    I had to look really hard at your project to find these small suggestions... I hope I've made sense!

    Marked as helpful

    0
  • Célio• 260

    @celioFagundes

    Submitted

    Why *{margin:0} removes all margin but if you put margin :0 in the specific element it's doesnt work the same?

    social-proof-section

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    I'm really struggling to understand what you're getting at, or what you're trying to achieve.

    When you write * { margin: 0; } it removes all the margin values set on any element in your document. If you do that at the top of your stylesheet (as you have), it removes the native styles that a browser might set by default.

    When you remove the margin property from your * declaration, each element will have whatever margin is set by default by the browser except where you override them by adding margin properties to selector rules in your stylesheet.

    By then adding margin: 0 at the end of class declarations, you remove whatever margins exist on the selected elements, whether they're browser defaults or values you've previously set.

    You know that the order of the CSS matters, right? If you write a class:

    .example {
    margin: 20px;
    margin: 0;
}

    the element will end up with no margin?

    and if you write:

    .example {
    margin: 20px;
    margin: 0;
}

.example {
    margin: 20px;
}

    the element will end up with margin: 20px?

    Marked as helpful

    0
  • Michael Morrison• 500

    @mjmorrison10

    Submitted

    I believe I need help with the responsive design with the images. It's not 100% circular when on smaller width. Other than that, I think I did a good job?

    Any tips for having better code?

    Flexbox

    1

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Hi Michael,

    The CSS working group draft says:

    "When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box."

    Therefore your explicit width property is being overridden by the flex-item's default flex-shrink value which

    "determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row."

    The simplest solution is to add flex-shrink: 0 to your .image class (on the div wrapping the img).

    0
  • Célio• 260

    @celioFagundes

    Submitted

    Why *{margin:0} removes all margin but if you put margin :0 in the specific element it's doesnt work the same?

    social-proof-section

    2

    Mark Mitchell• 1,820

    @markup-mitchell

    Posted

    Can you give an example? It's not clear what you're asking.

    Marked as helpful

    1