london8-week2#290
Conversation
| <header> | ||
|
|
||
| <img class="logo-img" src="img/karma-logo.svg" alt="karma-logo"/> | ||
|
|
There was a problem hiding this comment.
Hi @Alirezabg, one of the objectives for this homework is to become comfortable with HTML nesting and indentation, so it would be great if you practice it from the very first sessions of the course :)
Please remove all of the extra spaces from here.
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
please delete extra space here as well
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> | ||
| </head> | ||
| <body> | ||
|
|
There was a problem hiding this comment.
you delete the extra spaces and comments from line 14 until line 21
| <div> | ||
| <ul class='container'> | ||
| <li class='con-list'> | ||
| <a class='con-link' href="#">Meet Karma</a> |
There was a problem hiding this comment.
@Alirezabg please use more meaningful classes names, I do not understand what does con-list or con-link mean, one of the objectives for this home work is using the meaningful names for your class names, please think about better and more meaningful names.
| <main> | ||
| <section class="store-section"> | ||
|
|
||
| <DIV> |
| @@ -0,0 +1,78 @@ | |||
| .but{ | |||
There was a problem hiding this comment.
having 2 different CSS files is confusing, you should just have one CSS file and put all of your classes in that file.you can use either of these 2 files.
|
|
||
| <DIV> | ||
| <img class="store-img" src="img/store-image_by-andrew-neel-unsplash.jpg" alt=""/> | ||
|
|
There was a problem hiding this comment.
for images, always wrap them inside a div (as their parent) then give that div whatever width you want (e.g. 40% or 500px), and give the img (which was wrapped with div) the width 100%(usually by percentage).
you should have a class for the div and just have a width for the class of this img ( you should not use height)
| <img class="store-img" src="img/store-image_by-andrew-neel-unsplash.jpg" alt=""/> | ||
|
|
||
| </DIV> | ||
| <DIV class="store-form"> |
There was a problem hiding this comment.
you wrapped everything inside of this div( div which has store-form class) and you have different classes for most of the elements inside of this div, inside these classes: form-header column-form row-form you used display: flex,flex-direction, etc.
instead of doing this and the right way for using the flex-box is you should always write display: flex inside of a class of the parent which means you just need to use display: flex inside of the wrapper class (div) and delete the display: flex for all of the element's classes which were wrapped by this div and just specified the flex-direction or other flex features you want in the classes of the elements.
| @@ -0,0 +1,154 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
🥳 overall well done for using :
- semantic form elements
- using flex-boxes
🤔 What you need to improve:
- well-named CSS classes
- using HTML nesting and indentation
- using flex-box for parents elements and work more on how to use different classes for parent and the child elements
| </div> | ||
| <div class="column-form"> | ||
| <label for="lastname">Last name *</label> | ||
| <input type="text" id="lastname" name="lastname" required> |
There was a problem hiding this comment.
you can add some classes for your input, to make it look a little bit better( maybe make it a little bit smaller and change the width of it?)
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?
What did you find hard?
What do you still not understand?
Any other notes?