Looking to hire developers?
@ericsalvi
@Bader-Idris
Submitted
in my local server, I encountered not being able to re-generating the quote, but when I launched it online, I figured out that it's only locally. how to make my local live server working well as an alive one!?
@ericsalvi
Posted
Hey @Bader-Idris,
First of all, this one looks great. I am seeing it working in your preview and looking at the JS it looks to be clean and valid. I do know with this API there is a cool down so you are unable to quickly call a piece of new advice spamming the button. Is this what you are referring to?
As for the code itself, it is very clean and straightforward. One thing I would suggest is maybe adding a simple cursor: pointer to the dice icon so the user knows it is clickable.
Other than that, something you could try doing for future challenges is using no divs or spans and only semantic HTML.
Great job with this one and keep up the momentum!
@maiaflow
Submitted
Open to any ways I could improve!
@ericsalvi
Posted
Hey @maiaflow,
Great job on another challenge. You are unstoppable!
I am not seeing too much from a design POV except I feel the card can get too long on very wide screen sizes. So I would probably try setting a max-width for body main on the desktop only. That way when the screen gets really wide, the card doesn't get really wide as well.
Also, one thing that I like to do is with the footer section in the card you have a margin-top being set to push it down the page a bit. Sometimes what I like to do is set the actual section content to display: flex and flex-direction: column. Then you could change the margin-top to auto. What this will do is push the footer to the bottom of that section and so no matter what height the card ever becomes, the footer will always stick to the bottom of the container.
You have 3 invalid issues in your HTML. The social sharing icons you have do not have the alt attribute. Even if an image doesn't need to have a need for actual alt text, the attribute still needs to be present. Just add alt="" to your 3 images to fix those issues.
The JS looks great and you should be proud of yourself for getting it done. The more of these that you do, the easier it will become. Also, the new word you created called sharrow is pretty cool!
Let's chat more about vendor prefixes.
Keep up the momentum!
@maiaflow
Submitted
i don't hate the way i offset the boxes on desktop view, but i think i probably should have just done align top-center-bottom / left-center-right. i got this error on axetools: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable about my asides (rating section) but i don't know what that means exactly. open to any suggestions for how i could have done this better :)
@ericsalvi
Posted
Hey @maiaflow, I'm not sure how I missed this one, but the overall design looks great. There is a strange overflow issue of the main text on specific screen sizes (1086px to 1200px) but other than that this one is really solid.
As for the Accessibility warning here and when using Axe DevTools, it looks like the issue is that a screen reader won't know what each of the ratings is for. Since you are using 3 asides what I would try doing is finding each of the h2, and giving them a unique id. So id=rating1 and so on.
Then you can use the aria-labelledby on the asides and then reference each of the different IDs so that you are telling the screen readers what each aside is meant for.
Check out this article here
Hope this helps.
Marked as helpful
@maiaflow
Submitted
@ericsalvi
Posted
Hey @maiaflow,
Great job as always. I really do enjoy seeing you complete these challenges. I did notice your URLs were broken in the CSS as you needed to include the correct pathing so I was glad to be able to help fix this offline.
As for the work, I am a fan of keeping things pixel-perfect but I do know that is not practical and it doesn't have to be pixel-perfect.
The use of CSS variables is great. Glad to see you starting to use them. I also noticed that your code is pretty semantic except for the one use of a div in the footer.
It appears to be pretty accessible when using AXE DevTools for checking.
Cannot wait to see your next one completed!
@maiaflow
Submitted
Always welcome feedback! The simple stuff can be the best place to learn.
@ericsalvi
Posted
WOW... great job on the challenge of trying to get it completed in less than 1 hour.
Your HTML is super semantic and your CSS is small. I can't find any issues at all so I'll try to maybe offer suggestions for future challenges.
If you want to stick with CSS try to run your CSS through the vendor prefix tool here
If you stick with CSS, look for opportunities to use CSS variables.
Try setting the base font size on the body and then use REM units.
Try something a bit different by using a CSS preprocessor such as SCSS. This tool will do the vendor prefixes automatically.
Lastly, I have been trying to constantly use GitHub pull requests for milestones when working on these challenges. Really helps me to get more comfortable with that platform.
Cannot wait to see your next one!
Marked as helpful
@yterai
Submitted
I used CSS grid for some projects before but it's been pretty rusty and I needed to brush up on it. I think I could apply the basic CSS grid concept well but I'd love to hear if there is anything that I could improve on!
@ericsalvi
Posted
Hey @yui,
Great job on your 4th solution completed. Everyone does these solutions differently and Lucas did offer some great feedback to be a bit more semantic. I actually just completed this one too and I had no Divs, no Spans, or no Class Names. It was actually a fun challenge and made me really think about the structure before I started with the design.
There is one thing I did notice that I am not a fan of and not sure if there was a different approach. Positioning the entire content by using an absolute position with a top and left of 50% and then translating it with a -50% to me is not the best and could cause unexpected results.
Instead, what a great thing to do is instead on the main container, and in this case, the body set the min-height to 100vh and then display it as a grid. This way you can then use the easy place-content to center. Of course, you need to also make sure you set a max-width container to your grid items, which is the main.
What I do like is that you are using grid templates which is really nice and you also did a mobile-first approach. Much nicer to only have to change a few lines for desktop if you do mobile-first rather than if you do desktop first you have to add way more lines of CSS in order to shrink things down.
Again, great job and keep up the momentum!!!
Marked as helpful
@maiaflow
Submitted
I'm proud of myself for doing mobile first and for figuring out grid for the first time, but by the end I realized I probably should have relied more on things like min-height, and less on things like padding with pixels to make things "pixel perfect" to the screenshot. Even though I know I shouldn't even be trying to do that XD Curious also about how I did with my use of semantic HTML elements!
@ericsalvi
Posted
Hey Maia,
Another great-looking design from you. 5 in a row!
I didn't see too much to pick at looking at the rendered solution. The only thing I noticed is that the container of the grid items on the desktop may be missing a max-width. I found that the width of the container of items on the desktop should be 1110px.
As far as the code itself, I think it looks pretty good. Adriano left a really good comment on things you could try doing in the future. Also, have a look at the Chrome extension called "axe DevTools". I run my code through this tool from the inspector and it generates a validation/accessibilty report I can try to fix before submitting it.
For your next solution, keep on trying the mobile-first approach but also maybe read up on CSS variables. For larger projects, it really helps.
Keep up the momentum!
Marked as helpful
@yterai
Submitted
I tried to do a mobile-first approach this time. I think the result isn't bad but I wasn't sure if I was doing it the right way. If you see any aspects that I could improve I'd be more than happy to hear that!
@ericsalvi
Posted
Hey @yterai,
This one looks incredible! Great job. I think Elaine mentioned everything I would have said. For the mobile-first approach, you don't need to declare 2 ranges for media queries. The way CSS cascades styles, it will naturally inherit the styles from additional larger min-width.
I couldn't see too many improvements but what I would like to see for future challenges is for you to work on your README.md file for the GitHub repository. Think of it as a way to explain yourself and what you worked on. Like a journal so others can read and discover new things.
Your JS was great as well. Works like charm. My only suggestion with this would be to include some type of something to know the email is correct and valid. So like on submit, maybe learn the input field and display an inline thank you message or something.
I cannot wait to see your next challenge and hopefully, you take a few of these recommendations from me and Elaine, it will really make your solutions pop!
Marked as helpful
@maiaflow
Submitted
I know my JS isn't quite right, obviously because it isn't working and is always showing the error message. But I'm wondering what the proper way would be. Even if my code did work, I believe it would only run once, when I need it to run and check for an invalid pseudoclass every time something new is typed in the box.
I was also wondering if there was any problem with how I relied on built in browser validation rather than using javascript or a library.
Thanks!
@ericsalvi
Posted
Hey @maiaflow,
Great job from a rendered finished product. You have come a long way in the few that you have submitted. This one is very responsive. The only thing I would keep on remembering to do is check out the report that gets generated on your submission. https://www.frontendmentor.io/solutions/coming-soon-page-using-flexbox-and-built-in-validation-OcWjIS-An6/report You have a few accessibility ones that can easily be fixed.
Now one it comes to the JS.... there are many different ways to approach this and it really comes down to what works for you. The way I created mine is what made sense in my head but the way you attacked it is something I would not have thought of.
I did find out about pattern parameters on certain inputs that take Regex so maybe doing your way with patterns might help if you decide to finish this one up.
Check out: https://www.youtube.com/watch?v=g-Y31Iswr2M
Cannot wait to see your next submission.
Marked as helpful
@yterai
Submitted
I wanted to practice Sass along with file organization in this challenge. I learned how to use variables and import files etc but I was only able to apply variables to colors which I think is pretty basic so if there is any suggestion that I could use more variables I'd love to hear :)
@ericsalvi
Posted
Hey @yterai,
The desktop design looks amazing! Great job. Also kudos for trying out SCSS for the first time on this challenge.
As others have mentioned, the mobile responsiveness doesn't really work with the recommended size that was provided. Sort of like what @ErayBarslan mentioned, it is actually really good practice to do the mobile-first approach that way you are just changing a few items on the desktop rather than trying to change and add a lot more elements for mobile.
A few suggestions for GitHub and your repositories, make sure to fill out your README.md file. Makes it a bit more polished when checking out your work.
Also for SCSS you could do some interesting things with nested declarations. Although I never used MIXINS and math components, one thing I do like specifically about SCSS is you can keep it all organized by selectors like so,
.register-button {
border: 1px solid $white;
border-radius: 30px;
width: 11.5rem;
height: 3.3rem;
background-color: $white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: rgba($violet, 0.8);
font-size: 1.1rem;
}
.register-button:hover {
background-color: $soft-magenta;
border: $soft-magenta;
color: $white;
cursor: pointer;
}
could have been a bit more simplified by nesting the hover inside the button selector itself like so and using the &.
.register-button {
border: 1px solid $white;
border-radius: 30px;
width: 11.5rem;
height: 3.3rem;
background-color: $white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: rgba($violet, 0.8);
font-size: 1.1rem;
cursor: pointer;
&:hover {
background-color: $soft-magenta;
border: $soft-magenta;
color: $white;
}
}
Keep up the great work and I am looking forward to seeing more from you.
Marked as helpful
@maiaflow
Submitted
Feeling pretty happy with this. Tried to get my screenshot pixel perfect even though I know I shouldn't do that- I did make a couple choices, like the range in between desktop and mobile, that I'm happy with. Always wondering if I could have done anything better!
@ericsalvi
Posted
WOW, Maia! Great job with this one. The completed work is stunning. I don't see too much to pick at with the design as the work you did is pretty top-notch from a rendered POV.
The only thing I can see possibly suggesting is maybe to get a bit more descriptive with your class names.
I looked at the generated report and there are some errors I'd try to fix. https://www.frontendmentor.io/solutions/responsive-landing-page-SPclCHeVSk/report
The HTML errors all seem to be coming from font-awesome and not too sure if you can fix it.
Lastly, the CSS is very organized with comments. This is something I need to get better at.
Great job and keep up the momentum!
@maiaflow
Submitted
I wonder what would be considered the true "best practice" way to pass the rating variable through. I also wonder if I'm saying that right. Also, I wonder how the JS that Eric helped me with could be simplified. Lastly, I wonder what sort of solutions people came up with to prevent someone from pressing Submit until a rating had been chosen.
@ericsalvi
Posted
Hey @maiaflow, great job on completing your 2nd challenge. We already had some offline communications about this one and I was glad you were able to do some digging into the JS to start the button actions but needed a bit of a push to get it completed.
I know my code was not correct but was hoping you could use it as a base to elaborate upon it or to simplify it.
The more you do of these the easier it will become. Keep on watching those teamtreehouse videos.
I few suggestions now that you have completed this one, you have access to view all solutions of this challenge here. I would dig into the HTML structure of them to see if there are any common factors on how they implemented the interactive section of this challenge. I am not saying my approach to using a Form is the correct one, it just made it much easier and cleaner when it came to JS.
Also make sure to clean up any HTML or Accessibility warnings of the submission here
Keep up the momentum!
@toyrobs
Submitted
Aligning my page was one of the biggest issues I faced
@ericsalvi
Posted
Hey Toyin,
Great job on your first submission. Checked out your code and it looks clean!
A few things I would try to do for your next challenges is to always check out the validation for accessibility or HTML. Either do this before you submit by using axe DevTools extension or you can check out the report that FrontendMentor generates here.
One thing I would suggest doing before you submit is to take all of your CSS and run it through a tool such as https://autoprefixer.github.io/. What it will do is generate any required additional CSS to make this submission work on all platforms and browsers. The best way to almost be fully compatible.
For your links instead of using # for these types of components, I'd suggest using javascript:void(0) instead as this will not refresh the page when a link is clicked, unlike using #.
Great work again and I cannot wait to see more of your work.
Keep up that momentum!
@ernestina404
Submitted
@ericsalvi
Posted
Hey Tina,
Great job with your first submission. I love how you implemented the payment buttons' hover shadow effect. Makes it look like you really pressed down on it on hover.
I few suggestions for future submissions would be to use an accessibility/HTML validator before submitting your work. I use axe DevTools extension in Chrome. Also if you do end up submitting always check the report that gets generated.
To fix your background images, it has to do with the relative path. If you were to open up one of the images, this is the path you get. This is because of the single dot (or no dot in your actual CSS) at the start, it would need a double dot. So how you have it is that the single dot (or no dot) is in the current directory but the double dot will take you one folder out, which is not the CSS folder but the root folder to go back into the images folder. Confusing!
I'd just add ../ to the start of each of your CSS image URLs.
Lastly, I see you are using filters for opacity as well. Looks like they do not play nice with Safari and other browsers. A good rule of thumb is after you are happy with your current CSS, copy it all and paste it into https://autoprefixer.github.io/ which will add required vendor prefixes for incompatible CSS for all browsers. For instance, the filter opacity doesn't work in Safari but after using that tool, it generates the correct prefixes to be compatible with Safari. -webkit-filter: opacity(80%);
That tool is a great one to bookmark.
Keep up the momentum and I am looking forward to new submissions from you!
@yterai
Submitted
My main goal for this challenge was to use Flexbox but I feel I didn't make good use of it. So if you find someplace where I could use Flexbox instead of what I am using right now, I'd be happy to hear that! Otherwise, I'd appreciate your feedback/advice :)
@ericsalvi
Posted
Hey Yui,
Great job with your first submission!
I think your flex works great for the pricing section where you have it now. I don't think there really is a need for anything else to have flex unless on mobile it needed to go from column to row. But for this component that is not the case.
A suggestion for future flex usage, instead of adding a padding-left: 20px to the item-2 class, you could just use gap: 20px set on the flex container.
I'd also try to name your classes according to what the content is. Reading the code, item-1 and item-2 don't really help the developer to fully understand what each section is. I like to implement the BEM naming convention, not required, just helpful.
One last thing is that the 2 buttons you have are not selectable via the keyboard. It looks like you just have 2 divs styled to appear like buttons. I'd check out https://a11y-101.com/design/button-vs-link for future submissions on buttons.
Also to piggyback on what Philemon was saying, each submission on this platform generates a report for any invalid accessibility or HTML. Check out your report It is good practice to try and fix them. I use the axe DevTools extension in Chrome before I submit.
Can't wait to see more of your work!
Marked as helpful
@maiaflow
Submitted
@ericsalvi
Posted
Hey Maia,
Great job with your first submission!!! I like how you structured your layout on the submission. The class names make sense and the different sections that make up this component are easy to understand. Also thank you for the call-out in your repository!
A few things I would suggest either fixing now or remembering to keep an eye out for future submissions is to fix any accessibility or HTML issues.
https://www.frontendmentor.io/solutions/responsive-order-summary-card-LpTS2rYbNT/report
Something I like to do also is to make sure to remove any HTML commented-out sections or unnecessary CSS.
The last thing I noticed is that your background image does not span the entire body width. You could easily add background-size: 100% to the body selector to fix this.
Cannot wait to see future submissions by you!
@zepolj1126
Submitted
@ericsalvi
Posted
Hey!
I love the solution you did for the hover effect on the image and revealing the eye icon. When I did this, I struggled a bit but yours is a bit more simplified. Great job with your first submission.
A few things to keep an eye out for would be after you submit your solution, check out the report that gets generated to check for errors and accessibility issues.
A tool you could use in Chrome Dev Tools before you submit is AxeDevTools (extension download).
Another thing I would suggest doing is to remove any unneeded comments from your HTML and CSS and make sure to remove any CSS that is not needed (ie. .attribution).
One thing you could try to start using is CSS Variables for things such as colors. It makes it so much easier to code, I found.
Great job again, and I look forward to seeing more submissions from you in the future.
Marked as helpful
@jaymew88
Submitted
@ericsalvi
Posted
Hey!
From what I can see things are looking great from a code POV. Something I need to keep on doing is adding comments for sections, especially when others are looking at my code.
I see just a few small things which may help in future submissions.
For the body, you have an overflow-y: scroll; which is breaking the background color to be flush on all edges. Removing that will make the entire body full width without the right white space for the non-existent scrollbars.
You have width: 290px; being set to .card-container which is causing the card to overflow horizontally if you were to zoom your browser in using the zoom functionality. Might be better to use a max-width in its place?
The last thing I noticed is the eye SVG icon which looks pinkish. This has to do with it being set as a background image on the same hover CSS which also has an opacity of 50%.
Keep up the great work and I cannot wait to see more from you.
Marked as helpful
@dadko44
Submitted
Hello everyone,
I'm always looking forward to receiving feedback from You. Let me know about any issues that You spot and good practices that I should have used.
This one got a bit messy towards the end, mainly because it was getting really late and I really wanted to finish it.
Anyway, have a great day.
@ericsalvi
Posted
Hey Dawid,
Great job. The only thing I noticed which is a bit buggy is the closing of the social sharing on both desktop and mobile. For Desktop if you were to click on one of the social sharing icons, it closes out of the menu. Also typically you click on the same sharing icon to close out of a menu like that, or the background. Anything but the social sharing pop-up menu.
As for the Mobile menu, it is the same as clicking on the social sharing icons. It closes out of the sharing menu.
Lastly, make sure you take a look at your generated report and try to fix your errors, https://www.frontendmentor.io/solutions/article-preview-with-acordion-share-panel-created-with-html-css-and-js-N40bFR8nv/report
Keep up the momentum!
Marked as helpful
@nandini2201
Submitted
Any feedback is welcomed!
@ericsalvi
Posted
Hey Nandini,
This looks really good. The app works great and couldn't spot really anything to pick apart. Just make sure you take a look at your generated report and see if you can fix those errors.
Keep up the momentum!
Marked as helpful
@AyodeleAlfred
Submitted
All feedbacks are welcomed. I couldn't order the pictures even though i used display flex. the pictures weren't arranged the way they should be. Any help guys Thanks
@ericsalvi
Posted
Hey Alfred,
If you want the egg image to be on top for mobile then you'll want to specifically set flex-direction: column-reverse; for the .gallery class on mobile.
I hope that helps. Make sure to check out the generated report too for your submission. https://www.frontendmentor.io/solutions/css-grid-flexbox-RgHCGKcqB/report
Keep up the momentum!
Marked as helpful
@JSCHLTE
Submitted
Please give me feedback!
@ericsalvi
Posted
Hey this looks good, but there are a few things to look into a bit more, however.
First, I'd check out the generated report when you submit a solution at https://www.frontendmentor.io/solutions/3column-preview-card-component-html-scss-iNMwfEyAu/report
See if you can fix those few issues.
The overall desktop design seems to be a bit larger than what it should be. I'd try to make it match but that isn't as important as really looking at the mobile responsiveness that your solution currently has. A trick you can do is resize the width of your browser to watch how your content flows at different screen widths. Your version breaks oddly right before it goes into 1 column. Also, the mobile version has the wrong border-radius being set.
Keep up the momentum!
Marked as helpful
@itshadee
Submitted
I don't know if my implementation is right or is the correct way of it. I'm new to Frontend dev so. Another thing is I couldn't apply accent color overlay to the header image. I'd really appreciate it if anyone can explain my mistakes and tell me how to do it right.
@ericsalvi
Posted
Welcome Hadi,
I think this is a pretty solid start to your first completed challenge here at Frontend Mentor.
A few things you should look into. I would check out your generated report https://www.frontendmentor.io/solutions/stats-preview-card-component-Gf2Q9lxQp/report and try to see if you can resolve those three warnings. Once done, regenerate the report to see if they are fixed.
Your images are breaking on me when I go into mobile design. Make sure they are relative paths and you can easily fix this by adding ./ in front of the image source URL.
As for the color overlay, this one is pretty tricky to get exact without seeing how it was originally implemented but you may be able to get close to it but it would require you to add a mix-blend-mode and filter CSS to the image section but you need to have the color you want in the background. For my solution, I used a blend mode of Multiply and for the filters, I had to use Contrast, Brightness, and Opacity.
Yours will not work out of the box since the background is not the correct color and needs to be the brighter provided violet color.
Now that you have completed the challenge, you can see all the solutions for this one in particular. I would suggest checking out others how they implemented theirs and be inspired by their solutions.
Keep up the momentum!
@Andrii-Rohov
Submitted
Hello, i am a newbie to JS. This challenge was fun and easy. But now when all newbie level challenges are done, the real fun and challenging projects are coming. Anyway, if you have any feedback about my solution please leave a comment.
@ericsalvi
Posted
Looks pretty good.
A few things I would look into a bit more. The report generated https://www.frontendmentor.io/solutions/html-and-scss-and-jsbad-one-for-validation-error-message-Mh77wyDrV/report has some accessibility issues. See if you can try to fix those.
As for the form, there are two things I noticed. First, the email validation accepts an email such as test@test which is invalid. The other thing that is sort of odd is the timeout you have to clear the errors. I wonder if you could do it a bit differently so that when the user focuses on the errored input field, it clears it away? This is a different approach and yours is still valid and works. Just from a visitor looking at the site, it gave me some weirdness if you click in the error field before the timeout happens.
Keep up the momentum!
Marked as helpful
