WM4 - Kerim Zamir - HTML/CSS - Week 2 - #392
Conversation
*added* images for new the extension task
*added* image for new the extension task
*added* aside
*added* aside css
*change* improved positions
*added* Store Page
*change* improved positioning
*added* Store CSS
| <div class="container"> | ||
| <img class="bg-image" src="img/first-background.jpg" alt="bg-img"> | ||
| <div class="bg-text"> | ||
| <p class="p-1">Introducing Karma</p> |
There was a problem hiding this comment.
This is a title and needs to be different from "Bring wifi ... " text. I highly suggest to use h1 or h2 , so users can have a better experience.
| </div> | ||
| <aside class="addition-1"> | ||
| <div class="aside-1"> | ||
| <p class="p-new"> Wherever I am, I just don´t worry about my connection anymore! </p> |
There was a problem hiding this comment.
Firstly the goal was to create a paragraph in 3 lines, If I am going to be picky, I would say you need to fix it first. You can split your words in 3 divs in a column sort. Another Important thing for your whole HTML is naming your elements classes more specific and details , so when another person is reading your code, they can understand your code. For instance, class p-new can represent any p element in your HTML. Try something like, get-karma-text-above
| </head> | ||
| <body> | ||
| <header> | ||
| <nav> |
There was a problem hiding this comment.
The height of nav section is a bit small in terms of UI. This won't help user's eyes to see the nav section easily. I would recommend it a bit bigger in height.
| <p class="p-new"> Wherever I am, I just don´t worry about my connection anymore! </p> | ||
| </div> | ||
| <div class="aside-2"> | ||
| <a href="store.html" class="get-karma-today">Get Karma today</a> |
There was a problem hiding this comment.
Also, making the button text bolder would make it much eaiser to read. Using font-weight
| <main> | ||
| <fieldset> | ||
| <h1 class="fieldset-h">Order your Karma wifi device today!</h1> | ||
| <form> |
There was a problem hiding this comment.
Positioning your form elements and making them align and making them bigger are needed. So they would match the given design. Play with margin, padding and height and width in em, rem format to make them like the design.
2 participants
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?
Almost everything
What did you find hard?
adding icons to the social media links
What do you still not understand?
N/A
Any other notes?
N/A