Hello everyone!! Hope everyone is having a lot of fun with the challenges : )
I'm not sure what is the best way to do things for this kind of form validation. I've been doing it by adding a class and removing it. But this time I did all the changes of the styles directly form JavaScript. Not sure what is the best practice, if any of you has an idea or an article that talks about that I would really appreciate it : )
Thank you so much!!
Hi Lorenzo,
Great job, love the responsiveness of the page. I think your approach by controlling your CSS with JavaScript is quite fine. You don't need to create an entire <div> and styled to only have JavaScript removing and add it back in. The whole point of using JS is to dynamically change specific items on a page.
Also, there's this new concept of CSS-in-JS which I came across, however, it has to deal with the React framework.
I also noticed that your icons at the bottom of the page are not there. Furthermore, for your <main> container tag: instead of adding width: 95%; and max-width: 640px;, you can do the following;
.main {
margin: 0 auto;
text-align: center;
width: min(640px, 95%);
}
width: min(640px, 95%); will take the minimum value of the two values relative to the viewport size.
Hope the above helps!
Best of luck on your journey! Wonderful work!
This page is not pixel-perfect. I am just happy i finished it:)
Hey Alexander, Great job! I found this particular project quite challenging myself.
I was just wondering why don't you take full use of Flexbox; I see you added the display: flex; property on your <div class="container"> tag, however, I don't see justify-content: center; and align-items: center; properties; this will center your card properly.
Although it does break card on the mobile-view. I suggest approaching every project with a mobile-first approach and then adding the appropriate @media queries for larger viewport sizes (screen sizes). You can find more about the approach on the YouTube video by Kevin Powell.
Best of luck on your coding journey! You're doing great!
My second challenge on this site. Hope I did good. Please leave feedback and tips. Thank you fellow devs :)
Hi Luka, Awesome job on this challenge. The page responds perfectly between mobile-view right up to desktop sizes. I was looking at the Accessibility Issues generated by the report, find below some tips:
<div class="container"> to <main class="container">;<figure>tag instead of the <article> tag since you're wrapping <img> (images);<h1> tag in a <header> tag would be useful to screen-readers.The above tips follows Semantic HTML, since we're trying to give meaning to how we section off our content: you can read more about it here.
Best of luck on your journey! You're doing great!
I think my design looks similar, but I had a lot of difficulties with CSS part (to locate image, cube, and especially shadow on desktop layout). I feel like I did it in a strange way. Is it supposed to use negative margin/absolute positioning or transform-translate for creating such 3D layouts...? Any feedback is very welcome!!!
Hi Anna, Wonderful solution! I've looked at your CSS and noticed the following;
.faq-text class; you can change the overflow-y: auto; to overflow-y: hidden; that'll get rid of the scroll when you open the accordian.transform property and add: top: 8.85rem; and left: -7rem; that should place the box nicely giving the shadow effect. Or as you've used transform with the following values: transform: translateX(-62%) translateY(35%); either approach is perfectly fine; that's the beauty of coding.With regards to negative values, MDN documentation mentions the following for top: A negative, null, or positive <length> so it's perfectly fine to use negative values.
Once again well done! Looking forward to your other solutions!
Keep on coding and best of luck with your coding journey!
This is a re-upload.
Cleaner HTML, Answer box smooth transition
Hi James, Really well done on this challenge! My suggestions are with regards to your HTML tags used, as follows:
<div class="container"> can be a <main class="container"> tag.<div class="card"> can be an <article class="card"> tag. <div class="box"> can be a <figure class="box"> tag. <h1>FAQ</h1> can also be <title>FAQ</title> tag wrapped within a <header> tag; as this will provide a landmark; you can learn more about landmarks in the report generated by Frontend Mentor.The above is to orient you with using more meaningful tags to both the browser and the end-user using screen readers in order to better assist in accessibility.
You can learn more about Semantic HTML here.
Before using <div> I always ask myself what does this content in my page mean? If for example it's an <img> tag, then I'll wrap it in a <figure>; if I'd want to wrap the image; also provides a good landmark.
Hope the above helps!
Best of luck with your coding journey!
I'm happy to receive any feedback ☺️
Hi,
Awesome job! Everything looks good, however please look into re-styling the .hero class; on the desktop it looks too squeezed.
I tried to add: justify-content: space-evenly; to the .hero class, it seems to help; but a little re-work would be required.
Also, I'd embed the .hero image as using the <img> tag instead of using the ::before pseudo-element. And then add the following;
img { max-width: 100%; }
for more control over my image.
Hope the above helps!
Keep on coding and best of luck on your coding journey!
Coded with semantic HTML, and CSS.
Hi Udhe,
I'm getting a 404 ERROR when trying to preview your site; please make sure your path to your index.html is correct.
Hey Guys!
How are you doing?
I've started my journey to become a Front End Developer a month ago and I would love to receive some feedback! This is my first challenge o/
I've tried to practice Flexbox which is the latest layout technique I've learned. I just feel like sometimes I complicate things instead of making them easier haha so if you guys could take a look at my code and give me tips on how to optimize it I would love that! I also had a little trouble using semantic HTML for this challenge so I don't know if i chose the right tag.
Thank you!
Hi Jose, Great solution! Well done.
<body> with the <main> tag.width: 100vw; from your .card class and keep the max-width: 100%;width: 400px; on the .container class in your CSS.width: 400px; from the .container class and adding a margin: 0 1.5rem would help, although it does squeeze some of your other content inside the card; I'd look into restyling those.It can be hard coding the challenge just by eye-balling it. You're doing really well! Keep on coding and best of luck with your coding journey; looking forward to more of your solutions.
Cheers!
Once again well done
no a question but i loved the challenge so much ,thank you
Hi Tafara, Cool solution! I've taken a look at your code, I've noticed the following in your code:
body { font-size: 15px; font-weight: 700; height: 100vh; padding: 0 10px; /* YOU HAVE REPEATED THE BACKGROUND-IMAGE TWICE */ /* The second `background-image` overwrites the first one */ background-image: url("./images/bg-pattern-top-desktop.svg"); background-image: url("./images/bg-pattern-bottom-desktop.svg"); background-repeat: no-repeat; background-position: cover; /* INVALID VALUE */ background-size: contain; width: 100vw; font-family: "Spartan", sans-serif; }
Add the following code for the background-image only, as follows:
body { background-image: url("./images/bg-pattern-top-desktop.svg"), url("./images/bg-pattern-bottom-desktop.svg"); background-position: top left, bottom right; }
top left applies to url("./images/bg-pattern-top-desktop.svg") and bottom right applies to url("./images/bg-pattern-bottom-desktop.svg"). Notice that the values in the background-position are comma separated.
You can learn more about background-position here.
Hope the above helps!
Keep on coding and best of luck with your coding journey!
Any feedback is very much welcomed. Also, one specific question. Do you usually start by building the mobile version and then the desktop one, or the opposite?
Many thanks and nice day!
Hi Paul, Nice work! I always start with the Mobile first approach as this is best practice; there's a really nice video by Kevin Powell which explains as to why?
Then you can use @media (min-width: /*your size here*/) to build out for larger screen sizes successively.
Also, please add the below code to your existing CSS styles;
html { height: 100%; } body { min-height: 100vh; }
The above code will take up the full height of the available view-port height.
I've also taken a look at your accessibility report, I've explained the issues for some of the main ones, as follows:
<img class="star" src="icon-star.svg"> element is missing the alt attribute.
<img aria-hidden="true" class="star" src="icon-star.svg" alt=""> since the stars are for decorative purposes.div tags as wrapper; I'd suggest using semantic HTML, you can find the resource here.Hope the above helps!
Keep on coding and best of luck with your coding journey!
Hi everyone. This is my first time using GRID. I would love if you give me feedback about the code. I really appreciated it.
Hi Luis, Wonderful solution! Looks perfect to me!
For your background-pattern-quotation-marks I'd add it as a background-image as it gives more control to position it, as follows:
.testimonial-1 { /* ADD THE BELOW CODE */ background-color: var(--moderate-violet); background-image: url(/*your path here*/); background-repeat: no-repeat; background-position: top right 1.5rem; }
Your use of the grid-template-areas is really great; although you can remove the following code: grid-template-rows: repeat(2, auto); as CSS Grid will put them in implicitly.
Once again super job!
Best of luck with your coding journey!
It's my first completed challenge on this platform, it's not 100% good in text wrapping which could be improved but I didn't have the part already so I published it like this :( This problem is only at the LINK at the bottom of the card
Hi Jakub, Your solution looks good, I'd just add the below code in order to center your cards.
html { height: 100%; } body { background-color: hsl(0, 0%, 95%); /*ADD THE BELOW CODE*/ min-height: 100vh; display: grid; place-content: center; }
Lastly, please add some margin and padding to your card styling, to give some breathing room to the look and feel of the cards.
Hope the above helps!
Best of luck with your coding journey!
