NW6 | Fikret Ellek | HTML-CSS Module | Multipage Clone | Week 4 #186
Conversation
✅ Deploy Preview for cyf-module-html-css ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Overall, your pages looks great @fikretellek ! However, the deployment is not showing the pages due to the deployment configuration.
Although this is not your responsibility, you have the potential to resolve the issue by:
- Go to your Netlify account
- Locate the project you want to modify and select it
- Click
Deploy>Deploy Settings - Update the "Publish directory" field with the location of your HTML files.
| <input type="text" id="subject" /> | ||
| <label for="message">Message</label> | ||
| <input type="text" id="message" /> | ||
| <button class="btn-card submit-btn align-self-center">Submit</button> |
There was a problem hiding this comment.
Great use of labels for semantic HTML! It enhances accessibility and improves user experience @fikretellek Well done!
| <a class="nav-links" href="./projects.html">PROJECTS</a> | ||
| <a class="nav-links" href="./contacts.html">CONTACT</a> | ||
| </nav> | ||
| </aside> |
There was a problem hiding this comment.
Great job on creating a sidebar navigation! To further enhance the structure and semantics of your code, you can consider using an unordered list ul with list items li instead of individual anchor (a) tags. This approach provides a more standardised and accessible way of representing a navigation menu. Like:
<aside class="sidebar">
<nav class="menu-nav">
<ul>
<li><a class="nav-links" href="./index.html">ABOUT ME</a></li>
//other links
| sans-serif; | ||
| --gap: 13px; | ||
| --shd: -11.31px 11.31px 17px 0px rgba(138, 131, 124, 0.23); | ||
| } |
There was a problem hiding this comment.
An excellent approach to utilising CSS variables!
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
There was a problem hiding this comment.
Again, great job on implementing a CSS reset! Utilising the code snippet you provided is a standard and widely accepted practice in CSS-only projects!
| object-fit: cover; | ||
| } | ||
|
|
||
| @media screen and (min-width: 540px) { |
There was a problem hiding this comment.
Great use of media queries to create responsive design! However, using multiple media queries in this case might not be necessary since the styles applied in each media query are the same. Consolidating the media queries into a single one can indeed simplify the code and make it more concise.
| <a class="nav-links" href="./resume.html">RESUME</a> | ||
| <a class="nav-links" href="./projects.html">PROJECTS</a> | ||
| <a class="nav-links" href="./contacts.html">CONTACT</a> | ||
| </nav> |
Learners, PR Template
Self checklist
Changelist
I have created portfolio page. started from mobile and then added desktop media query at 540px width
Questions
Ask any questions you have for your reviewer.