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
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 🤙
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?
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!
This is my solution to this challenge. Feel free to comment with any suggestions so that I can improve my skill. Thank you!
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!
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?
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!
I am a newbie in the area, please give me any feedback. I would appreciate it, thank y'all !!!
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!
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
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!
I'd love to have some help / code review on the following points:
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
Accept Tips
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!
Please provide feedback
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!
Hello ,
I couldn't figure a way out of how to make the image like that purple ish color .
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!
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!
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!
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?
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!
