Looking to hire developers?
@DarrickFauvel
@badgujarankush
Submitted
Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.
@DarrickFauvel
Posted
@badgujarankush I noticed in your HTML that your element up one line, into the very bottom of the <body> element, it will become conventional and within common practice. š Another conventional location would be the within the <head> element, but using the defer attribute.
Here is a good Stack Overflow post addressing this very issue. Where should I put tags in HTML markup?
I hope this is helpful. š
@badgujarankush
Submitted
Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.
@DarrickFauvel
Posted
Hi @badgujarankush, š
If you would like to address the "All page content should be contained by landmarks"ā ļøwarning issue in the accessibility report, you can place the attribution div inside a <footer> element.
"It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer." more info
I hope this is helpful. š
@federico-madrid
Submitted
Do you think my code is ok? I appreciate any advice or help.
@DarrickFauvel
Posted
Hi @federico-madrid, š
Congratulations on posting your first solution! š„³
To fix the accessibility issue in the accessibility report (see above ā¬ļø), you will have to change your h3 elements to something else. The report is saying that if you use an h1 element on your page, the next heading element you can use is h2, which is a valid increment of +1.
However, I would recommend that you use a <span class="metric-count"> element. Also, I would do something similar for the <p> tags and replace them with <span class="metric-label">. Try this:
<div class="metrics">
<div class="metric">
<span class="metric-count">80K</span>
<span class="metric-label">Followers</span>
</div>
<div class="metric">
<span class="metric-count">803K</span>
<span class="metric-label">Likes</span>
</div>
<div class="metric">
<span class="metric-count">1.4K</span>
<span class="metric-label">Photos</span>
</div>
</div>
...with this CSS:
.metric {
display: flex;
flex-direction: column;
align-items: center;
}
So, the reason for replacing those elements with <span> tags is for accessibility. The metric-count and metric-label are not headings or paragraphs. They are just generic pieces of small text that are okay to be given a generic element like <span>.
I hope this is helpful. š
@darioriverosp
Submitted
@DarrickFauvel
Posted
Hi @darioriverosp, š
Congratulations on posting your first solution! š„³
To fix the accessibility issues in the accessibility report (above ā¬ļø), you need to use at least one semantic html element. I would suggest wrapping your .card element with a <main></main> element. Also, you can do the same with <footer></footer> around the .attribution element.
I would also recommend moving the .container to inside these "landmarks". Try something like this:
<main>
<div class="container">
<div class="card"></div>
</div>
</main>
<footer>
<div class="container">
<div class="attribution"></div>
</div>
</footer>
I hope this is helpful. š
Marked as helpful
@travelingtramp
Submitted
@DarrickFauvel
Posted
Hi @travelingtramp, š
Congratulations on your first solution submission! š„³
To fix the accessibility issues in the accessibility report (above ā¬ļø), you can wrap a semantic html element around your code, like <main></main>. This is a "landmark" for the content on your page and makes your page one step closer to being accessible.
I hope this is helpful. š
@KasraTabrizi
Submitted
Had some difficulties positioning the images in desktop mode. Feel free to give a better solution.
@DarrickFauvel
Posted
Also @KasraTabrizi,
You may want to adjust your media query. I am viewing your solution on my laptop which has a screen width of 1366px and I cannot see the desktop layout without zooming out and expanding my viewport to at least 1440px. The actual total width of the "content" in the design is no more than 962px.
Try setting a max-width for your container before using a media query, to be better viewable on small screens. Try something like this:
.your-container {
max-width: 327px;
}
@media (min-width: 962px) {
.your-container {
max-width: 962px;
}
}
I hope this is helpful. š
Marked as helpful
@TheRemyD
Submitted
How can I make this simple card more accessible to all internet users?
@DarrickFauvel
Posted
Hi @TheRemyD, š
Congratulations on posting your first solution! š„³
To fix the accessibility issues from the accessibility report (above ā¬ļø), you should add some semantic html markup. You could wrap a <main></main> element around your .card element. You can also wrap a <footer></footer> element around the .attribution element too. These semantic html elements are "landmarks" for the content on your page.
I hope this is helpful. š
Marked as helpful
@bobo62234
Submitted
I kind of forced the image in position with padding but I'm kind of unsure if thats the correct way to do it. If there is a better way to center-align, Iwould like to know because at one point the card was half way leaving the screen.
@DarrickFauvel
Posted
Hi @bobo62234, š
Congratulations on your first solution! š„³
It looks like your font face is not working properly. Try this in your stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
...and...
body {
font-family: 'Outfit', sans-serif;
}
I hope this is helpful. š
Marked as helpful
@tkdProgrammer
Submitted
@DarrickFauvel
Posted
Hi @tkdProgrammer, š
Congratulations on your first solution! š„³
It looks like your font face is not working properly. Try this in your stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
...and...
body {
font-family: 'Outfit', sans-serif;
}
I hope this helps. š
Marked as helpful
@KasraTabrizi
Submitted
Had some difficulties positioning the images in desktop mode. Feel free to give a better solution.
@DarrickFauvel
Posted
Hi @KasraTabrizi, š
Nice work on this challenge! š
I would recommend setting all of your font sizes to use rem instead of pixels, for responsiveness. I use the :root { font-size: 62.5% } trick. This essentially makes 1rem = 10px. So, a 25px font size is equal to 2.5rem. It makes it very easy to do the conversion in your head by moving a decimal point.
šNote: This will affect all font size related values. So, you have to adjust them accordingly.
I hope this is helpful! š
Marked as helpful
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the FAQ Accordion Card.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@DarrickFauvel
Posted
Hi @catherineisonline, š
Nice job! š
What helped me with the image positioning was using containing elements with background images. Here is an html example of my containing elements:
<div class="card">
<div class="card__image">
<div class="card__image-main"></div>
<div class="card__image-main-shadow"></div>
<div class="card__image-box"></div>
</div>
<div class="accordion-container-here"></div>
</div>
Feel free to look at my solution to see more. I spent so much time on it to get it as close to the design as I could. š¤Æ
You might also want to put a transition on your accordion. I did that as well.
I hope this is helpful. š
@vanzasetia
Submitted
Hello everyone! š
I just want to create a simple project to boost my motivation a bit. Also, I keep it as simple as possible since it's a simple challenge so I don't want to think too much about it. However, I have written a README where I mention some approaches that I could take to finish this challenge. I hope that it will be helpful.
Anyway, feel free to give me any suggestions or feedback. Thanks!
@DarrickFauvel
Posted
Hi @vanzasetia, š
Great job! š
The only things I can see are slight font size and line height issues. I don't know if you've ever tried the :root { font-size: 62.5% } trick? I use it all the time (until someone tells me a better way). It sets up all of your rem font sizing to be 1rem = 10px. So, a 25px font from Figma would be equal to 2.5rem.
As for line height, I have been using the calc() function to do the math for me. I get the pixel line height from Figma, say 28px for the heading, divide it by the heading pixel font size of 22px, and the result will be a number.
So, in this challenge try this:
:root {
font-size: 62.5%;
}
.card__title {
font-size: 2.2rem;
line-height: calc(28 / 22);
}
.card__description {
font-size: 1.5rem;
line-height: calc(19 / 15);
}
šNote: It will throw off your other sizes based on the root font size. So, you would adjust accordingly.
I hope this helps! š
@al-latte
Submitted
Hey guys!
So with this challenge I tried to approach it with mobile first development but the media queries and layout were quite the struggle, so I went with desktop first. Do you guys have any suggestions as to how I can tackle mobile first development? Please let me know :D
Also if you have any other critiques or suggestions leave me a comment.
@DarrickFauvel
Posted
Hey @al-latte,
To fix the accessibility issue in the accessibility report, you can insert a visually hidden h1 tag into your page. Use this <h1 class="visually-hidden">3 column preview card component</h1> element at the top of your document.
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
I hope this is helpful. š
:D
Marked as helpful
@al-latte
Submitted
Hey guys!
So with this challenge I tried to approach it with mobile first development but the media queries and layout were quite the struggle, so I went with desktop first. Do you guys have any suggestions as to how I can tackle mobile first development? Please let me know :D
Also if you have any other critiques or suggestions leave me a comment.
@DarrickFauvel
Posted
Hi @al-latte, š
Good job on this challenge. š
Yes, you definitely want to start with mobile development first. When you start this way, it is a good starting basis for responsively changing your layout at larger screen sizes. But, you should keep the desktop layout in mind to plan ahead for any major layout changes.
You might want to consider starting with this @media (min-width: 768px) for your media query. This means that starting at the smallest screen size and up to 767px, you should have a flex column direction. Then, any screen size 768px and above will have a flex row direction.
I like to be consistent and use the min-width media query property. If you also want to have a query for a larger screen size like 1000pxor so, make sure to always put the larger screen size query before the smaller screen size query. The order matters.
I hope this is helpful. š
:D
Marked as helpful
@bruno-candia
Submitted
How can I improve my css? I was a little in doubt if the way I made my css is the best for responsiveness.
@DarrickFauvel
Posted
Hey Bruno,
I would also recommend removing all of the complex CSS reset style rules in your stylesheet to simplify your code.
If you want to use a simpler reset, you can use this.
:root {
font-size: 62.5%; // as I mentioned about previously
}
* {
box-sizing: border-box;
margin: 0;
}
To explore this more, take a look at Josh Comeau's Custom CSS Reset.
If this was helpful, let me know. š
@bruno-candia
Submitted
How can I improve my css? I was a little in doubt if the way I made my css is the best for responsiveness.
@DarrickFauvel
Posted
Hi Bruno, š
Congratulations on submitting your first solution! š„³ It looks really good.
A good HTML practice with a card component is to wrap your card content in a <div class="card"> element. Also, within the card element, you can have card__image and card__body elements. This is what I did for my solution.
It looks like you have a mix of px and rem font sizes. I would recommend using `rem' for all font sizing so as to be responsive to grow and shrink with different screen sizes.
A method I use to help me easily translate px to rem is to set font-size: 62.5% in the :root. This makes, 10px = 1rem. This way if you want to use a font size of 24px, all you have to do is move a decimal point and use 2.4rem instead. This also works great for margins, paddings, height, and width. However, em would be a better choice for those, but it is trickier to use.
Here is a good youtube video explaining this concept.
If this was helpful, let me know. š
@NaveenGumaste
Submitted
@DarrickFauvel
Posted
Hi @Crazimonk,
I tried to preview your site, but it looks a little broke and does not look like the screenshot.
Can you republish and I'll be happy to take another look?
:D
@romzc
Submitted
Hello community, my solution for this challenge.
@DarrickFauvel
Posted
Hi Rony, nice job.
For your button, you might want to add cursor: pointer to your style rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Also, you may want to try adding transition: .2s ease-in-out on your buttons.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Happy coding! š :D
Marked as helpful
@blade-01
Submitted
It's my first time trying out tailwind-css, and I must say, it's really cool š I had problem with the config though, any changes I made to the tailwind.config.js file overrides all tailwind properties (dunno why tho), say
colors: {red: '#ffffff"}
<div class="text-red"></div>
From what I understand, I'm supposed to still be able to access text-red-100 etc., but that's not the case. Still thinking of a work around for that. š¤
Your feedbacks would be appreciated.
@DarrickFauvel
Posted
@blade-01 Nice work. If you want to remove the issues in the accessibility report, you can wrap your card in a <main> html element. Also, you could apply <footer> to the attribution.
I hope that helps.
Happy coding! š :Darrick
Marked as helpful
@darryncodes
Submitted
Hi everyone š
Another really enjoyable one to code up. I definitely feel like i'm speeding up and have carved out a decent little workflow.
Any thoughts welcome!
Happy coding š¤
@DarrickFauvel
Posted
Hey Darryn, nice work! I noticed that the background image does not display at screen widths <= 650px. There is a pattern-background-mobile.svg file that can be used for small screen sizes. Make it your default background image for small screens and use a min-width media query to change to the pattern-background-desktop.svg for larger screens.
Hope this helps.
:Darrick
@DarrickFauvel
Posted
@miuoshv I also noticed that you are missing the active states of the component. Take a look at the active-states.jpg file for reference.
:D
Marked as helpful
@DarrickFauvel
Posted
Hi @miuoshv, it looks like you have some reported accessibility issues. To fix them, try this:
Issue: "Document should have one main landmark"
Solution: You should use at least one semantic HTML element in your code, like <main>. Here's a good reference. https://www.w3schools.com/html/html5_semantic_elements.asp
Issue: "Page should contain a level-one heading"
Solution: You can use <h1>Order Summary</h1>.
I hope this helps.
:D
Marked as helpful
@Laing91
Submitted
I'm sure this could be done much much better, I tried utilizing flexbox as much as I could.
@DarrickFauvel
Posted
To remove the HTML validation issue, "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections."
You could make <p class="text-one"> an <h1> element.
:D
Marked as helpful
@Laing91
Submitted
I'm sure this could be done much much better, I tried utilizing flexbox as much as I could.
@DarrickFauvel
Posted
Hi Callum, it looks like you have an invalid link to your solution code.
Instead of this address:
https://github.com/Laing91/FEM-QRCode/tree/main/qr-code-component-main
Try this one:
https://github.com/Laing91/QR_Code_FEM
This should make it easier for others to look at your code.
:Darrick
Marked as helpful
