Looking to hire developers?
@darryncodes
@JaviVaSu
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that I can make the designs more easily.
What challenges did you encounter, and how did you overcome them?
Aligning the content was what was most difficult for me
What specific areas of your project would you like help with?
In the management of the FlexBox and Grid
@darryncodes
Posted
Hi Javier,
Glad to hear the designs are getting easier - keep going!
A few bits of feedback to help match the design a little more:
min-height: 100vh; to your <body> and remove the margin top/bottom on the .portafolio class to centre the design nicely in the veiwportbackground-color: hsl(0, 0%, 12%); to .portafolio, you'll need some padding and border-radius toobackground-color: hsl(0, 0%, 20%); to your buttonscursor: pointer; on the buttons to help indicate visually you can interact with themA couple of pointers regarding semantic html:
<main> for this element .portafolioa's in a ul listbutton's with a tags. You probably just need the links and not the button on this designI hope this helps. Happy coding 🤙
@AlexDDevv
Submitted
Hello ! I'm learning Javascript and this is my first challenge with ! How can I keep an :active effect in Javascript? On the list, before to click on the button, I wanted to keep the background and color of numbers, but I didn't succeed. I wrote "Let list = document.queryselector("li") (or put an id and use GetElementById) and created a function. I used "onclick" but only the first li took changes, even if all li had "onclick" or an id. Someone can explain me that?
@darryncodes
Posted
Hi Zoulander,
I think your question would be better resolved using semantic html and css instead of JavaScript.
<input type="radio"> this has many more built in accessibility benefits and makes styling the input with :focus easier achieving the 'active' stateExtended content:
<form>, <fieldset>, <label> and <input>'s too<form> you'll need to consider the submit event instead of onClickI hope that helps, any questions let me know.
Happy coding!
Marked as helpful
@ibrahimtangco
Submitted
This is my solution to this challenge. Feel free to comment with any suggestions so that I can improve my skill. Thank you!
@darryncodes
Posted
Hi Ibrahim,
Overall a really decent solution and responsive - well done!
A few bits of feedback for your consideration:
{cursor: pointer;} to your buttons<div class="grid container"> to a <main>. Semantic html is really important for accessibility and it should clear your report.<p> were different lengths in the design you'd come up against the same challenge. I created this codepen that uses flex:1 and justify-content: space-between as potential solutionsI hope that all makes sense, any questions let me know.
Happy coding!
@Alice-in-Matrix
Submitted
Hi!
I used css variables for colors and font, but I would separate them to another css file.
For example: global.css file, that contain only css variables in root selector.
Is there best practicies for this?
@darryncodes
Posted
Hi Aksinya,
Really nice work on this one, good solution.
I think your approach to CSS is completely fine on this size project. When your projects grow you could consider BEM to make building modular styles easier coupled with SASS to create multiple css files (partials) that relate to each component and compile to one style sheet.
Also you should embed some best practices resolving your accessibility report. Your .container <div> could be a <main> tag and your .card-title <p> could be a <h1>. Semantic html is really important.
I hope that helps!
Marked as helpful
@ErkinN
Submitted
I am a newbie in the area, please give me any feedback. I would appreciate it, thank y'all !!!
@darryncodes
Posted
Hi Erkin,
I really like your solution, it looks great!
Your accessibility report is highlighting a few tweaks you could make:
.container <div> with a <main>.attribution <div> with a <footer><h2> with a <h1>Using semantic html is a really fundamental part of building an accessible page. Also Heading hierarchy is important!
min-height: 100vh; to your <body> to help nice centre the design in the viewportI hope that helps!
Marked as helpful
@mobasher10
Submitted
I learned a lot from this project especially the active button I saw a lot of solutions for this project but most of them doesn't implement an active button but hopefully, I did after hours of confusing, and research finally I solve that with HTML RADIO buttons check it out. All feedback are welcoming 🙏 have a nice day
@darryncodes
Posted
Hi Mohsin,
Really nice work on this challenge, well done.
And great perseverance to complete the solution with radio buttons too!
Some considerations for you:
.rating-container. It is a semantic element to choose compared to a div and has some interesting attributes you might use in the futurecursor: pointer; to your interactive elements to give that additional feedback to the user on desktop<main>, here is some more information for youOverall you smashed it, with a few tweaks you could level it up even further!
All the best!
@alcpereira
Submitted
I'd love to have some help / code review on the following points:
@darryncodes
Posted
Hi Alcpereira,
Overall a really decent solution - nice work!
Some feedback for you:
display: block; to your image, this will remove the 4 pixels differencemix-blend-mode: multiply; to .hero-banner > picture::after and remove the opacity to match the image colour with the design fileGood luck with it all
@Dandarks
Submitted
Accept Tips
@darryncodes
Posted
Hi Danilo,
Nice work on this challenge, all the elements are there!
I noticed the background image isn't present. This little guide might help.
Some quick tips:
display: flex; justify-content: center; align-items: center; min-height: 100vh;position: relative; and top: 60px; from .topI noticed you have used some fixed heights which is bad practice for responsive design, you might find these resources useful:
Hope it all helps!
Marked as helpful
@imendh02
Submitted
Please provide feedback
@darryncodes
Posted
Hi Imen,
Nice work on this one, well done!
Try background-blend-mode: multiply; on .card-image and remove the opacity in the colour background: linear-gradient( 0deg,hsla(277, 64%, 61%) 0%,hsla(277, 64%, 61%) 100%),url(./images/image-header-desktop.jpg); to match the purple in the design to the challenge!
Hope that helps!
Marked as helpful
@JatinSetti
Submitted
Hello ,
I couldn't figure a way out of how to make the image like that purple ish color .
@darryncodes
Posted
Hi Jatin,
Nice work, really responsive - well done!
Give this a shot:
mix-blend-mode: multiply; and display: block; (this prevents the little line appearing at the bottom of the image) to .desktop-imagebackground-color: hsla(277, 64%, 61%); to .image-divoverflow: hidden; to .container to make sure the border-radius is visible on all cornersHope it helps!
Marked as helpful
@abhishekdwaghmare2000
Submitted
Any suggestions about improving specific part of webpage, mistakes and other suggestions about improvements are really welcome ! It would be really helpful, if you suggest the mistakes I made and the improvements need to be done at specific point or any other small thing need to be fix in this challenge. Thank you!
@darryncodes
Posted
Hi Abhishek,
Awesome solution, very responsive - well done!
Some great feedback from Buhaianu.
Another solution to the colour is keep your current mark up but try:
background-color: hsla(277, 64%, 61%);. Add mix-blend-mode: multiply; and add display: block; for the little line that is created on the mobile viewbackground-color: hsla(277, 64%, 61%); to .content-rightAlso
overflow: hidden; is needed to your .card class to make sure the border-radius is visible on all cornersHope that helps!
@Prajwol-Shrestha
Submitted
Any feedback is really appreciated. Also my profile card doesn't seem to align with the other cards. Can you tell me How can i fix it?
@darryncodes
Posted
Hi Prajwol,
You've done a really great job, I think you just need to simplify your code.
Grid is complex, don't rush grasping it - CSS tricks - comprehensive guide is invaluable
Happy coding!
Marked as helpful
@BAKLEYSCOBO
Submitted
I want to be able to write the media query in order for the site to be responsive,any help please
@darryncodes
Posted
Hi Bakely,
Great to see you asking for help and learning through doing!
I found these resources really useful:
Keep coding!
@VasileCosmin
Submitted
Feel free to tell me what i did wrong. Thank you!
@darryncodes
Posted
Hi Vasile,
Nice work on this one - well done!
You could add transition: ease .3s; to your .btn class to make the hover effect slightly smoother.
Happy coding!
@The4thDimension
Submitted
Any and all feedbacks on my code are welcome.. :)
@darryncodes
Posted
Hi Mahesh,
A really decent effort on this one, well done!
You could centre your design responsively in the viewport with this snippet on your <body>:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
Marked as helpful
@elroytoscano
Submitted
This was quite the challenge, specifically handling validation and styling at the same time. Any feedback would be appreciated.
@darryncodes
Posted
Hi Elroy,
Great to see another solution from you, nice one!
I found this one a lot trickier than it looked. Florin's JavaScript Client-side Form Validation - YT video is an invaluable resource for this one.
Happy coding!
Marked as helpful
@Miculino
Submitted
Hey guys!
This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D
Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.
From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)
There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!
Here are the technologies / tools I've used for it:
Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!
Thanks a lot for checking out my project and see you in the next challenge!
@darryncodes
Posted
Honoured to have been mentioned 👊
Awesome creativity and a very impressive tech stack.
Keep up the hard work, you're definitely motivating me to progress and keep creating the best work I can.
Happy coding @Remus432 🤙
Marked as helpful
@AleksHNZ
Submitted
Feedback will be appreciated :)
@darryncodes
Posted
Hi Ali,
Awesome solution, really well done!
overflow: hidden; to .container to resolve thisflex-direction: column; and a media queryYou might find these resources useful:
All the best!
Marked as helpful
@ejbeloso
Submitted
Please let me know your feedback.
@darryncodes
Posted
Hi Ejerson,
Great effort on this, well done!
I noticed your icon's aren't showing - it's an easy fix, just drop the '/':
<img src="icon-luxury.svg" alt="laxury-icon" class="laxury-img">
This might be a helpful guide
I also think using flex-wrap: wrap; should be replaced with flex-direction: column; with a media query to transition from a row to a column for mobile. Otherwise it creates a peculiar layout at tablet. You'll need to switch the location of the border-radius with media query too!
I hope that helps!
@Shikhar0411
Submitted
Hi, this is my solution to the Order Review webpage challenge, please take a look. Any general feedback would be appreciated. The following are the main problems I faced, 1 - How to lighten a colour given its hsl, other than just directly using VS code features 2 - Should the main font size also be changed when going from web to mobile, as I have done it, and it did make things slightly better. Answers to these would be highly appreciated Thanks
@darryncodes
Posted
Hi Shikhar,
You can adjust the 'L' in HSL.
This is a really useful HSL calculator and a thorough guide.
This is a helpful guide on font-size and a best practice for which units to use.
I hope that helps!
Marked as helpful
@Theera12
Submitted
HTML5, CSS3..
@darryncodes
Posted
Hi Aarthy,
Decent solution, all the elements are there!
I notice the background image isn't in your design, this is a useful guide.
Also I noticed a lot of fixed heights and widths which is generally bad practice for responsive design here are some really useful resources that might help:
Keep coding!
Marked as helpful
@VasileCosmin
Submitted
Feel free to tell me what i did wrong. Thank you!
@darryncodes
Posted
Hi Vasile,
Awesome work on this one, nice and responsive - well done!
You could add mix-blend-mode: multiply; to your .layer class and remove the opacity from background-color: hsl(277, 64%, 61%); to closer match the purple in the challenge!
Hope that helps!
Marked as helpful
@arunsingh009
Submitted
Feedback on my code need suggestion for improvement .
@darryncodes
Posted
Hi Arun,
Awesome solution, well done!
You could add mix-blend-mode: multiply; to your img and remove opacity from the img and the parent div to closer match the design to the challenge!
All the best!
Marked as helpful
@ajay0024
Submitted
Please give feedback
@darryncodes
Posted
Hi Ajay,
Really impressive solution, it works flawlessly!
Not much to say but here is some insight from me:
border-radius on the top right of the image on desktop where it shouldn't be<div class="card"> for <main class="card"> and change your h3 for a h1 to clear the report.h1 would be elsewhere in the overall design. You could consider a screen reader only heading with this snippet:.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Marked as helpful