Looking to hire developers?
@wendyhamel
@Git-Elimman
Submitted
What are you most proud of, and what would you do differently next time?
Rounding an image and setting up buttons
What challenges did you encounter, and how did you overcome them?
Making an image circular. Centering a div
What specific areas of your project would you like help with?
I would like help on a standard way of centering divs and an easy way to making a site responsive
@wendyhamel
Posted
Hi there!
To center content you can work with flexbox or grid. For example to center te card on the page, you can set the min height of the main or body to 100vh (full height of the screen) Then you can work with either flexbox or grid to center. Which one you choose depends on where you feel most comfortable with and what content you need to center. Sometimes the best choice is grid: if you need to center all content on some screen sizes and want to arrange the content differently on other screen sizes. If you just need to center on one axis (either horizontally or vertically) flexbox works great most of the time too.
more information on flexbox: mozilla, css-tricks and grid mozilla, css-tricks
happy coding!
This is my final project. It got really complicated trying to make it responsive with the 3 images, it looked really bad so I changed it for big screens. I couldn't figure out how to make the questions to open smoothly with transition. Also couldn't figure out how to make the images to cut off at the adge on big screen. z-index didn't help, in dev tools it said that the z-index cannot apply because of position:static, but I didn't have position:static anywhere. Any ssuggestions and help will be really appriciated. Thank you
@wendyhamel
Posted
Hi Marina, Good job taking on this challange! You are right, making this one responsive is complicated.
The smooth transitions for the answers is a problem. You can't transition dynamic height (height:auto), it needs absolute values. You can tinker around with it, but I often end up with it still beeing a bit janky.
The position: static is the default position for all elements, if you don't specify a position yourself. To make this work in this challange you will need to work with position:relative and position: absolute. The element (a div for example) containing the image should have position:relative for the image with position:absolute to work.
In this challange you will need two different locations for the two different images to show properly on different screen sizes.
If you like to improve some more, you could work on the accessibility. If you use more semantic HTML elements, your solutions will be better accessible for screen readers and by keyboard.
A <ul> with <li> items for example to show the questions and you could use the <details> element for the separate questions.
Good places to learn:
mozilla
css tricks
I do not want to reveal too much about how you could do this, it helps to figure out your own approach. But if you get stuck, Keep asking questions and don't give up!
@wendyhamel
Submitted
Working with dates.... The leap years make it hard. I ended up with a lot of javascript. Got tired of it and dicided to leave it at this. I know, I should clean up my functions. But in a real project I would never do this with JS. I would handle it with PHP. The struggle was worth it though. I am happy with the accurate results it gives, including the leap years.
@wendyhamel
Posted
I could not leave it... Cleaned up the js. Now it is accurate and easier to read the code.
@Stephenpleasant
Submitted
Please help me to put the circle border around the icons
@wendyhamel
Posted
Hi Stephen,
In answer to your question:
You are close, if you move te styling of the border from the i elements to the parent div you're all set. The i element is used for the fontawesome. I would not use it for other styling.
The padding right you added to create the space between the icons will be a problem if you move the border styling. You can change that to margin.
Notice you are writing invalid css with your line of: border-color: #fff 20px solid Do you know how you can fix that?
I won't write it out for you, so you can try for yourself. If you need more help to get it to work, feel free to respond.
Something to add:
color: white to the div styling to give the icons the white color to start with.
Hope this helps you to finish this challenge nicely!
Happy coding!
Marked as helpful
@HanSeongLee
Submitted
@wendyhamel
Posted
Hi! Nice solution.
I noticed some minor layout improvements you could make. On mobile, you can change the overflow:scroll; on your form. On some devices it can cause padding issues even if there is no scroll-bar. If you change it to overflow:auto; it will still show the scroll barrs when it needs to, but will not break the layout.
The rounded corners on the bottom of the form are hidden on mobile. And the shadow of the card is not visible on desktop. If you remove the padding bottom from the form and move the box-shadow from your style_box` div to the form, it works nicely.
Hope this helps!
Happy coding!
@correlucas
Submitted
👾 Hello, Frontend Mentor community. This is my solution for the Interactive Rating Component
This challenge was quite hard, was my first real Javascript challenge ever. I took a lots of time trying to find out how to make the rating buttons connect to the submit button to display the output popup showing the selected number. I had look several tutorial videos to understand the JS structure so I follow a video from this channel in youtube TsbSankara - JavaScript - Interactive Rating Component. Once I did the basic challenge I created a modal screen to request the user to select a button before submit, for the second step I had to ask a friend @AdrianoEscarabote for help and after a lots of his patience and some explanations I get it.
🎨 I added some custom features:
If you can add something or give me some tip. I'll be happy to hear any feedback and advice!
@wendyhamel
Posted
I'm a bit late to the party but I have some food for thought on this challenge. You got some excellent advice here already!
I like the custom design you mixed in this challenge.
When I read about the modal you implemented and the advice Grace gave you about it, I thought about a simpler way to address the problem of not submitting an empty form. You could disable the button until the user gives a rating. This way you can't submit the rating empty and you do not need the modal and all the code; accessible html and javascript needed to make the modal work properly.
I looked at my own version of this challenge and I could certainly improve it as well. At the time my focus for the challenge lay in exploring alpine.js and implementing transitions. Maybe I'll give it another go myself.
Happy coding!
Marked as helpful
@JheanKhendrick
Submitted
Hello! tried this one for today. I thought it would be an easy task but it turned out to be quite challenging. The active states were so hard for me but I was still able to finish them and I'm very proud of it. Anyway, I would appreciate any feedback to make this one as better as possible. Thank you! <3
@wendyhamel
Posted
Hi, nice job on this challenge!
Only thing missing that I could find was the active state of the title.
I like your approach on the hover active state of the overlay. Clean and simple.
Happy coding!
@RAY-DEV67
Submitted
WOULD APPRECIATE CORRECTIONS ON THIS SOLUTION IF ANY
@wendyhamel
Posted
Hi, Good job on completing this challenge.
Some improvement for the design:
<p> tag. U can use the <div> tag instead and keep the text in a <p> or <span>.I don't see the active states from the design. Did you leave them out on purpose?
Happy Coding!
@bmmar
Submitted
Found adding transparent view color overlay and icon very difficult. When I used position:absolute, the dimensions of the overlay were difficult to control. It looks as though it was using html as its containing block. I couldn't get it to use a smaller div as the containing block. Any ideas for how to do this??
Thank YOU!
@wendyhamel
Posted
Hi, nice solution!
The trick to the overlay and absolute positioning is that you have to position it's container. If you do not specify a container, your overlay should be positioned, it is positioned to the body, wich is the closesed positioned element. You can set it's container to display: relative.
I noticed the clock svg is not centered with the time left text.
I hope you manage to fix the problems with this guidence.
Happy coding!
Marked as helpful
@Errorman2003
Submitted
Had trouble animating it ? anyone has a solution to that
@wendyhamel
Posted
Hi there, Yes, the animating is a tricky one. I solved it by layering the numbers and using timeouts. The code gets a lot more complicated if you want to animate it as flipping cards.
Apart from the animating you can look into making the page responsive. Right now there is only the 1400px screen width where your solution looks balanced. I noticed the numbers in your solution are a lighter weight than the design and the title should be in uppercase.
If you need some guidence, you can take a look at my solution to this challange.
Happy coding!
@munyite001
Submitted
Feedback is always appreciated :)
@wendyhamel
Posted
Hi, I've got some issues you might want to take a look at.
The page is not showing properly on mobile size. The content gets cut of on top and you can not scroll to it. It's because of the height: 100% on main.
The image gets squashed or stretched on some screen sizes. You can use object-fit for that. probably with `:contain;' , but you should plaay around what works best in your solution on the different screen sizes.
It also looks like the header and stat-headers are bolder in the design than in your solution.
Hope this helps you along.
Happy coding!
Marked as helpful
@franeCode
Submitted
This is the first project that I am putting on Frontend mentor and I would appreciate your feedback. I've made it with HTML5 and CSS using flex. There are also a few lines of javaScript for functionality.
@wendyhamel
Posted
Hi there, nice solution to the challenge here!
Two things I noticed.
On desktop it could be a bit larger. The card, the buttons and the spaces between and around the content.
The other thing I noticed is if you click a number, then click away, the highlight disappeared. It schould stay 'active' so a user can still see which number they selected.
Happy coding!
Marked as helpful
@invictus1032
Submitted
For some reason, the compiled CSS on Netlify is a little bit different from the compiled CSS on my PC. There are 2 CSS rules missing. I tried hosting it on Cloudflare Pages, but the same problem occurred.
As you can see on the live site, the missing styles are .dicebutton-fetching and .dicebutton-hover, which are responsible for the hover state and the active state. The source of these styles are from the @layer utilities in my input.css.
@layer utilities {
.dicebutton-standby {
@apply opacity-100;
}
.dicebutton-fetching {
@apply opacity-50;
}
.dicebutton-hover {
background-color: rgb(90, 252, 76);
box-shadow: 0 0 30px 5px rgb(21, 248, 248);
}
a {
@apply text-gray-50;
}
}
The strange thing is, a and .dicebutton-standby made it through. They don't disappear, even though they all came from the same place.
Any idea why this happens? Thanks!
@wendyhamel
Posted
Hi, I think the problem is that the classes do not show up in the HTML. Tailwind looks for the classes you are actually using in your project. In your tailwind config file, you include content: ["./index.html", "script.js"]' but the script file is actually callesscript.ts` So Tailwind doesn't see these classes when building for production.
I don't see why you need the separate hover classes with @apply. Or for the a tags? You could just do this with Tailwind classes in the HTML and adding the custom color and box-shadow in the tailwind config file by extending the theme. Or am I missing something?
Happy coding!
Marked as helpful
@reymartvigo
Submitted
Hi. I'm Reymart, this is my solution to Coding Bootcamp Testimony Slider.
Feel free to give feedbacks and suggestions on how I can improve are very welcome!.
@wendyhamel
Posted
Hi, Reymart, this looks very nice!
I noticed you tagged #accessibility. Did you see the report? Your buttons are not accessible for screenreader. There is no text to explain what the buttons do. You can add the aria-label attribute. Or you can add text in a span and hide it from the viewport with a set of classes so it does not mess with your layout but is still accessible for screenreaders.
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
border-width: 0;
white-space: nowrap;
clip: rect(0, 0, 0, 0);
You should do something similar for the images: adding alt texts.
Next thing I noticed is the layout shift when you click a button. The two testimonials are not the same width. This couses the shift in layout. This is not great for the UX.
Last thing is also about UX. It is not clear how many testimonials there are and if a button can be pressed. You may want to think about a solution like looping the testimonials (you can keep on clicking the next button and it loops arount to the first testimonial) You can also disable a button when it can't be clicked. (If you are on the first testimonial, the first button is disabled and has a disabled look.)
If you want to dive even deeper into accessibility, you can also replace some div's with more sementic HTML like an article tag for the testimonial.
I noticed a console.log in the code. Best practice is to clean this up after development.
Hope this helps, happy coding!
Marked as helpful
@correlucas
Submitted
👾 Hello, Frontend Mentor coding community. This is my solution for the Art Gallery Website
When I started my journey in Frontend Mentor this was my dream challenge that I always wanted to complete. Now, after 7 months (I know it took to long, but I am a noob 💁♂️) its done! Challenge accepted and completed.
The challenge was really challenging, the main struggle I had building this html structure/css was with the header and the image gallery. I had some fun trying to figure out how to make the grid-template-area and after some tutorials I get how to use this tool (was my first time with grid-area).
🎨 I added some custom features:
🧐 Special thanks to:
mix-blend-mode: difference.Tutorials used to learn grid-template-area:
🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 1 missing)! Gotta Catch ’Em All
Ill be happy to hear any feedback and advice!
@wendyhamel
Posted
This looks great! But previous comments already established that....
I noticed one thing: the .h1-heading text where you used mix-blend-mode: difference; Blends with the image as well. It would look sharp on all screen sizes if it didn't do that.
Did you notice it and settled for this? Did you try anything to change it? I love to figure out these kind of challenges within the challenge. I don't know how to fix it (yet). I have a few idea's and plan on finding out what would work.
Happy Coding!
Marked as helpful
@adram3l3ch
Submitted
Feedbacks will be appreciated
@wendyhamel
Posted
Nice one here! I like the transition of the 'read more' button. Interesting trick for the toggle of the menu with a checkbox!
There are only two things I think could improve it a little bit:
Happy coding!
Marked as helpful
@DannyLenk
Submitted
Hi. Please, don't pass by. I need your advice! Any advice on where I can improve. And how much do I need to improve to get hired? Thank you for your opinion
@wendyhamel
Posted
Hi there, very nice try, but there is still room for improvements.
You could look at the accessibility report. It can improve your use of semantic HTML. The HTML validation report can be useful too but can show errors related to React in your case.
You should check your console while working on this project. There is a lot showing up, errors and logs, the console should remain clean when the site works as it should.
The site crashes when you search some country that is not found with a filtered region (intentionally entered a non-existing one here, just random letters like ‘dfgwxemr’).
These are some major things you should take care of.
Some more minor things:
search instead of textHope this will help you improve!
Happy coding!
Marked as helpful
@Merxibeaucoup
Submitted
The mobile nav design was an interesting one .. I did it my way tho :)
@wendyhamel
Posted
Hi, I noticed the overlapping icons on mobile too. The close icon is also hidden when you open te menu, so users have no way to close it. Next thing I noticed is in between screen sizes from 601px to around 1024px there are issues in yout responsive layout. Things overlap and overflow.
Did you notice there is a design example for the hover states? I only see them in your footer. But not in the main menu or for the 'learn more' buttons.
Happy coding!
@SheldonFam
Submitted
@wendyhamel
Posted
A very sharp solution! Great job!
You got the gradient fades right and I like your transformations.
Did you see your report? These are things you can easily fix so you’ll have no accessibility or HTML issues.
I remember spending too much time on making this one meet my responsive standards.
You can improve the grid cards between the screen sizes 577px - 750px. The cards are in one column, but you use the portrait sized image. Which makes for very large cards on a relatively small screen.
Other than that, I have nothing to say.
Happy coding!
Marked as helpful
@maxnatalia
Submitted
Hi! Any improvements or tips are appreciated :)
@wendyhamel
Posted
Looks great! The change of border radius of the corners for the mobile and desktop versions is what sometimes gets overlooked.
A few tips for you. Between 768px and 900px screen width, the cards do not fit next to each other and sides get cut off. Maybe you want to add an extra media query for the size in between, or keep them stacked up to 900px when they do fit next to each other.
I noticed you have three media queries on the same size. You can combine them to keep your code cleaner.
That’s all I found I could help you with!
Happy coding!
Marked as helpful
@ata58011
Submitted
For me that was a really hard challenge but i think i make it. If you guys have suggestions or any comments let me know
@wendyhamel
Posted
Hi there, you got the css code for background images right alright! :) And no issues in your report. Nicely done.
If you still want some more out of this challenge: try making it responsive. It is a very useful, actually an essential skill for web development these days with al the different screen sizes.
I recommend starting your design for mobile and work your way up to desktop sizes.
Keep up the good work, happy coding!
Marked as helpful
@EA-Gadgeter
Submitted
Any feedback is welcomed :), specially for JS file.
@wendyhamel
Posted
Hi there! A clean solution to this challenge.
Have you seen the report? There are some issues with the accessibility in your code.
I’m not sure why you used the tabindex numbers for the rating.
Tabindex is used for keyboard accessibility.
You can set the tabindex to 0 if you want to enable users to tab to an element. By default they are accessible in order of their position in the document source. So if you do not need to change the order, the numbers are redundant. You can just set them to 0 to make them reachable for tab.
And you can set it to -1 if you want to skip over an element.
Elements like buttons and a tags have tabindex=“0” by default. But there are use cases where you want to skip over some. For example if you have a modal overlay on your page, you want to skip over the buttons and a tags on the page behind the modal. Like you want to trap the focus within the modal.
Your javascript is very readable and clean. If I needed to look into your code to make adjustments, I could find my way easily. Naming is hard, you did a good job here.
Happy coding!
Link to MDN doc about tabindex: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
Marked as helpful
@Eyepop01
Submitted
Please inspect my code...
@wendyhamel
Posted
Nice first try on this challenge!
Did you see your report? Read the information provided with the learn more link. You could learn a lot by fixing these issues.
Regarding your questions, you can do this with flexbox or grid. Your choice. Both are fine for this. In your code, you mix things up a bit.
grid-template-columns: 1fr 1fr; will have no effect without display: grid.
You added a display: block here, the default for blocks is that they take up all the space next to them. So stacking comes automaticcally with that.
The display: flex sets then next to eachother because the default of flex is set to row.
So, you got responsive behavior by using the most basic display options. Which works fine for this challenge!
Something else: Your font is not loading. I think the link is not correct.
A nice finishing touch: you can round the top two corners of the image when it is on top, and the left two corners when it's next to the text-area. ;)
Happy coding!
Marked as helpful
@Faruq-Hameed
Submitted
The placing of the entire item at the center actually gave me little issue before I could get it.
@wendyhamel
Posted
Nice job on figuring out how to center the card with flexbox.
This is another method of centering an item with grid:
display: grid;
place-content: center;
You can remove the height: 70% from your product container, it only stretches the card too large on larger screens, and squishes it on smaller screens.
Try adding media queries for the smaller screen sizes, or better yet, make mobile your starting point and work your way up to desktop size with media qieries (one or two should be more then enough for this challenge, just mobile and desktop I should think, maybe add a tablet in between.)
You should take a look at the issues in the report. Look at the learn more to read some more information about the issues. These can help you with the basics.
Happy coding!
Marked as helpful