Otters - Natalya Z #88
Conversation
There was a problem hiding this comment.
Hi Natalya! Your submission has been scored as green. Your portfolio was so vibrant and fun to go through! Your code was beautifully organized and you did a great job using semantic HTML tags. You can find my comments in your code. Let me know if you have any questions. ✨
| <link href="../styles/index.css" rel="stylesheet"> | ||
| <link href="../styles/style.css" rel="stylesheet"> | ||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Zen+Loop:ital@0;1&display=swap'); |
There was a problem hiding this comment.
I would recommend using the <link> tag instead of @import. Not sure if you made this decision because this is a 3rd party stylesheet, but it's valid to pass urls to the href attribute.
So you could simply do:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Zen+Loop:ital@0;1&display=swap" rel="stylesheet">
Here's a good discussion on why the <link> tag is preferred: https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css
| <h1 id="header-h1">Personal Portfolio</h1> | ||
| <h2 id="header-h2">Natalya Zakharova</h2> | ||
| </div> | ||
| <img id="avatar" src="../images/memoji-sticker.PNG" alt="memoji-sticker-of-me"> |
| <a class="nav-bar" href="../pages/portfolio.html">My Portfolio</a> | ||
| <a class="nav-bar" href="../pages/contact.html">Contact Me</a> | ||
| </nav> | ||
| <article> |
There was a problem hiding this comment.
Great usage of semantic HTML tags! 🥳
| </a> | ||
| </div> | ||
| <footer> | ||
| <h4>© Made by Natalya Z || 2022</h4> |
There was a problem hiding this comment.
Careful to only use <h1>-<h6> tags for actual section headers! They're used to automatically construct a table of contents.
You can read more about best practices here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes
| </div> | ||
| </div> | ||
| <div class="about-box img-show"> | ||
| <img src="../images/ka-iwi-hawaii.JPG" alt="lookout-on-ka-iwi-in-hawaii"> |
There was a problem hiding this comment.
Alt text should be written as a short sentence so you don't need the dashes. You can read more about alt text, why it's important, and best practices here: https://moz.com/learn/seo/alt-text
| } | ||
|
|
||
|
|
||
| .hidden-text { |
| <div> | ||
| <p class="project-description">The task of this project was to create an API with CRUD endpoints.</p> | ||
| <div class="technologies-skills"> | ||
| <div> |
There was a problem hiding this comment.
Try to avoid unnecessary <div> tags! They're great for grouping elements, but try to use more semantic tags when possible.
| <p>This is a final project for Code in Place course by Stanford</p> | ||
| <p>Technologies used: Python</p> | ||
| </div> | ||
| <aside> |
There was a problem hiding this comment.
This tag is just kinda floating here with no content. Make sure to clean up your code before calling it done! 🧼 🧹
| </div> | ||
| <aside> | ||
| </aside> | ||
| <iframe src="https://replit.com/@memermaid/snowmanproject?embed=true"></iframe> |
There was a problem hiding this comment.
Love your usage of iframes to embed your replits! 🤩
| } | ||
|
|
||
|
|
||
| .ada-projects-grid .flex-box{ |
There was a problem hiding this comment.
Great job with your descriptive class names! Your CSS files are super organized and easy to follow because of it. 🎉
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions
tag.