Your HTML, and CSS structure is quite neat and provides sufficient context. I opened your design on my laptop, and it was loading up your mobile view. I think you need to declare another media query to handle your component's design for devices above 375px, and less than 1440px. Hope this helps.
Hey, good work buddy. I read your logic, and it's pretty clean. Keeping the JS only for toggling classes, and using CSS to handle all the styling, and varients is something that I have been working on. And, you did a pretty good job in this regard.
I opened up the live preview site on my laptop, and for some reason, it's not responsive. It's not showing up like it should, as given in the design brief. I'm seeing it on a 14-inch Macbook Pro.
I have uploaded a screenshot in Google Drive for reference, just in case.
Nice work. I need some pro-advice from someone such as yourself. I'm currently learning HTML and CSS, and would not say that I'm great at it yet. So would it be a good idea to integrate a little javascript into my workflow, or just I just keep focussing on these two only for now?
To get the desired design for the .card__plan component, you need to implement a nested flexbox concept. Include the "<img src="/images/icon-music.svg" alt="" />" and "<div class="card__plan-content">" under <div class="card__plan-img">. Then implement flexbox in the "card__plan-img" class, with a flex-direction of row, and also with a suitable gap: between them.
PS: Your class "card__plan-content" should also be in flex, with a flex-direction: column and with a gap between both the text.
Very well-structured code, just a small observation off the top. Declaring height, width, padding, margins, etc. in relative measuring units might be a good option when it comes to scaling designs. What do you think?
What are you most proud of, and what would you do differently next time?
PT-BR
Neste desafio, me sinto particularmente orgulhosa de ter aprendido sobre a tag nav e como implementá-la na minha solução. Foi um desafio rápido e gratificante, e me permitiu aprimorar meus conhecimentos sobre estruturação semântica em HTML.
EN
In this challenge, I'm particularly proud of learning about the nav tag and how to implement it in my solution. It was a quick and rewarding challenge, and it allowed me to improve my knowledge of semantic structuring in HTML.
What challenges did you encounter, and how did you overcome them?
PT-BR
O desfio que eu impus para mim nesse projeto foi reunir e tentar usar tudo que eu aprendi até aqui. Pretendo nas próximas vezes já ter conhecimento suficiente para fazer um desafio que seja responsivo.
EN
The challenge I set for myself in this project was to gather and try to use everything I have learned so far. I intend to have enough knowledge by the next time to create a challenge that is responsive.
What specific areas of your project would you like help with?
PT-BR
Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.
EN
Any feedback is welcome so that I can improve my skills.
A small suggestion: Try to use "em" whenever you are declaring padding or margins since these values should depend on their parent container. "em" will directly inherit the value from their parent container.
If you want to learn more, check out this article. Click Here.
Good job, just a small suggestion, whenever you declare margin, padding, letter spacing, or anything, try to use "em". It will inherit its value from its parent container. In the case, of font size try to use "rem", since it will directly inherit its value from the root element, which is the default font size set in the user's browser.
If you wanna learn more, check out this article. Click Here.
What are you most proud of, and what would you do differently next time?
Made with:
HTML 🦴
CSS 🎨
JS 🤖
for practice, I didn't use any libraries this time 🚫🚫
mobile-first workflow 📲📲
did my best to make it accessible 🦼
made the custom buttons keyboard accessible ⌨️
What challenges did you encounter, and how did you overcome them?
Accessibility is a BIG problem for me. Usually I just don't have the patience to set up everything correctly for it, but this time I tried at least!! ☝️☝️
What specific areas of your project would you like help with?
As always, if you notice anything, you know what to do 👇👇
Hey, hi.
The code is very well structured, but one thing that I noticed off the top was nested <html> elements and multiple <head> elements, with different <title>. What do you think?