HTML and CSS Tasks - 01 #1
Conversation
The scaffold has been done as per the instructions, for the first task
task_1/css_task/index.html
Outdated
| <!--Local CSS--> | ||
| <link rel="stylesheet" href="./css/main.css"> | ||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
There was a problem hiding this comment.
Kill this, don't use any any external libs or frameworks. If you really need to use a CSS reset: https://cssreset.com/scripts/eric-meyer-reset-css/
task_1/css_task/index.html
Outdated
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | ||
| <!-- Font Awesome --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> |
task_1/css_task/index.html
Outdated
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> |
There was a problem hiding this comment.
Kill all uses of bootstrap and replicate the same look and feel using plain CSS
task_1/css_task/css/main.css
Outdated
| transform: translateY(-12px); | ||
| } | ||
| .task-one_form-input-name:invalid { | ||
| border: 1px solid red; |
There was a problem hiding this comment.
Usually have been using hex, that's the preferred standard we've been taught. I shall use rgb
| .task-one_form-layout { | ||
| border: 1px solid #d3d3d3; | ||
| border-radius: 5px; | ||
| box-shadow: 0 2px 5px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.10); |
task_1/css_task/css/main.css
Outdated
| border-radius: 5px; | ||
| box-shadow: 0 2px 5px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.10); | ||
| height: auto; | ||
| margin: 0.75rem 0rem 0.75rem 0rem; |
There was a problem hiding this comment.
Where are you setting the base font size to be referenced by rem?
task_1/css_task/index.html
Outdated
| </div> | ||
| <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6"> | ||
| <label for="lastName">Last Name <span><i class="fas fa-asterisk task-one_form-required"></i></span></label> | ||
| <input type="text" class="form-control task-one_form-input-name" id="user_name" placeholder="enter your last name" pattern="[a-zA-Z ][a-zA-Z ]+"> |
There was a problem hiding this comment.
How is "pattern" being triggered?
There was a problem hiding this comment.
Here pattern takes in regex. I have used the basic that I know of.
| @@ -0,0 +1,66 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
Why different files? Why not have two different commits to make it easier?
There was a problem hiding this comment.
Made two separate commits the second
| @@ -0,0 +1,36 @@ | |||
| .task-one_form-layout { | |||
There was a problem hiding this comment.
What is the significance of the naming convention you are using?
There was a problem hiding this comment.
It is called Block Element Modifier (BEM), usually start off with the app name, then after the underscore it's the block followed by the element and the modifier that is usually targeted.
A coding standard followed
2 participants
The scaffold has been done as per the instructions, for the first task