@antonisntoulis
Submitted
Would love to know how this could be done using only CSS. My only idea is to use hidden checkboxes and use :checked selector to open accordions etc.
@markup-mitchell
@antonisntoulis
Submitted
Would love to know how this could be done using only CSS. My only idea is to use hidden checkboxes and use :checked selector to open accordions etc.
@markup-mitchell
Posted
There are native HTML elements - <detail>
and <summary>
that will get you most of the way there!
Marked as helpful
@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
@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?
@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
@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 div
s into section
s 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
@macpoz
Submitted
Hi
This is my 5th challenge here. Feel free to give feedback
@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.
@macpoz
Submitted
Hi
This is my 5th challenge here. Feel free to give feedback
@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.
@henokhm
Submitted
<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?
@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.
@henokhm
Submitted
Any other suggestions and improvements are also welcome!
@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...
@Infinit-dot
Submitted
Not very happy with the solution, there is a possibly better way to position all images. Feel like my CSS file is a little mess. Any feedback is welcome.
@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
@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.
@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.
@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:
Finally, any additional comments and recommendations are welcome. Thanks! :-)
@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
@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 : )
@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;
}
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
@mohamedyasser27
Submitted
How Can I layout The Components better because it got really messy with all those divs that i made?
@markup-mitchell
Posted
Oops, it's gone!