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

All comments

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

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

    Marked as helpful
    1
  • Jordan•180
    @GitNuttsSubmitted about 3 years ago

    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-mitchellPosted about 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
  • Yazdun•1,310
    @YazdunSubmitted about 3 years ago

    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-mitchellPosted about 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 about 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 about 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
  • Henok Hailemariam•40
    @henokhmSubmitted about 3 years ago
    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-mitchellPosted about 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
  • Henok Hailemariam•40
    @henokhmSubmitted over 3 years ago
    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-mitchellPosted about 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 about 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
  • Ben•770
    @BenConfigSubmitted about 3 years ago

    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-mitchellPosted about 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
  • Leon•20
    @rupiacodesSubmitted about 3 years ago

    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-mitchellPosted about 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
  • PecheMelba•610
    @PecheMelbaSubmitted about 3 years ago

    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-mitchellPosted about 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
  • mohamed yasser amer•610
    @mohamedyasser27Submitted about 3 years ago

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

    Oops, it's gone!

    0