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))
Hello!
Your solution looks great and close to the design.
However, as I see, it is not responsive and looks the same on devices with different screen sizes. Since it was a part of the technical task, it would be best to incorporate responsivity using media queries. Although this particular design does not change drastically depending on screen size, more complex layouts might depend on responsivity for legibility. Also, semantic HTML could be improved, but in general, everything else is good.
Good luck in your future projects!
My solution is close to the design, I think I did quite well even though this time I didn't have access to the figma file.
What challenges did you encounter, and how did you overcome them?As previously said, I had to try to copy the visual based only on the screens.
Hello!
Your solution looks great, considering you didn't have access to the design files.
However, regarding HTML semantics, it would be best to use unordered list (<ul>) to wrap the socials instead of a <div>. Also, each social should be a link (<a>), not a button (even though it visually looks like a button), because it leads to external resource, as opposed to performing some action on the page.
Hope it will help you and good luck in your future projects!
Need responsive web design advice
Hello!
For responsive design, you can use relative measurements (em, rem) for your text instead of pixels. If you have access to Figma files, you can switch to rem in your right toolbar.
However, the main technique for implementing responsive design is using media queries. Inside media queries, you can specify styles for different screen sizes.
Good luck in your future projects!
Hello!
Your solution looks good on smaller screen sizes, but it probably would be better to use fixed max-width for wider screens as the card appears too wide on desktop devices.
Good luck on your future projects!
