I am proud to use only HTML, CSS, and JavaScript to create a similar design. Next time, I will try to make use of frameworks and third-party tools for form validation.
What challenges did you encounter, and how did you overcome them?I faced a problem with the form validation aspect but I did a research and read on how to make it work.
Hello!
Great job, your solution looks very close to the design! However, it lacks responsivity, but since the main focus of the project was on JS, it is not a big deal. Also, the success message appears on top of the main card, and I believe it was supposed to replace it and vice-versa. One last comment - the title would be better wrapped in h1 tag, not a header tag.
Otherwise, your work is great!
Good luck in your future projects!
Hello!
Great job, your solution looks very close to the design (except for the author's name color and font-weight) and the JS functionality works as expected. The only suggestion - to use semantic markup, for instance h1 and p tags instead of div.
Good luck in your future projects!
Well, let's go... I think I did well, I had some small problems but I managed to solve them with a little patience... I really like this dynamic of challenges, as it makes me very focused on, as I said in the military police, 'accomplishing the mission'. I'm going to keep doing these challenges and I hope that with time and feedback from more experienced people I can get good at it.
What challenges did you encounter, and how did you overcome them?I had difficulty aligning the first ".group-chat" section for the desktop model mainly... but with some effort I think it worked lol, in addition I had difficulty in general with the four images in the ".second-square" section
What specific areas of your project would you like help with?Any advice and help so I can improve will be welcome
Well done, your solution looks perfect on all device sizes!
I’m proud of pushing past my fear of not understanding CSS Grid and successfully implementing it. Next time, I’ll trust myself and dive right in
What challenges did you encounter, and how did you overcome them?One challenge I faced was initially feeling overwhelmed by CSS Grid and unsure how to use it correctly. To overcome this, I practiced with simple layouts. Through persistence and hands-on application, I built confidence and successfully implemented it
Hello!
Your solution looks amazing, great job conquering the grid layout!
My only improvement suggestion would be regarding semantics:
I hope you will find it helpful and good luck in your future projects!
I had difficulty using CSS Grid and the responsivity
What specific areas of your project would you like help with?I would like an overview of my project, especially regarding its responsiveness and the CSS Grid.
Hello!
Your solution looks good, very similar to the design!
A note regarding semantics - it's better to use unordered list to group the cards and treat every card as a list item, as they are basically the same entity and are all interconnected. The article tag should be used for content that can make sense by itself, outside of the context of the page.
Also, it is best to give the cards a common class name and apply all the common rules to it, and then just add the border color to a specific card using its specific class name. It will remove repetition and make your code cleaner.
As for the grid, you applied it well, but for the sake of your convenience you can use the grid-template-areas property (applied to a grid container) along with grid-area property (applied to each grid item) - https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas.
I hope it helps and good luck in your future projects!
Hello!
Great job, your solution looks very close to the design!
However, your choice of some tags could be better, in my opinion. For instance, you do not need a figure tag to contain an image, as it would better be suited for illustrations or diagrams. Furthermore, the image in this card is a content image, not a decorative one, therefore it should not be added as background-image in CSS. Instead, to make a browser select a corresponding image based on device width, you can use a picture tag (https://www.w3schools.com/tags/tag_picture.asp).
I hope it helps, good luck in your future projects!
And sorry for so many "image" words, but it was necessary))
