@NameRectified
What challenges did you encounter, and how did you overcome them?
It was my first time working with api. Googled about it
What specific areas of your project would you like help with?Please do give suggestions.
Italo Marcelo
@MarceloDevd3All comments
- @MarceloDevd3
May you can use this link about html semantica
Youtube video: https://youtu.be/bOUhq46fd5g?si=73HypmS7kiHfb0nx
MDN: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
And to me you made a great work and Keep going 😁
Marked as helpful - @kinlearnWhat are you most proud of, and what would you do differently next time?
I am proud of the fact that I could correctly identify the root cause of unwanted behavior of my code.
What challenges did you encounter, and how did you overcome them?The attribution div was not fitted properly. I made it disappear by changing it's display property value to none. Also, the main div (i.e. the main card ) was not being centered in the middle of the body. This was because I did not make the height of body element to 100vh.
What specific areas of your project would you like help with?Flexbox
@MarceloDevd3I'll help you with just open this links It's site calls Flexfrog = https://flexboxfroggy.com/#pt-br If you also wants to learn Grid I'll let this one: https://cssgridgarden.com/ You can change the language on this site for your language if you want And this is for your learn how to use variables in Css : https://youtu.be/5wLrz_zUwoU?si=Ftt3vufsK3UMq5iQ
- @rajawatadityaWhat are you most proud of, and what would you do differently next time?
I learned more about functions and used them properly with the DOM. In CSS i learned about required attribute in input.
What challenges did you encounter, and how did you overcome them?major challenge to show the message after submitting the form but i tried various ways and finally i used the JavaScript DOM property. media query is still missing with my project which i would love to learn as soon as possible.
What specific areas of your project would you like help with?i could be more innovative through my CSS properties to make it more stylish
@MarceloDevd3I think you should watch this class about Media query https://youtu.be/2KL-z9A56SQ?si=lIj00vgmzF-YvfF9 I think you should watch this one too To learn when to use "% vh vw px em rem " https://youtu.be/N5wpD9Ov_To?si=PKir7ZLpGzjOmDnw https://youtu.be/IWFqGsXxJ1E?si=di0tyMxmp1dMZjtR
Marked as helpful - @Mathan2110What are you most proud of, and what would you do differently next time?
Any feedback is welcome...
@MarceloDevd3Maybe you could replace the <div class="container"> for a <main> Tag and instead use a main in your card you can use a <article> and also you couldn't use a <footer> tag inside a <main> tag, I going to help with semantic future issues on your projects I'll let a link about semantic and with you Css I should use a width and height fix with px because is easier than use "%" or "vh and vw" I also let a link about it
Semantica link: https://www.semrush.com/blog/semantic-html5-guide/ Semantica link: https://developer.mozilla.org/en-US/docs/Glossary/Semantics Units of measurement link: https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/#:~:text=VW%20is%20useful%20for%20creating,up%20the%20entire%20viewport's%20height. https://www.youtube.com/watch?v=ru3U8MHbFFI
Marked as helpful - @karishmak77What are you most proud of, and what would you do differently next time?
I'm proud that I completed my challenge. It's not exactly the same, but I managed to get pretty close. I made the layout responsive for both phone and desktop, which feels like a big win. It wasn't easy, but figuring out the details and seeing it all come together was really rewarding. Now, I'm excited to tackle even more projects and keep improving.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was making the layout, which was pretty difficult. But I managed to get it done and tried to match the given layout as closely as possible. It wasn't easy, but I'm glad I could pull it off. Figuring out the details and making everything fit together was a real test of my skills. Despite the hurdles, seeing the final responsive design for both phone and desktop was incredibly rewarding. Now, I feel more confident in taking on even tougher challenges in the future.
What specific areas of your project would you like help with?I still need help to make my layout exactly the same as the one given. If anyone can help me with it, I would be really grateful.
@MarceloDevd3I think you made an awesome working with the sematics tags, but you could import you icons with this free framework, calls "Font Awesome" it's easier than use the <img> tag to import all your icons, but it's also a good way to finish your project, and with you CSS I'll let a tip about how you could fix I think that you problem is that you only create a midea query to @media (max-width: ) normally in my projects I used @media (min-width: ) I will let a link about it : https://www.youtube.com/watch?v=p3k_IrXLNRc, I hope that this tips would help you with you problem.
Marked as helpful - @NrotsaWhat are you most proud of, and what would you do differently next time?
Hello, Made with : HTML CSS SCSS This is my first time using SCSS, so the code is quite messy, but SCSS is very convenient and I plan to use it in the future projects.
What challenges did you encounter, and how did you overcome them?I've been struggling with media queries and I feel it can be done in a simpler and faster way. If you have any suggestions on how I can improve my code, please leave me a comment!
Feedback welcome :)
@MarceloDevd3First I think you could replace some tags on your project as your links element you use a <p> tag but you could also use an <a href> or a <button> I'll let a link about it, and also about media query that I'll help you with you problem. Semantic html https://www.codewithharry.com/tutorial/html-semantic-tags/ https://developer.mozilla.org/en-US/docs/Glossary/Semantics
Media query https://youtu.be/2KL-z9A56SQ?si=D7SkSNY-3AAddz1e https://developer.mozilla.org/en-US/docs/Web/CSS/@media
I hope that I helped your with you doubts😁
Marked as helpful - @grgrnkooWhat are you most proud of, and what would you do differently next time?
Glad to be back to challenges. Felt a bit hard to adjust classes and prioritizing, but figured that out. Also was a bit challenging to adjust all designs on a mobile version, but I really love such a challenges!
Moving forward! Thanks to Frontend Mentor for a JS path. Hope to complete all challenges till the end of June! Happy coding everyone
What challenges did you encounter, and how did you overcome them?Firstly, I just wanted to add a hidden class to an element, but main CSS settings were overriding this property, so I came to a solution where all dynamic properties should be adjusted to a dynamic classes(e.g.: 'active' and 'hidden').
What specific areas of your project would you like help with?Would love to get any review because I think there are lots of much easier ways to complete this task!
@MarceloDevd3Hi, I think that you should use semantic tags on your projects, Semantic HTML tags are tags that define the meaning of the content they contain. I'll let some information about it. Link: https://www.pluralsight.com/resources/blog/guides/semantic-html
- @yasso2weny@MarceloDevd3
You must use class if you going to repeat the same style for more that one time, and you can't use id like you use class I'll let more information about it right down
Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.
link : https://www.udacity.com/blog/2021/01/html-css-class-and-id-selectors-everything-you-need-to-know.html#:~:text=Remember%20the%20difference%20between%20Class,H TML%20element%20within%20the%20page.
Marked as helpful - P@shanstarvish@MarceloDevd3
A parte do seu src="" que e o caminho da sua imagem, não esta se dirigindo a imagem. Poderia ser resolvido src="images/image-qr-code.png".
Outra coisa para melhor organização você poderia usar uma folha de estilo para organizar, o seu css para que não fique tudo no seu head. pq um hora ou outra seu codigo vai ficar maior e ficar mais facil de fazer manutenção, se tiver uma folha de estilo
Espero ter ajudado com seu crescimento 🙂.
- @falloumacbook@MarceloDevd3
Você pode fazer isso Body { Background-image: url(o caminho da imagem); Background-repeat: no-repeat; Background-size: 100%; } Isso deve resolver o problema.
Marked as helpful
