I was testing out to see if the form was accessible from a keyboard. I didn't add any JS as I wasn't really focused on that.
What challenges did you encounter, and how did you overcome them?Probably styling the form
What specific areas of your project would you like help with?Any advice would be appreciated.
First of all, congratulations on completing the challenge! Your code is quite clean and straightforward, which I really liked.
required HTML attribute, you could also create custom error messages (you can find this in the README page). Best of luck! 👍First of all, congratulations on completing the project! The design and functionality are almost identical to the provided example.
icon changes when the menus are opened. I think you could fix this with a small code update.details and summary semantic HTML elements for this. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)I did very fast this challenge. I needed much more time for newbie exersices month ago.
What challenges did you encounter, and how did you overcome them?I solved problem with block layout with flex.
First of all, congratulations on completing this challenge; you've done a good job. However, I have a few suggestions. 👍
-Firstly, you could add cursor: pointer to the buttons and numbers to provide a more realistic experience for the user.
-Currently, your code doesn't display which number the user has selected. You can fix this. Instead of making all the numbers buttons, you could use list items and apply event delegation on ul or ol to capture the value of the selected element.
Wishing you success in your future projects.🙏
First of all i'm proud that, I was able to finish this project.
Then to have been able to manage the generation of new question with each click on the Next Question button.
Finally, from now I will proceed by section and spend more of my time studying the model and how to proceed to code the elements.
It was hard to injecting each question into the content and recovering the score, but I took a step back to carefully study the figma model then it was easier once I made a good cutting. The deployement on Vercel was an ordeal I had to spend more time there to finally migrate to Netlify. Because by documenting me on the net there was several comments like 'Vercel does not take into account the JavaScript module model etc..'
What specific areas of your project would you like help with?I'm learning so any help or comment is welcome :)
First of all, congratulations on completing the challenge! It was quite challenging for me as well. Your code is very clean and well-organized. I noticed that you have three different responsive sizes, but the tablet size doesn’t seem to be included—you might consider adding that. Other than that, I have no further comments; everything looks really good.
First of all, congratulations, you did a great job. 👋 Your code is quite clean, and I liked the JS. -The first thing I noticed is that it’s limited to mobile view. Adding tablet and desktop versions would make it more practical. -Another thing I noticed is that the checkboxes aren’t used with the given icon. These are small details, but they’ll help complete the project. Other than that, I really liked your code.
Good luck!✌️
working on this project has been a very good introduction to JavaScript, it became a good opportunity for me to learn how it works with HTML and CSS to make the web app interactive. The code might need some tweaking, but as of now, that will do!
Congratulations on completing the challenge 👋 I really liked your HTML code. I had only used input, but you used form, which seems more correct. -There was also supposed to be an error message in the project, which I think you missed. Adding it could make it more realistic. -You can also improve the readability and usability of your JS code by separating it into more functions.
Best of luck in your future projects!✌️
Hello there! 🙋🏼 Unfortunately, your code lacks the current and previous time; it's quite incomplete. You can update them by manipulating the DOM in JS (e.g., appending HTML using backticks). Good luck!
I a m proud of improving myself in form validation using JS. Next time I try form validation using CSS.
What challenges did you encounter, and how did you overcome them?DDuring Writing conditions for validation. But the articles helped me out.
What specific areas of your project would you like help with?I want help with the image align-alignment for mobile and responsive also.
Overall, you've done a great job, congratulations! 👍
max-width to maintain a consistent size. For images that need to adapt to different screen sizes, utilizing the <picture> element is recommended. For instance:<source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture> ``` - I was particularly impressed with the form section. To enhance realism, you could dynamically display the correctly entered email address using JavaScript, replacing the placeholder with the user's input. I wish you continued success in your future projects. ✌️
It took a lot of time to complete the mobile footer toggle functionality, I am proud that somehow i completed it.
What challenges did you encounter, and how did you overcome them?Writing JS code for mobile footer was challenging, i took help of stack overflow to fix my issues.
What specific areas of your project would you like help with?There is bug in my code, when i resize window to dekstop view from mobile view then last text section disappears. I don't know why? please help me fix it. Also the solution is not pixel perfect, help me achieve close to it.
Congratulations on completing this challenging task! 👍 👏
display: none This way, you can adhere to the DRY principle. The issue between desktop and mobile views stems from this.-Additionally, the sizes of the images you used differ from those in the design. You might want to pay a bit more attention to this.
Good Luck ✌️
Hello there 👏 You've done a pretty good job.
Your project works responsively and aligns well with the design. I have a few suggestions:
<picture> tag with min-width to display different images for various screen sizes. <picture>
<source
media="(min-width: (your value))"
srcset="./assets/desktop/image-hero-left.png"
/>
<img
src="./assets/tablet/image-hero.png"
alt=
/>
</picture>
<picture>
<source
media="(min-width: (your value))"
srcset="./assets/desktop/image-hero-right.png"
/>
<img
src="./assets/tablet/image-hero.png"
alt=
/>
</picture>
cursor: pointer for all buttons.I hope my suggestions have been helpful. Happy coding!
I feel more confident with Grid and how it works, I also discovered grid-template-areas and how to set grid placement without using 1 / 1 / 1 / 1 format.
What challenges did you encounter, and how did you overcome them?I got stuck with adding the background image but found the solution via googling
What specific areas of your project would you like help with?Any advice welcome!
Hello @RKennedyy!
Congratulations on finishing the project!
The project looks awesome!
Here are a few general suggestions for your project:
᭼ You might want to try using em instead of px. This can help with making the site more responsive.
᭼ Starting class names with lowercase letters instead of uppercase might be a more conventional way.
᭼ Additionally, the quotation mark is not in the correct position. You can look more carefully at the project example.
What I'm most proud of from this challenge is that I'm starting to understand to make a responsive website will involve using both CSS Grid and CSS Flexbox.
Learning that you can use grid-template-areas and use periods to take up space on the grid is a neat trick for being able to place elements in a cross formation like in this challenge.
What challenges did you encounter, and how did you overcome them?main{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); grid-template-areas: ".team-builder." "supervisor team-builder calculator" "supervisor karma calculator" ". karma ."; gap: 2rem; }
The main challenge I encountered was learning how to implement both CSS Grid and CSS Flexbox at the same time. Having to design custom CSS rules for both mobile and desktop really makes designing and using HTML elements extremely complicated that you feel like you need to create multiple or elements to solve the challenge as both Grid and Flex involves being able to use attributes for a parent-child relationship.
The way I overcame this was to use Grid for the webpage design and use Flexbox for the content. This is the practice I would like to move forward with to develop my knowledge of both Grid and Flexbox.
What specific areas of your project would you like help with?The area I would like help from with this project is understanding how to stop the text and images from being responsive using CSS.
I know I try and make an exact match of each challenge, but I can't stop the text from being responsive when the window size increases or decreases as seen in the mobile-design and desktop-design pictures.
I would also like help with figuring how to figure out how big or small containers should be for each challenge. Because either I make them responsive or set a specific size and I don't know what's the best practice.
Bravo, your project looks great. I had done mine using flexbox, but you did an excellent job with grid as well. The colored borders on the cards end in a straight line; to achieve this effect, you can add a pseudo-element and use the background color of the cards. This way, you can get a result that is a bit closer to the original. Although this project is small, I think it would be more beneficial to work with class names. Lastly, when the screen width is around 1100px, the sections of the first and last cards are off the screen, so maybe you can think of a solution for that too. Congratulations!
