Karma Website#406
Conversation
jcholyhead
left a comment
jcholyhead
left a comment
There was a problem hiding this comment.
You've made a good attempt at following the designs given. In future consider how you can reuse the styles in your stylesheets rather than copy/pasting them into new css files. Don't forget to use semantic tags - every div you write, think "is there a better tag for this?".
| { | ||
| "liveServer.settings.port": 5501 | ||
| } No newline at end of file |
There was a problem hiding this comment.
Add a .gitignore file to your project so these files don't get committed to the repository. Imagine a team all committing different settings.json files and everytime you opened your IDE all of your settings were different.
| @@ -0,0 +1,142 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
you don't need to put the store files in a new directory. Having store.html in the same directory of index.html is normal practice.
| @@ -0,0 +1,248 @@ | |||
| /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ | |||
There was a problem hiding this comment.
This file belongs in the css directory alongside style.css.
In more complicated sites, you might use directories to organise files, but in a little project like this, keeping your structure simple is best.
| <div class="logo"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216"> | ||
| <path fill="#F15B2A" | ||
| d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z" /> | ||
| </svg> | ||
| </div> | ||
| <nav> | ||
| <ul> | ||
| <li><a href="" class="meet-karma">Meet Karma</a></li> | ||
| <li><a href="">How it Works</a></li> | ||
| <li><a href="">Store</a></li> | ||
| <li><a href="">Blog</a></li> | ||
| <li><a href="">Help</a></li> | ||
| <li><a href="">Login</a></li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
This is essentially the same as the design for the index.html page, but you have reimplemented it, slightly differently. There are techniques that you will be shown later in the course for how to reuse components within a page, but for the moment, you at least want to ensure that you are not duplicating things like styles. You could have imported the style.css file, and only used the store.css file for styles specific to this page.
2 participants
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?