Completed the first project #53
Conversation
There was a problem hiding this comment.
Hi Michelle,
Really good job! I appreciate the effort you put on the design of your website and that you tried multiple things to make it work. However, I put some comments here and there, for improvement.
One more here: I think you could improve the naming of your classes, because they are a bit confusing: first-heading, second-heading, main-subheading, sub-heading, intro-heading, intro-subheading...
I read that you used different colored borders in CSS to visualize all the elements, it's a very good idea. In fact, there's a trick used by many, it's to add at the beginning of your css this piece of code (and remove it of course eventually!):
* {
outline: 1px solid red;
}
Everything will then by outlined in red, which helps a lot to debug your css 😄
Nice work, it will be great with the "about me" page completed 👍
| <!-- | ||
| Write your code here inside the body to make it appear in the browser. | ||
| Below is an example on how to use an image tag. Copy it and add it in the body, but outside the comment tag if you want to see how it looks like on the website. Then you can change the size and other styling for it in the css file. | ||
| <menu> |
There was a problem hiding this comment.
nav tag would be more semantically suitable here, since menu usually contains an unordered list of items (ul tag)
| } | ||
|
|
||
| h1 { | ||
| color: rgb(0, 0, 0); |
There was a problem hiding this comment.
Black is default color for text, so it's better to avoid unnecessary code.
| <h1 class="first-heading">Michelle Tamar</h1> | ||
| <h1 class="second-heading">Suchowolski</h1> |
There was a problem hiding this comment.
There should be only one h1 per page, so it would be more suitable to have:
<h1 class="first-heading">Michelle Tamar
<br>
Suchowolski
</h1>
(<br> is a line-break)
| color: rgb(0, 0, 0); | ||
| font-size: 100px; | ||
| font-family: 'Epilogue', sans-serif; | ||
|
|
There was a problem hiding this comment.
If you add text-align: center; on this empty line and... (see next comment)
| .first-heading { | ||
| color:rgb(0, 0, 0); | ||
| font-size: 100px; | ||
| font-family: 'Epilogue', sans-serif; | ||
| text-align: center; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .second-heading { | ||
| color:rgb(0, 0, 0); | ||
| font-size: 100px; | ||
| font-family: 'Epilogue', sans-serif; | ||
| text-align: center; | ||
| margin: 0; | ||
| padding-top: 10px; | ||
| } |
There was a problem hiding this comment.
... remove all this block of code, you would get the same result but with a more DRY code (DRY means don't repeat yourself, which is a mindset we need to have when coding).
(given that you followed as well my advice on having only one h1 tag)
| } | ||
|
|
||
| h2 { | ||
| color: rgb(0, 0, 0); |
There was a problem hiding this comment.
Same here for black text, you can remove this line 👍 You can apply this to your whole css, I see many times you specified it should be black, when it's already black by default 😉
| margin-right: 200px; | ||
| margin-left: 200px; | ||
| margin-top: 100px; |
There was a problem hiding this comment.
| margin-right: 200px; | |
| margin-left: 200px; | |
| margin-top: 100px; | |
| margin: 100px 200px 0 200px; |
|
|
||
| <div class="tiktok"> | ||
| <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@michelletamar/video/7120907815450938630" data-video-id="7120907815450938630" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@michelletamar" href="https://www.tiktok.com/@michelletamar?refer=embed">@michelletamar</a> outfits of the week 💘 all fits coming to my vintage shop tomorrow 6pm cet! <a title="outfitinspo" target="_blank" href="https://www.tiktok.com/tag/outfitinspo?refer=embed">#outfitinspo</a> <a title="ootw" target="_blank" href="https://www.tiktok.com/tag/ootw?refer=embed">#ootw</a> <a title="thriftedfits" target="_blank" href="https://www.tiktok.com/tag/thriftedfits?refer=embed">#thriftedfits</a> <a title="y2kfashion" target="_blank" href="https://www.tiktok.com/tag/y2kfashion?refer=embed">#y2kfashion</a> <a title="whatiworethisweek" target="_blank" href="https://www.tiktok.com/tag/whatiworethisweek?refer=embed">#whatiworethisweek</a> <a title="vintage" target="_blank" href="https://www.tiktok.com/tag/vintage?refer=embed">#vintage</a> <a target="_blank" title="♬ original sound - michelle" href="https://www.tiktok.com/music/original-sound-7120907806701636358?refer=embed">♬ original sound - michelle</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script> | ||
| </div> |
There was a problem hiding this comment.
Nice that you embedded this video 🔥
| <!-- | ||
| Write your code here inside the body to make it appear in the browser. | ||
| Below is an example on how to use an image tag. Copy it and add it in the body, but outside the comment tag if you want to see how it looks like on the website. Then you can change the size and other styling for it in the css file. | ||
|
|
||
| <img src="example-recipe-background.png" alt="Banana Bread"> | ||
|
|
||
| --> | ||
|
|
There was a problem hiding this comment.
You can removed all this commented out code and the empty lines.
|
|
||
| .main-subheading:hover { | ||
| background: rgb(255, 0, 230); | ||
| color: rgb(240, 148, 219); |
There was a problem hiding this comment.
This line is not applied (text doesn't become pink on hover) because of the color: rgb(0, 0, 0); line under h2 and .sub-heading (so you should remove these lines setting the color black for text).
I created my first website, which is a portfolio of sorts.
I didn't have time to finish it properly, there was a lot more I wanted to add (social favicons on the footer, finish the about me page, add more videos, finish the design..)
I struggled at the beginning with having the elements display below each other and also to see where they were positioned. What really helped me was to create different colored borders in CSS for each element so I could visualize exactly what space each element was taking. Then, I played around with inline-block and flex until it worked how I wanted.