Latest solutions
Latest comments
- @isayaexavery@ChrisAndrewsDev
Hey @isayaexavery, nice work on your first challenge!
There's a few small HTML warnings that are easy to remedy:
- Using semantic landmark HTML tags
<main> <section>
in place of standard<div>
tags to divide sections is best practice and helps with accessibility for screen-readers. - You typically want to start with an
<h1>
on a page and work your way down to smaller headings for less vital content:<h1> to <h2> to <h3>
and so on.
One small thing I noticed when compared to the design brief is that your paragraph should be
text-align: center
You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!
Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!
Nice one!
Marked as helpful - Using semantic landmark HTML tags
- @NATiiCODES@ChrisAndrewsDev
Howdy @NATiiCODES!
There does seem to be some spacing weirdness going on with the solution, my assumption (and hopefully a more experienced developer can correct me if I'm wrong) is that it's because you're using article elements for the majority of the HTML.
From my understanding, the
<article>
tag serves a super specific role and generally doesn't get used for the bulk of the structure of a document.I would suggest trying to change the
<article>
tags to<div>
tags, or preferably semantic tags, like<section>
for larger containers, followed by<div>
tags inside.I've got a feeling this should help with the elements being all scrunched together and allow you to apply styles easier!
Good luck and let me know if it works at all!
- @unic0rnKate@ChrisAndrewsDev
Howdy @unic0rnKate!
Don't worry, everyone seems very friendly on here (I am new too!) and usually give really good feedback.
I did notice that your styles don't seem to be applying to your solution, and it looks to me that your relative linking is slightly incorrect:
<link rel="stylesheet" href="css/styles.css">
Should be changed to
<link rel="stylesheet" href="styles.css">
Typically the "/" denotes a parent folder - "parentFolder/itemInsideFolder" and since you don't have a "css" folder, you shouldn't need to use that!
Once you've fixed that small issue we can have a look at the design implementation! Good luck :)
- @MahmoudKasrawy@ChrisAndrewsDev
Hi @MahmoudKasrawy!
It seems like your screenshot does not look the same as the deployed solution, I will just assume it's an error on this site, as the actual live solution looks much closer!
Very solid first effort 🎉🎉
You do have some HTML and accessibility issues that shouldn't be too hard to remedy.
Firstly, you should have meta attributes in your markup boilerplate, it would look something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
If you are using vsCode as your text editor, I think you can use "! + tab" to generate the default boilerplate markup which contains most (if not all) of the things you would need to avoid those errors!
When using an image, it's best-practice to provide an "alt" tag, to help with screen-readers and web-crawlers:
<img src="../source/image" alt="a text description of the image">
A really solid effort so far though!
- @abidoyeIbukun@ChrisAndrewsDev
Howdy @abidoyeIbukun!
It seems like something has broken when deploying your solution, did you perhaps deploy the wrong build?
It might be an issue with your HTML filename, does the live site look different to the screenshot displayed on here?
Marked as helpful - @lee-fentress@ChrisAndrewsDev
Hey @lee-fentress!
It seems like your relative link path is a bit off in your HTML (where you are linking the .css stylesheet) -
<link rel="stylesheet" href="/stats preview card/actual project/images/styles.css">
It should be something like this:
<link rel="stylesheet" href="./styles.css">
Typically when you link things from the same general directory or workspace:
- "./" means the same level (or directory) as the current file
- "../" means go up one level (or directory) from the current file
Marked as helpful