it's the second project that i actually "did"
What challenges did you encounter, and how did you overcome them?There are some challenges with tags, about how to hover them and change colors for the text and background.
Hi, you did a great job in completing this challenge too! I would just like to leave a few things that I think might help improve the code :)
#git:hover, #front-mentor:hover, #LinkedIn:hover, #Mastodon:hover, #Instagram:hover {
background-color: hsl(75, 94%, 57%);
}
It is better to use a class for them since git, front-mentor, linkedin, and so on - all have the same type of element - a button :)
IDs or classes with the camelCase or lowercases with hyphens :) Try to also use a more descriptive and consistent naming conventions such as socialLinkButton or social-link-button, and so on.I hope these helps! Have a great day / night!
Hi! Great job on finishing this too :) If you'll allow me, I'd love to leave a few feedback that I think might help with the solution.
body {} element on your css file. You could refer to the style-guide.md file for this.margin:0 to remove the default margin set by the browser (in case).Have a good day!
It's my first official project trying to replicate an existing interface with html and css only. I think really thinking about the image and breaking it down into areas and labeling the areas in a way that made sense was critical to not get lost.
What challenges did you encounter, and how did you overcome them?One of the main challenges was centering everything, and once that was centered, how to make sure that the card information and the attribution element were vertically aligned instead of next to each other. The column orientation of the flex attribute was very helpful to learn about.
Hi, I think you did well on re-creating the reference image. So far, what I noticed is the site did not seem to have read the font family you used. I also recommend using a fallback font when using font-family. I.e. font-family: 'Outfit', sans-serif.
I did pretty well, but I'm still having trouble with the positions.
What challenges did you encounter, and how did you overcome them?I had to do some Internet research to help me with the div positions.
What specific areas of your project would you like help with?On positiond (flex, display...) please
Great! You've really made your work close to the source and I think I learned a thing or two from your script instead. ^^
As a backend developer, I always have been very bad at layouting a page. Learning Flexbox helped me layouting better than before.
Hello! I can relate to your comment here because I came here being a backend developer. I think you also did a great job on this! The only thing I noticed or could recommend is adding 100vh (viewport height) for the body so that your element / card could be centered with the help of flexbox
I would say I am most proud of not giving up on this project. Early on, my computer died while working on this project erasing all my data which made it hard to concentrate on finishing the project. I am glad that I pulled through to finish this challenge.
One of the things I would probably do differently is to be patient with myself, not being in a hurry to finish while enjoying the process.
What challenges did you encounter, and how did you overcome them?One of the challenges I encountered was finding the right resources to help me solve the challenge. I overcame this by reading various articles, resources and watching videos extensively. Additionally, I also joined communities that helped to improve my knowledge about HTML and CSS.
What specific areas of your project would you like help with?I would love help with writing a good commit message. I would also love help with CSS flexbox, specifically where the class = qr_sect. I was wondering if there is a way for the whole qr-code component to be in the center of the page both horizontally and vertically without using margin properties as I did.
Hi :)
You did a great job for being able to make this as close as the actual one
I may not be the best person when it comes to providing some help as I am also practicing my css skills :) But in the meantime, I will leave these things here and hopefully they can be helpful to you as well as it did for me.
The design of the card was neat. I enjoy those small projects. I also had fun working on the black "shadow", and I am curious to see how others came up with a different solution.
What challenges did you encounter, and how did you overcome them?The superposed divs with a different z-index was hard to find.
What specific areas of your project would you like help with?Help with css in general would be great.
Hi :)
I am also practicing flexbox so far so I'm not sure if I would be of any help. But what I noticed from your code are the following:
You can use flexbox in structuring your container content which I believe you have already applied on the part of your .author-container section on the css, instead. By placing it inside the card-container class, it would help your code to know how the items inside will be aligned (align-items, justify-content, etc..) you may read more on here
You have added a black-shadow div and class which can be a good alternate and nice that you were able to implement it! There is another easier solution for this which is just using the [box-shadow] (https://www.w3schools.com/cssref/css3_pr_box-shadow.php) property on CSS. You can implement this on your main container / card-container class.
for the sizes, for instance using fixed widths on containers and so on, you might want to study on em or rem, whereas px can be used for border sizes and so on. I'm also reviewing these things so goodluck to us :)
Have a good day!
Hi! I saw how you were able to come up with the solution and it's great that you're close to the original as well :) Something I want to point out is the usage of width: 100% and fixed height on your #card section and I recently learned how that is not very advisable and would be better to use 100vh (viewport height) instead.
This looks amazing! You made it so close to the actual design... What I noticed is that, you used a backdrop and set its position behind the actual card, I believe you can also use box-shadow and alter its parameter to make it work just like in the design :) But your usage of the backdrop in the css is also another alternative solution :)
Firstly, I am really glad that I finish the project faster than the previous one. Next time, I wish I can use less commends for CSS, cuz I feel like I can shorten them.
What challenges did you encounter, and how did you overcome them?The challenge was I couldn't able to make the qr code perfectly fit in the box and was struggle to make it looks nice. TvT
What specific areas of your project would you like help with?I would like to get help if there is a way that I can shorten the CSS commends.
I believe your code is really neat and well-written :)
The things I think you could improve on just as I did on mine are the ff.:
