Skip to content
OverviewSolutions
10
Comments
101
Mark Mitchell
@markup-mitchell

All comments

  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

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

    Marked as helpful
    1
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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-mitchellPosted over 3 years ago

    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-mitchellPosted over 3 years ago

    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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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-mitchellPosted over 3 years ago

    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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    "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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    @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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    Oops, it's gone!

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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-mitchellPosted over 3 years ago

    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-mitchellPosted over 3 years ago

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

    2
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    👍 you're welcome 🙂

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    "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
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    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