Proud of the structure I created.
What challenges did you encounter, and how did you overcome them?Vertically positioning in the centre was hard for me. Overcame it by asking chatgpt
What specific areas of your project would you like help with?Centering elements
Greetings, I see that you solved this challenge very good! Here's some moments for future considerations you should take to improve your frontend skills:
Use class instead of id, second can be used only to be used in JavaScript and for anchoring. Using classes can shorten selectors in every ruleset.
For font-size and element's sizing properties you should use rem mostly or em units to tolerate user's personal font settings. Relative units bases on user's font size settings, for most users, they have 16px for font size, so you can base on it.
Hi, nice work! Cool to see that you've used Grid, Flexbox and media queries for this challenge.
Hello, excellent work! There are some detail you should fix:
height property to set body's height size. You've used min-height property for container, so you can just omit fixed height property for body element.section tag for a whole section and cards, leaving non-semantic div tag for grouping elements.Keep going and track your achievements on this journey of web-development!
Hi, your solution looks well! Here are how you can improve your solution:
Avoid using fixed height for container, use min-height property instead to not let overflow happen.
Box shadow's property is this: x y blur color; where x & y are element coords offsets, and blur is self-explanatory, every value except for color must have <length> units (for example: rem, px or ch).
Replace some divs with semantic elements as <main> for container, <article> for card, <p> for para element. Also, wrap date time (not including published:) in a <time> tag with mandatory datetime attribute (don't forget to write value for this attribute like this: "YYYY-MM-DD").
Hi! Very good, here's what you should know:
height, consider using min-height for body to not overflow container;px to adjust font sizes, you can read this article to know why;I should admit you have a good starting point! Keep on going
Website responsiveness
Hello, good!
Looks like there are some areas you should fix:
<hr> tag.<b>, <span> or other inline-level tags, suitable for bolding text.<th> to add headers for table content layout.max-width property another relative unit like rem.I can recommend you to visit "MDN web docs" if you haven't done that, their guide series are great.
I also recommend you using CSS Reset because every user agent's (browsers) stylesheet differs
I'm most proud of figuring out how to get things in the right position (mostly). I just started learning html and css adbout two months ago so I was trying to use the internet as little as possible for things that I had already learnt. I think I think I did a pretty good at just figuring out how to think in css for lack of better words. Next time I'll try not to overcomplicate things and find a simple solution.
What challenges did you encounter, and how did you overcome them?I struggled with getting the content in the right position. I used flex display to do it and it wasn't working how I was expecting it to and I genuineky didn't know what the issue was. I found a slightly different way of positioning everything - still using flex display.
What specific areas of your project would you like help with?So, I just started HTML and CSS about two months ago and I would like feedback on how I could make my code more concise because I think there are a few things I could have done with less code and in a simpler way. I would also like to know how to get a space between the text and the links in the footer as I couldn't figure that out.
Hello, excellent work!
Here's few things you should add/use:
min-height property instead of fixed height for body & html elementsbox-shadow propertyKeep doing good work!
Excellent, almost identical with the design! And your HTML structure is good.
The location content actually has the weight of 600-700.
Replace <button>s with anchor elements, because they link other websites with yours (hyperlink).
i've done the project but after that i saw u recommand to code the size of paragraphs and.. in a way that u dont need to change it in media quary , but i saw u recommend after i've done my coding so i didnt change anything:D but i think maby i must write the siz e using the calc with a percent of 100vw
What challenges did you encounter, and how did you overcome them?i encounter with a problem in picture sizing and i solve it with object fit
What specific areas of your project would you like help with?please tell me how can i write a code that when i responsive the page the size of font changed but i didnt write in media quary
Good work, but you should have used semantic elements in HTML for better accessibility.
Using viewport units for changing font size is pretty creative! You forgot to use line-height declaration to divide paragraph lines.
I also have difficulties with not using media queries to change font size, so I think we're not too different :)
Probably using flexbox or grid next time to center the container element; or just other options out there, just to learn what else is out there and how they work.
What challenges did you encounter, and how did you overcome them?Probably the CSS classes naming, lol!
What specific areas of your project would you like help with?Your QR code card is almost perfect if looking in HTML & CSS codes. Good choice of semantic elements.
Here is what you should\can do:
<body> element's background color;<footer> content and styles, that applies to it.README.md file and rename README-template.md to README.md.You can use the CSS Flexbox to center a container inside parent element:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh; /* To give the body space for centering element horizontally */
}
You can also combine it with margin: auto; which makes justify-content property unnecessary.