Looking to hire developers?
@SJ-Nosrat
@Lfrancos
Submitted
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!!
@SJ-Nosrat
Posted
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!
Marked as helpful
@AlexanderWiklow
Submitted
This page is not pixel-perfect. I am just happy i finished it:)
@SJ-Nosrat
Posted
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!
Marked as helpful
@Git-Lux
Submitted
My second challenge on this site. Hope I did good. Please leave feedback and tips. Thank you fellow devs :)
@SJ-Nosrat
Posted
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!
Marked as helpful
@annab6
Submitted
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!!!
@SJ-Nosrat
Posted
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!
Marked as helpful
@Auddity
Submitted
This is a re-upload.
Cleaner HTML, Answer box smooth transition
@SJ-Nosrat
Posted
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!
Marked as helpful
@ilyes-B-H-D
Submitted
I'm happy to receive any feedback ☺️
@SJ-Nosrat
Posted
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!
@Austinet
Submitted
Coded with semantic HTML, and CSS.
@SJ-Nosrat
Posted
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.
Marked as helpful
@jgbpessoa
Submitted
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!
@SJ-Nosrat
Posted
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
Marked as helpful
@tafarathedev
Submitted
no a question but i loved the challenge so much ,thank you
@SJ-Nosrat
Posted
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!
Marked as helpful
@Paul-Verdure
Submitted
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!
@SJ-Nosrat
Posted
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!
Marked as helpful
@luis08201
Submitted
Hi everyone. This is my first time using GRID. I would love if you give me feedback about the code. I really appreciated it.
@SJ-Nosrat
Posted
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!
Marked as helpful
@Jakub200CZ
Submitted
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
@SJ-Nosrat
Posted
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!
@ubong-s
Submitted
Any feedback is welcomed. Cheers
@SJ-Nosrat
Posted
Hi, Good solution! I went through your code and noticed a few things;
In the styles for your .wrapper class; please change justify-items: center; to justify-content: center; as the latter has no effect.
Also, on your .container class apply a max-width: 1440px instead of a percentage value; as this will cause your cards to overly expand on larger screens.
Best of luck with your coding journey!
Marked as helpful
@Reykjabik
Submitted
I really struggled here with form validation. At first I tried to do it mostly in HTML and CSS but I ended up using JS for it. I spent 50% of the time working on this, it was the most challenging exercise so far.
@SJ-Nosrat
Posted
Hi,
Your solution looks good! However, you should add the background-image on the <body> tag, then your project will look great. Also, the form validation is supposed to use JS; you did great!
@elasri21
Submitted
i got some advice from you guys and i applied them to my code and the challenge now looks good than before thank you guys for your help
@SJ-Nosrat
Posted
Hi, Cool solution! Looks good!
I've noticed that on the desktop design; the page looks left-aligned try and add the below rules to your CSS to fix that issue, as follows:
html {
height: 100%;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
}
Also, the <h1> tag should be used once per page; as this is a top-level heading and has special meaning for accessibility purposes.
Add the aria-hidden="true" attribute to your <img src="images/logo-chrome.svg" alt=""> since there's no alt="" description.
Add the type="button" to your <button>More Info</button>.
All the accessibility issues is coming from using <div> tags too much; try and use <article> for the cards.
When clicking on the accordian it expands nicely; however, the arrow still points downwards when open; try and use: transform: rotate(180deg).
I hope the above helps!
Best of luck on your coding journey!
@ash358241
Submitted
I want to furnish my front-end skills and want to take them to the next level. So please suggest to me, how should be my approach for getting the best outcome.
@SJ-Nosrat
Posted
Hi Ashraful, My suggestions would be to please stay away from frameworks if you're just starting to learn front-end development; it will not help you in understanding how CSS works.
This challenge only requires the use of HTML 5 and CSS. Frameworks doesn't allow you to internalize and understand how the different technologies work.
Approach every modern design from the Mobile Approach; that is first code the solution for the mobile first, then try and handle for larger screen sizes. Kevin Powell has a great YouTube video here.
Then look into media queries to accomodate for different screen sizes; here is another good YouTube video by Kevin Powell on media queries
Then learning CSS Flexbox and CSS Grid on freecodecamp.
The above suggestions will really help! If you need any more info, please let me know; I'll be more than happy to do so.
Best of luck with your coding journey!
Marked as helpful
@CostiVoicu
Submitted
Any feedback is welcomed!
@SJ-Nosrat
Posted
Hi Costi, Great looking solution!
I'd use a little bit of semantic HTML and make <div class="card1 card"> into an <article>; since each card is a unique stand-alone content.
Best of luck with your coding journey!
Marked as helpful
@luis08201
Submitted
Hi everyone. This is another challenge I do. Feedback are welcome
@SJ-Nosrat
Posted
Hi Luis, Great solution! Looks wonderful.
I'd only suggest adding the svg images as <img aria-hidden="true" src="./img/bg-pattern-bottom-desktop.svg" alt="bg-pattern-bottom-desktop.svg" class="bg-pattern-bottom-desktop"> instead adding the raw <svg>.
Marked as helpful
@edavid-mf
Submitted
This challenge was harder than I thought. The background with the SVG's was a suffering for me, I ended up checking other people code and I found the way, honestly, this challenge tought me a lot, specially about the background position, never thought it was such a complex property. Any feedback will be kindly appreciated!
@SJ-Nosrat
Posted
Hi David, Great to see that you pushed through this challenge! Your solution looks good, I'd add the following below code, in order to center your card properly.
body {
padding: 130px 21px 20px 21px;
background-color: hsl(185, 75%, 39%);
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-repeat: no-repeat;
background-position: right 51vw bottom 37vh,left 50vw top 45vh;
text-align: center;
font-family: 'Kumbh Sans' , sans-serif;
color: hsl(0, 0%, 59%);
/* ADD THE BELOW CODE*/
min-height: 100vh;
display: grid;
place-content: center;
}
Since you already added: height: 100%; to your <html> tag in your CSS the above min-height: 100vh; will let your page take up the entire viewport height; you can read the Freecodecamp article by Dave Gray here.
Hope the above helps!
Best of luck with your coding journey!
Marked as helpful
@nottohave
Submitted
I had some trouble with the design layout especially the position of different sections and divs. At some point where I feel like I overuse position relative and absolute just to move that section. I wish there could be a simpler approach to this in CSS, but I will leave this for now. I think the background circle svg position can also be improved. I am not sure about the responsive design for the fonts. Any suggestions about the layout would be greatly appreciated.
@SJ-Nosrat
Posted
Hi Fay,
With regards to positioning the background patterns, you can add the following: background-position: top -47rem left -69rem, bottom -49rem right -69rem; to your body tag.
You can change the numeric figures to the desired value to position the patterns as you wish.
Also, I noticed that you coded first for the desktop version first. The best workflow is to start Mobile approach and then adding @media (min-width: *desired values here*) progress to larger screen sizes. This way you simplify the process for coding up your solution.
Hope the above helps!
Best of luck with your coding journey!
Marked as helpful
@nickcarlisi
Submitted
Hey guys,
This is my second submission. Made a few suggested changes in the css and am happy with the layout for the most part. Still would like to improve the functionality. I want to be able to close the accordion when clicking on the question that's already open. As of now, you can open the accordion when clicking on a question and it closes when you click on and open another, but I would like to be able to click the open one again to close it. Any suggestions? Thanks!
@SJ-Nosrat
Posted
Hi Nick, Great solution! With regards to your first point, see the below steps, as follows:
Remove the overflow: hidden; on <div class="split image-container"> in your CSS.
Add position: relative; to your .desktop-images class in your CSS.
Use the top and left properties to position your box image to the desired position. The properties accepts negatives values too.
Lastly to clip the part of the hero image, add the following;
.main-image {
display: block;
position: absolute;
transform: translate(-20%, -50%);
z-index: 2;
/* ADD THE BELOW CODE */
clip-path: inset(0 0 0 4.5rem);
}
The inset value takes values starting with the top - right - bottom - left much like the shorthand for properties like margin. Think of clip-path as taking a cutter and cutting rectangular strips of a specified length.
<img class="arrow" src="/images/icon-arrow-down.svg" alt="" /> if the alt="" is left empty, then add the aria-hidden="true" attribute, as this allows screen-readers to skip <img> tags that are purely used for decorative purposes. Also, some of your <img> tags are missing the alt attribute; that's you're getting HTML issues. Also, look into semantic HTML.With respect to your second point, you can add the following;
body {
height: 100vh;
background-image: linear-gradient(var(--soft-violet), var(--soft-blue));
font-family: "Kumbh Sans";
font-weight: 400;
font-size: 0.85rem;
line-height: 1.6;
color: var(--dark-grayish-blue);
position: relative;
/* ADD THE BELOW CODE*/
display: grid;
align-content: center;
}
That should get rid of the excess scroll bar.
Hope the above helps!
Best of luck with your coding jouney!
Marked as helpful
@PresidentTree
Submitted
I do not think there is anything wrong with the code this time except that it probably does not match the design perfectly, but any feedback is still helpful.
@SJ-Nosrat
Posted
Hi, The solution looks good. I'd suggest the following additions to your HTML structure and CSS, as follows:
<img src="images/logo.svg"> try and add the following attributes aria-hidden="true" since the logo is purely decorative and will help screen readers to skip it. Also the addition of the alt="" will be good pratice.
<button>5%</button> include the type="button".
In additon to the other CSS properties add to the .calculator class the following:
.calculator {
max-width: 75%;
margin: 0 auto;
}
The above will give a nicer look to the calculator not allowing the overall width to expand too much.
<img> tag in a <figure> tag as this provides more meaning to screen readers.Hope the above helps!
Wonderful work!
Best of luck with your coding journey!
@imparassharma
Submitted
I tried mobile first approach for making this webpage. I am not able to properly set the background image to only top half in the mobile width. If anyone can help me out. Also all other suggestions are welcome.
@SJ-Nosrat
Posted
Hi Paras, Great that you're using mobile first approach on your solution; that's the correct way to go! With regards to your question it's an easy fix, do the below:
body{
margin: 5vh 10vw;
background-color: hsl(257, 40%, 49%);
background-image: url(images/bg-mobile.svg);
background-position: top;
background-size: contain;
font-family: 'Open Sans', sans-serif;
/* ADD THE BELOW CODE */
background-repeat: no-repeat;
}
Also, did you notice that when viewing your solution in mobile screen sizes, your social links appear above you .main content; I think you should cut-and-paste the below code into your <div class="main"> container as you have display: flex; on it:
<div class="social-link">
<a href=""><aria-hidden="true" img src="images/facebook.png" alt=""></a>
<a href=""><aria-hidden="true" img src="images/twitter.png" alt=""></a>
<a href=""><aria-hidden="true" img src="images/instagram (1).png" alt=""></a>
</div>
Notice that I included the aria-hidden="true" attribute for you <img> tag, this helps screenreaders skip images that are purely decorative.
Lastly, instead of using <div>'s everywhere in your HTML structure, try and use semantic HTML, you can read more on it here.
For example your <div class="main"> element can be: <main class="main">.
Hope the above helps!
Best of luck on your coding journey!
Marked as helpful
@KaMazim
Submitted
I had difficulties sizing the image and choosing responsive break points. Any tip related to that would be useful.
@SJ-Nosrat
Posted
Hi Kaina, Your solution looks good!
The reason why you were maybe having difficulties with the break points, is maybe you've designed for the desktop version than tried to scale down to mobile screens. Try the following code your solution first for mobile then add @media (min-width: 768px) etc for larger and larger screen sizes. It's also fine to add multiple @media queries to achieve the desired responsiveness for multiple veiwport sizes.
I learnt learnt the mobile first approach from Kevin Powell's video.
Hope the above helps!
Best of luck with your coding journey!
Marked as helpful
