NW6 | Bakhat Begum | HTML-CSS | HTML-CSS-Module-Project | Week 1 #644
Conversation
✅ Deploy Preview for cyf-module-project-html-css ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
@BakhatBegum it's important & very good practice to fill out the PR (Pull Request) template completely.
I added some comments to your codebase, which I think could be helpful for your continued improvement. Great job! Keep up the good work!
| p { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } |
There was a problem hiding this comment.
Let's take a look at the styles here. You'll notice that they are exactly the same. Instead of repeating yourself, you can optimise your code by selecting both the h1 and p elements and applying the desired styling together. This approach is called DRY code, which stands for "Don't Repeat Yourself." It helps you keep your code simple, clear, and efficient. By following this practice, you can avoid unnecessary repetition, make your code easier to maintain, and achieve a more streamlined solution.
h1 ,p {
margin-top: 0;
margin-bottom: 0;
}
|
|
||
| .nav__link:hover { | ||
| color: orange; | ||
| } |
There was a problem hiding this comment.
It's great to see the implementation of the hover effect. This small addition enhances the user experience by providing a visual response. Well done!
css/style.css
Outdated
| /*Button*/ | ||
|
|
||
| button { | ||
| padding: 1rem 1rem 1rem 1rem; |
There was a problem hiding this comment.
The concept of DRY code applies to the padding declaration as well. Instead of repeating "1rem" four times, you can simplify it by using the shorthand notation: padding: 1rem;. This approach achieves the same result and improves code readability.
css/style.css
Outdated
| width: 93.9%; | ||
| height: 38rem; | ||
| background-color: var(--grey-light); | ||
| padding-left: 79px; |
There was a problem hiding this comment.
While the choice of numeric values like "93.9%", "38rem", and "79px" may seem unconventional, it's great to see your innovative approach to experimenting with different measurements. However, for code simplicity and clarity, I would suggest considering more standard and easily understandable values.
| src="img/karma-logo.svg" | ||
| alt="it is used for website" | ||
| class="header__logo" | ||
| /> |
There was a problem hiding this comment.
While it is not mandatory, considering the user experience, it is worth noting that the majority of webpages include a link to the home page within their logos.
When developing your future applications, you may want to take this into consideration as it can enhance the overall user experience and improve navigation.
| class="img__footer" | ||
| src="img/instagram-icon.svg" | ||
| alt="you can visit" | ||
| /> |
There was a problem hiding this comment.
Just like your navigation bar, it would be beneficial to consider adding links to the social icons.
|
Hi Musayuksel, thank you very mcuh. It is really helpful. I worked on these points in week 2 HTML-CSS-Module project because we still working on this project. |
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
Just some parts of HTML
Figure caption
I need to practice more in Grid.
No thanks