Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London 9 Turing - Abdulmajid Rammali - HTML/ CSS 1 - Week 2 #280

Open
Abdulmajidram wants to merge 1 commit into
base: master
Choose a base branch
from
+69 −2
Open

London 9 Turing - Abdulmajid Rammali - HTML/ CSS 1 - Week 2 #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,34 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

header {
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;
}
Comment on lines +11 to +38

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +36 to +38

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
AR-HTMLCSS-W1

Else, you can remove it or use it to border the unordered list https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul


40 changes: 38 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,43 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<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>

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't forget to indent your files

<img src="https://masonfit.com/wp-content/uploads/2019/06/protein-powder-pancakes-recipe-720x720.jpg">

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one using a source url for the image!

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you can also add an alt text, that would be great

<nav>

<aside>
<h4> I know you want to eat the picture already :D</h4>

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</aside>
Comment on lines +23 to +25

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>


<p> List to buy </p>
<ul>
<li><a href="/home">eggs</a></li>
<li><a href="/about">protein powder</a></li>
<li><a href="/contact">mixer</a></li>
</ul>
</nav>

<article>

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<h2>Eggs</h2>

@selinfildis selinfildis Nov 17, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<p>Its the best source of protein and comes from chicken bak bak bak</p>
<a href="url">more info</a>
</article>

<article>
<h2>Protein powder</h2>
<p>Its the easiest way to consume protein innit.</p>
<a href="url">more info</a>
</article>

<article>
<h2>mixer</h2>
<p>You would need a mixer obv :).</p>
<a href="url">more info</a>
</article>



<footer> in the end enjoy your lovely meal :)) </footer>

</body>
</html>