Any feedback is greatly appreciated as long as I can learn from it
Roast all of my code, I need it. All my files are a MESS in this one
I'd like feedback on the form validation but I'll appreciate any advice I can get!
Any criticism is welcome as long as it's helpful!
Learned to apply the height of the answer container from 0 to the content height using JS scrollHeight property and change back to null when click. Also learn to select the next element sibling using JS.
What challenges did you encounter, and how did you overcome them?Quick Google search helps me to find the solution on hiding the answer container and show them back using JS.
I think using JavaScript is completely unnecesary for the questions. HTML elements already exist for this specific "FAQ" structure: details and summary. Each of them can be styled with CSS, and you save yourself time and space by not loading the page with unnecesary JavaScript code. You can learn more about this stuff here.
The rest is pretty nice!
I really enjoyed the challenge. I found it both interesting and difficult. I plan to create some variations of this grid to keep as a reference in case I forget or need something for quick consultations.
What challenges did you encounter, and how did you overcome them?The hardest part was positioning the icons, followed closely by the layout of the cards in the desktop version. I watched many YouTube videos, read blog articles I came across, and attended several lessons in the HTML course I’m taking.
What specific areas of your project would you like help with?I welcome feedback on any topic related to this project. I still take some time to position elements using CSS Grid and am working on improving my use of BEM. If you noticed anything in the code that you’d like to comment on, feel free—I’d really appreciate it.
It's a very nice design, I feel like the CSS classes for each card could be simplified. You have four specific classes just for the color of the borders, and four other classes for the rest. I suggest removing these color classes and using the already existing ones: card--1, card--2, card--3 and card--4 for the borders instead.
I am seeking feedback on the overall quality of my code, with a specific focus on how it can be improved to ensure cleaner, more maintainable, and efficient implementation. Additionally, I am looking for suggestions to optimize the code for Search Engine Optimization (SEO), including strategies for improving performance, accessibility, and semantic structure. I welcome recommendations on best practices, refactoring opportunities, and techniques to enhance both functionality and readability.
I would say the code looks pretty good. The project looks a little smaller than the challenge, but that's okay. I don't think I can talk about the actual code, but I can give you some word of advice for SEO and accessibility.
First of all, make sure to have at least one main element in your HTML. It tells things like screenreaders or other accessibility tools where the content of your page is. Elements like main, footer or header are called semantic elements and they're very important for people who need screenreaders or other tools to properly view your page, you can read more about them here.
Secondly, consider using img elements for... well, images. Properties like background-image are very helpful when it comes to adding images to your page and making them responsible, but keep in mind that some accessibility tools won't be able to recognize it. To get the same responsiveness on your img tags, I would suggest looking into the object-fit property, it's very helpful and it also applies to video elements. Here's a link if you're interested.
And last but not least, it is considered good practice to always prevent using uppercase letters in the id attributes of your elements. This is mainly because the id attribute is case sensitive and can lead to confusion when too many id attributes are used. You can read more about good practices of id names here.
If my comment was helpful, please mark it as such, happy coding!
I completed this very quickly, in one sitting (less than 2 hours). It also matches the design perfectly.
What challenges did you encounter, and how did you overcome them?I did not know how to resize text dynamically without media queries. I found out about rem lengths, and how to use them to resize font based on the default browser size. I calculated my text-presets based on the browser default, and it works well.
What specific areas of your project would you like help with?I wonder if this is truly responsive. I used px lengths for padding and margins, using the spacing on the figma design. I feel there's a better way to do that, but I am not sure what it is.
Hey there! First of all, amazing job completing the challenge! There's two things I'd like to point out about your design:
PX vs EM
There is no better or worse option, each has its own use, em and rem are generally very good with text sizing because they adapt to the screen in relation to parent or the browser's default text sizing. Using em for texts is helpful with accessibility too because the browser's default text size can be changed for people with sight issues. Pixels on the other hand, are generally really good for establishing explicit, robust and precise spacing between elements on the screen. In both cases, the use of css variables for spacing can make media queries easier because you can just change the variable, instead of changing every container or text with a specific spacing. I personally don't see any issue with the pixel spacing in your solution. Keep in mind, media queries have a purpose, there's no reason not to use them!
IMAGE PROPERTIES
There's one slight mistake in your solution regarding how the image adapts to smaller screens. If you look closely at the figma design, the image doesn't seem to get smaller as the screen size shrinks; instead, the image remains the same size, but as the container shrinks, you can see a smaller fraction of the image. This is done with a css property called object-fit. I suggest experimenting with it, here's a source that you might find helpful.
If you feel like you've learnt something with my comment, please mark it as helpful. Happy coding, Henry!
Super proud of myself for nailing this design! I’m taking a course and just got to the Flexbox module, so I tried using it for this challenge. I’m sure there’s room for improvement, so if you have any tips, send them my way! Thanks a bunch for the community support!
Good job doing this design! The course you're taking seems to be working! There's three things I'd change about your design:
CARD
The card element could have simply been a flex container. You can then use flex-direction: column to align all items from top to bottom, and use gap to separate them from one another instead of having to use margin-top or margin-bottom in some of the child elements.
IMAGE
I can see that you're doing the trick by using background-image on a div. However, this would be much simpler if you simply replaced the div element for the img one. The styling would be almost (if not) the exact same. However, there's no real difference between the two, it's just something that would work better for accessibility than anything else.
PROFILE
The profile section is done using a table. To me, this seems a bit overkill, specially after reading that you're just learning flexbox, which could have been perfect for this section. There's two elements: img and p. You can completely remove the table and its corresponding elements and put both the image and the text inside a div element. Then, you can style it as follows:
.profile {
margin: 0;
display: flex;
align-items: center;
}
This would place both elements in the same row, and align them to the center vertically.
Keep up the good work and happy coding!
I'm proud of being able to figure out how to center all the items on the page, including the container and the text box inside the container.
What challenges did you encounter, and how did you overcome them?I struggled getting the text to be in the bottom of the container, but I realized I could use the text-align property.
What specific areas of your project would you like help with?I'm wondering if my positioning of all the elements are looking good.
Hey there! Just letting you that you probably forgot to upload the QR image file in your repository and live server, so the QR image doesn't actually appear
