kossivi/Responsive-Cake-Webpage - #76
Conversation
|
|
||
| </div> | ||
|
|
||
| <br> |
There was a problem hiding this comment.
While it's valid HTML, generally it's better to use css padding and margin instead of
to create spacing.
pddys
left a comment
There was a problem hiding this comment.
This exercise looks unfinished. The instructions were to start from a mobile width and then use media queries to create 3 different versions of the layout. I can only see one layout at desktop widths.
Was there more to this that was not committed? Otherwise this looks like the starting point, rather than a finished assignment.
| <br> | ||
| <br> | ||
|
|
||
| <div class="nav-bar"> |
There was a problem hiding this comment.
This could have been an unordered list? ul? or a nav?
As these aren't really divs, it's better to be semantic in your HTML
| <div>IMAGE CAROUSEL | ||
| <br> | ||
| <br> | ||
| <p>IMG1</p> |
There was a problem hiding this comment.
If these are images, then it'd be better to use the image tag and some placeholder images.
| <br> | ||
| <br> | ||
|
|
||
| <footer class="extra-info"> |
There was a problem hiding this comment.
This is a good use of a semantic HTML tag
| @@ -0,0 +1,10 @@ | |||
| function participant(students, mentors) { | |||
|
|
||
| .flex-container > div { | ||
| background-color: #a9a9a9; | ||
| margin: 0.627em; |
There was a problem hiding this comment.
There are some values here without much context as to why they exist. These are called 'magic numbers'.
It may be useful to add a comment explaining why you used these decimals.
| } | ||
|
|
||
| .nav-bar { | ||
| display: flex; |
| margin: 0.627em; | ||
| padding: 0.1em; | ||
| font-size: 1.882em; | ||
| color: white; |
There was a problem hiding this comment.
You've mixed hex colors and web safe colours here. It's best to stick to one format.
| font-size: 1.875em; | ||
| } | ||
|
|
||
| .main-content div:nth-child(2) > p { |
There was a problem hiding this comment.
In this case, it may have been better to add a new class, than target paragraphs using nth-child.
| } | ||
|
|
||
| @media only screen and (max-width: 100%) { | ||
| body { |
| font-size: 1.875; | ||
| } | ||
|
|
||
| @media only screen and (max-width: 100%) { |
There was a problem hiding this comment.
max-width would take in absolute values rather than 100%.
|
Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback. |
Your Details
Homework Details