Next time I'm probably going to try to utilize CSS grid instead of Flexbox for the annual plan section.
What specific areas of your project would you like help with?I'll admit I probably didn't spend enough time on it but the background image isn't accurate and if I fiddled around with it I could figure it out so if anybody could tell me what the obvious solution to this is then it would be much appreciated.
Hey there. Congratulations on your submission.
Using background-size: contain; instead of background-size: cover; will help you align more with the design.
Cheers.
some stuff with positioning, just kinda put flexbox in everything
What specific areas of your project would you like help with?i have a hard time with knowing font size, paddings or margins, sizing of elements, if i have thoese things writen somewhere then i have no issue actually coding, but creating from a photo or even worse, creating something from top of my head then i have no idea on how to make it look good
Hey mate, congratulations on your first submission. Deciding what sizes and spacing to use when starting out can be rather daunting. Personally I've tried to stick to the standard sizing majority of the designs use and try to change things from there. Here's an article I found that might be of help.
Hey mate change your image src from
src="/qr-code-component-main/images/image-qr-code.png"
to
src="./images/image-qr-code.png"
Your src points to the root of your file structure. While it works on your machine, netlify probably isn't considering that to be the root of your build. That's just a guess though, you'd be better off doing your own research about the reasoning.
In general it's always a better practice to point to things relative to the current file in most cases. You can read more about file paths here https://www.w3schools.com/html/html_filepaths.asp
Hey mate, good job on completing the challenge. Have a look at CSS pseudo elements. ::before and ::after specifically. This lets you add content before or after a specified element which is really handy for a problem like this. In my case, I added this using a ::before element on the button I believe.
Happy coding!
Hey mate, your code looks good. Congratulations on completing the challenge.
A couple of things I would do differently.
As far as I know, floats are mostly not in use unless absolutely necessary. I did a quick search and it seems the only use case for it is when you need text to wrap around something which isn't a requirement here. For the image I would give it a
margin-left: auto to align it to the right.
I would consider using a grid instead of flex for positioning. While there is absolutely nothing wrong with using flex for this use case, I feel Grid would be a better way to approach it specially when it comes to responsive design.
Hope that helps! Happy Coding!
Hey mate! your solution looks good and congrats on completing it. Building on @abdullah43577's response. Semantic elements are the better practice when writing HTML over divs. It makes the code easier to read and it provides context to browsers and search engines. Here are some resources that might help.
https://developer.mozilla.org/en-US/docs/Glossary/Semantics# https://www.w3schools.com/html/html5_semantic_elements.asp
Happy Coding!
Hey mate. Good job on completing the challenge. I just finished it today myself. My approach was a little different.
Hopefully that helps! There might be a solution to get it working with the changing the image content itself like you've tried but this might be a good alternate solution if not.
Happy Coding!
