@defenstration
Posted
Hi @ramiadi,
I think you made a good rough draft, and just need to add some finishing touches.
Just looking at the comparison, your sizing is a bit off and you should check your colors on the font. Mostly it's just playing with the padding.
Going into your code, the first thing I would challenge you to do is to get comfortable using a css stylesheet. It is a best practice to separate out your styling to CSS. There is a concept called separation of concerns about having your HTML be the structure, CSS be styling, and JS be function. It's a good way to look at things as you are learning.
You have an 'alt' on your image! Awesome! I totally forgot to do that for my first few projects. It's a key part of accessibility. Another part is using semantic HTML, and you are using HTML tags pretty well. The next step is to make sure you use header, footer, and main tags to organize the body of your code. Headers and footers are optional, but you should have a main (only 1) that contains the "main" part of your page.
Don't be afraid to use header tags. I think you could improve the contents of your card by changing up your structure a bit. The first line "Improve your..." could be a "heading", with the paragraph following it being the "content". Having that heading as an h1 would also give screen readers a place to start.
Quick tip - when you start adding these you can use grid to move the attribution to the bottom of the page easily. grid-template-columns: auto 1fr on your body if you only have a main and footer.
Nothing you did was "bad." The whole point is to learn, which is what you are doing. As far as how to start building a site, I can only share my process. With these challenges I:
- Setup a Github repo and clone into it on VS Code
- Download the challenge and extract it into the cloned folder
- Read through the readme, check the preview, and set up the sheets. I always add a styles.css and script.js (if needed)
- I step back and start looking at the components and develop a plan for what classes I'll need, what tags I'll use, how to structure them, and what layout tools I use. I try to come up with a plan to tackle the project with and I write that on paper. I find this to be the most important part of the project
- Structure the HTML and CSS
- Start styling!
All of this said, I am still learning too. I hope some of this helps. Stay awesome!
