Asaf Axelrod HTML CSS Practice #19
Conversation
ShirYahav
left a comment
ShirYahav
left a comment
There was a problem hiding this comment.
General: Great work!
- Use classes instead of IDs where possible.
- Keep units consistent for better responsiveness and readability.
| <body> | ||
| <div class="form-container"> | ||
| <div class="form-column" id="form-text"> | ||
| <h1 id="heading">Stay updated!</h1> |
There was a problem hiding this comment.
It’s generally better practice to apply styles using classes rather than relying solely on IDs. Classes are reusable, make the CSS more scalable, and avoid overly specific selectors
| <div class="form-column" id="form-text"> | ||
| <h1 id="heading">Stay updated!</h1> | ||
|
|
||
| <p id="subheading"> |
| <button type="button" id="submit-button"> | ||
| Subscribe to monthly newsletter | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
General note for "form-column" div: wrap the inner elements in individual divs for clearer structure and more consistent layout behavior
| Dismiss message | ||
| <p> | ||
| A confirmation email has been sent to | ||
| <strong id="user-email"></strong>. Please open it and click the button |
There was a problem hiding this comment.
Use when the text has importance, urgency, or semantic emphasis
Use only when you want bold text without implying importance
| return /\S+@\S+\.\S+/.test(email); | ||
| } | ||
|
|
||
| submitBtn.addEventListener("click", () => { |
There was a problem hiding this comment.
This is a lambda function, worth reading up on how and when to use them
| @@ -0,0 +1,41 @@ | |||
| document.addEventListener("DOMContentLoaded", () => { | |||
| const formContainer = document.querySelector(".form-container"); | |||
There was a problem hiding this comment.
Good use of const. It’s a good idea to review why we use const/let instead of var in js
| - Desktop: 1440px | ||
| */ | ||
|
|
||
| :root { |
There was a problem hiding this comment.
Good use of CSS variables, they help keep the styling consistent, maintainable, and easier to update
|
|
||
| :root { | ||
| font-family: "Roboto", sans-serif; | ||
| font-size: 16px; |
There was a problem hiding this comment.
Consider using responsive units instead of px where possible. rem, em, or viewport units often give you more flexibility - read about it
| min-width: 0; | ||
|
|
||
| height: 100%; | ||
| padding: 2rem 1.5rem; |
| #form-text input[type="email"] { | ||
| width: 100%; | ||
| padding: 0.9rem 1rem; | ||
| border-radius: 8px; |
There was a problem hiding this comment.
why sometimes rem and sometimes px? be consistant
2 participants
No description provided.