@yas-avocad
Hello there, My name is Michael Johnson and I am a beginner HTML5/CSS Frontend Devoloper. I am seeking challenges to improve my skills and possibly share some of my work to receive feedback. Thank you very much for reading my bio and I hope to create some great work!
Latest solutions
Advice Generator w/ Vanilla CSS & React
Submitted about 1 year agoI'd love any general feedback or if I did something wrong, I'd love feedback on it.
Advice Generator w/ Vanilla CSS & React
Submitted about 1 year agoI'd love any general feedback or if I did something wrong, I'd love feedback on it.
Expenses Chart Component w/ React & Vanilla CSS
#reactSubmitted about 1 year agoI wasn't able to get the tooltip to display over each individual bar properly and if anyone knows how to do it, I'd love to read your explanation and tips! Other than that, if anyone spots any errors that I made while using Recharts, i'd love a more experienced developer to guide me in the right direction.
Thanks everyone!
Expenses Chart Component w/ React & Vanilla CSS
#reactSubmitted about 1 year agoI wasn't able to get the tooltip to display over each individual bar properly and if anyone knows how to do it, I'd love to read your explanation and tips! Other than that, if anyone spots any errors that I made while using Recharts, i'd love a more experienced developer to guide me in the right direction.
Thanks everyone!
Latest comments
- @mikej321
Congrats on completing the project!
To center the project vertically, add these following properties to the body in CSS.
body {min-height: 100vh; display: flex; flex-direction: column; justify-content: center}.
Not sure if you're familiar with flexbox or not, but what the code does is it turns your entire page into a flexbox container. The min-height is needed at 100vh (viewport height) so flexbox knows to center it in the middle of the page instead of the middle of whatever the height of the container is. The flex-direction controls the direction that your content is layed out on the page. In this case, you want it to be layed out vertically, so we choose column here instead of row. Finally, justify-content normally centers on the horizontal axis but because we changed the flex-direction, align-items will center on the horizontal axis. Whenever the flex-direction is changed, the property needed to center vertically and horizontally are flipped. Here is more information on Flexbox that would be a great read.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope this helps and good luck in your future!
Michael Johnson
Marked as helpful - @Nachoho@mikej321
Hello there and congrats on finishing the QR Code challenge!
In your project, you may have noticed that it blew up in size. It did that because it doesn't have a predefined width to go off of, so it's stretching to fit the content. This can be fixed by placing 'max-width: 375px' to your .card class. Once you do that, you'll find it much easier to style the rest of the card's body, such as increasing the font size for the header title and body paragraph.
Hope this helps and happy coding!
Michael
Marked as helpful - @Janvampierssel@mikej321
Hey there,
Something that I learned that may be of value to you that I got from a book about Tailwind...when it comes to sizing, just attempt to get it as close as you can and go from there. As long as it's close enough, it's fine and not to worry about being 'pixel perfect'. I remember I would do the same, constantly changing values to get it to be exactly the same. It is headache inducing, haha! Hope this is of some value to you and happy coding!
Michael
- @pypimo@mikej321
Yes, you should wrap content in semantics...it could even be helpful to know that semantic tags can also be wrapped in divs, in case that ever confuses you like it did me. What I normally do is look at the flow of the design that I'm viewing and look for obvious gaps in content, maybe whitespace. At the top, I'd do a header tag, then everything else would be under a main tag. If the site has a footer bar or in the projects case, you could even wrap the attribution to you in a footer tag. I hope this helps and I wish you luck on your journey!
Michael
- @PutluruAravindaReddy@mikej321
Hello there and congrats on finishing this project!
As Tushar has pointed out, your issue with responsiveness comes from breakpoints that are too small. Here is another article that can get you going.
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
Unless you've made a tablet version as well, having a breakpoint at 375px is too small as that content will flow off of the screen and be hidden from users. Luckily, it's easy to learn media queries and I believe you'll have it in no time. I wish you luck on your journey, my friend!
Michael
- @danielcxy@mikej321
Hello there!
A few things that can help you along your journey...there should be a file in the challenge files that contains all fonts and colors needed for the project. Find the font (usually at the bottom) in the file and it should take you to Google Fonts. Grab the font weights that they ask for and then import it via CSS or the link tags that they give you, that should fix the font issue. Also, if you remove the margins from the text at the very bottom and place padding-inline: 32px, it should center that text. I'm going to leave a few mdn articles that can help you along the way. Congrats on finishing the QR code project and I wish you luck on your journey in the future!
Michael
https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/ (they teach you how to go to google fonts and put the fonts in your project but in this case, the link to google fonts is given to you in the project files. It should directly lead you to the font that they want)
Marked as helpful
