London 9 Turing - Abdulmajid Rammali - HTML/ CSS 1 - Week 2 - #280
London 9 Turing - Abdulmajid Rammali - HTML/ CSS 1 - Week 2#280Abdulmajidram wants to merge 1 commit into
Conversation
selinfildis
left a comment
There was a problem hiding this comment.
Heya 👋
I think your code generally looks good, it's easy to read through and understand which is very important.
If you're looking to add more text to see how it looks, you can generate some random text via http://www.lipsum.com/
Apart from that, I've added some comments to enhance it further :)
| text-align:center; | ||
| font-family: verdana; | ||
| font-size: 50px; | ||
| Color:Green; | ||
| margin-bottom:50px; | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
| p,li,h2 ,footer , a{ | ||
| display:block; | ||
| margin-top: 30px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: 50%; | ||
| font-family: Courier New; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| img{ | ||
| display: block; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: 50%; | ||
| } | ||
|
|
||
| li:first-child { | ||
| border: 2px solid orange; | ||
| } |
There was a problem hiding this comment.
If you could allign and indent these better, that would be great
https://syllabus.codeyourfuture.io/guides/code-style-guide#indent-your-code and here's another detailed example of a css code style guide
| <body> | ||
| <!-- Add your HTML markup here --> | ||
| <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc --> | ||
| <header> How to make protein pancake </header> |
| <!-- Add your HTML markup here --> | ||
| <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc --> | ||
| <header> How to make protein pancake </header> | ||
| <img src="https://masonfit.com/wp-content/uploads/2019/06/protein-powder-pancakes-recipe-720x720.jpg"> |
There was a problem hiding this comment.
Nice one using a source url for the image!
There was a problem hiding this comment.
if you can also add an alt text, that would be great
| <aside> | ||
| <h4> I know you want to eat the picture already :D</h4> | ||
| </aside> |
There was a problem hiding this comment.
Ooh, nice one!
You might want to check and play around with the css though, as this element seems to be aligning to the left while the rest of the elements are centered. Here's an example on the mozilla documentation, if you'd want to play around with it a bit more https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Alternatively you can use captions for the image, using <figure> and <figcaption>
| li:first-child { | ||
| border: 2px solid orange; | ||
| } |
There was a problem hiding this comment.
Is this border something you want to keep with the first list element?
If so, you might want to do some more to align it, here are some resources on it https://www.w3schools.com/css/css_align.asp
Else, you can remove it or use it to border the unordered list https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
| <nav> | ||
|
|
||
| <aside> | ||
| <h4> I know you want to eat the picture already :D</h4> |
There was a problem hiding this comment.
instead of skipping to h4, you can use a
and adjust the font size or style using css.
See more about heading tags here: https://www.w3schools.com/html/html_headings.asp
There was a problem hiding this comment.
To be able to format the tags on their own or to target a certain set of tags, you can assign them ids, classes, and names or other attributes.
Here is a resouce for attributes in tags and here's how you can use them with css
| </ul> | ||
| </nav> | ||
|
|
||
| <article> |
There was a problem hiding this comment.
The
tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site
So the article tags are mostly used for content that can be displayed on other websites, I'm not sure if this is the right place to use them.
You can alternatively add some descriptions to the unordered list with something like the details tag or you could wrap the content with div's instead.
| </nav> | ||
|
|
||
| <article> | ||
| <h2>Eggs</h2> |
There was a problem hiding this comment.
As the above comment regarding headers, it might be a good idea to evaluate if you want to use them for their purpose or if you'd want to use a customised paragraph or a bold tag
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
html
What did you find hard?
first child
What do you still not understand?
Need more help about flex and grid
Any other notes?