I learned how to use tailwind css and add transitions and animations to the site.
What challenges did you encounter, and how did you overcome them?The main challenge was intergrating the tailwind classes with js for the transitions.
What specific areas of your project would you like help with?Any feeback is welcome.
it looks really good, however i think there's a problem with your updateFeature function, because the feature tabs don't change when you click on the tab buttons. other than that good job!
I'm glad with the result specifically responsiveness and the next time I wont declare variables which I will need to change based on device width as SCSS variables but CSS variables (I declared media queries for these variables but that's not possible for SCSS variables)
What challenges did you encounter, and how did you overcome them?I think I spent most of time on making the page responsive. Since I used SCSS and 7-1 architecture I had to move around all those folders but the result was a more strcurured and more readable project.
What specific areas of your project would you like help with?Maybe with how to organize SCSS files.
This solution is submitted as a part of the Advanced CSS Techniques learning path.
Tools:
No difficulties as I have done this before.
What specific areas of your project would you like help with?Any suggestions are welcome!
really cool I like the blur effect when the image is hovered!
I'm proud of re-creating the most complex design yet (for me).
100 score in Lighthouse.
I'm proud of how little time it took me to get the styling right. Planning ahead for how I'm gonna use Grid had been pretty tricky in the past, but this time around it all seemed much more intuitive. What I'd like to try doing differently is using button element and styling their content with the svgs rather than placing the svgs directly and using them as buttons to open/close the menu.
What challenges did you encounter, and how did you overcome them?No challenges other than the fact that I still can't quite wrap my head around the whole WAI-ARIA thing. I'm pretty sure I missed some important labeling or something.
What specific areas of your project would you like help with?Checking for missing accessibility features on my HTML markup.
As always, I'm just proud that I was able to complete the challenge and come up with a way to have the contact form do all it was supposed to. Also, I found it tricky to use the svgs in a way that ended up looking as the design, but I eventually found out a way with some help from YouTube.
What I'd do differently next time is the form validation as a whole. The process is, I feel, unnecessarily convoluted. I have a single function in charge of validating all inputs, and I feel like it's better to have many functions do one thing very well than having one function do everything.
What challenges did you encounter, and how did you overcome them?Two main ones that I actually didn't know how to solve and just ended up giving up:
Pretty much the above stated points. Any help with that would be greatly appreciated.
hi, for the error styling getting rid of focus I think it's because you have set outline to none, so technically they don't get visually focused even when the border is not red. i just removed the border and used the outline instead:
input:focus, textarea:focus {
outline: 1px solid var(--dark-green);
border: none;
}
and then changed the color of the outline to red when the input is invalid.
for the radio buttons (and i think the checkbox too) the problem might be that the focusable element is the input itself, which in your case is hidden so that you could use the svg icons in its place. I think you could try resolving it by using the property tabindex="0" which makes normally non-focusable elements focusable, but I'm not sure how because the element you have to apply it to is the ::before element of the label. sorry i'm not very good at this, I didn't use the icons I just styled the inputs like this
input[type="checkbox"], input[type="radio"] {
accent-color: var(--dark-green);
}
i hope something was useful!
I'm proud of having learned how to make an accordion, since it's something I was planning on implementing on a different personal project. I had no idea how to go about making one and had to check a few different sources/tutorials, which helped me understand the different approaches that can be taken as well as how to plan for my HTML markdown with the accordion design in mind.
What challenges did you encounter, and how did you overcome them?Other than not havin any idea of how to create the accordion, I just struggled a bit with the sizing of the main component. However, this time around I worried myself more with functionality than with design.
What specific areas of your project would you like help with?None that I can think of.
really good I like the smooth transition when you hide and show the answers!
Not much this time around. Completed the challenge fairly quickly, but then again, it wasn't super hard.
What challenges did you encounter, and how did you overcome them?None, thankfully.
What specific areas of your project would you like help with?The component shows what it has to, but I'm not sure if the handling of the form is right. I'd appreciate it if someone could take a look at that.
The logic was challenging but fun. I need to make my code DRY as possible.
What challenges did you encounter, and how did you overcome them?It was adding a class to the label element associated with input.
What specific areas of your project would you like help with?I start with the mobile design first. It adds more complexity to make it responsive. I read about mobile-first vs desktop-first. I did not find strong evidence to start with mobile design first. It is more like an opinion. I will stick to desktop design first, as it is more productive in terms of time and effort.
none
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
congrats it looks really good! only thing that is missing is when hovered weekly, daily and monthly should become white
I'm pretty happy with the modal display in chrome, but I'm disappointed the transition doesn't seem to work in firefox. The mobile experience could probably be better, but I'm content with what's here.
Most of this was pretty easy to throw together, and I'm mostly happy with what I came up with.
What challenges did you encounter, and how did you overcome them?The success modal on mobile gave me some grief. I've gotten more comfortable with flexbox, but it seems it's maybe not the best solution for that component. I'm happy with what I was able to get to work, but I'm disappointed it required some margin magic rather than being able to rely on align/justify settings.
What specific areas of your project would you like help with?Any feedback is appreciated!
oh wow it looks basically identical to the design!! congrats
