first draft personal portfolio #91
Conversation
There was a problem hiding this comment.
Your site looks really cool.
Love all the color! Those gradients have a great vibe! Structurally, try to look for more opportunities to use semantically relevant tags, especially for the project requirements. It can also be helpful to split up our style rules into multiple files so that we don't have to worry about so many rules potentially affecting our markup. And make sure that your tags are valid tags (use those HTML validators). Browsers will try to ignore invalid tags, but it's hard to predict how any particular browser will handle them (or its affect on styling).
But overall, looks good.
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap" rel="stylesheet"> |
There was a problem hiding this comment.
Consider using the @import directive style of font importing, which can be placed in a css file rather than the html.
| <nav> | ||
| <header> |
There was a problem hiding this comment.
Consider reversing these tags so that header contains nav. Currently, this implies the contents are the header of the nav, rather than being the header of the page which happens to contain a nav.
| <body class="index-background"> | ||
| <nav> | ||
| <header> | ||
| <h1>Tyrah Gullette</h1> |
There was a problem hiding this comment.
You have 2 h1s on the page, which cause a validation warning. It's recommended to have only a single h1 on the page.
| </nav> | ||
|
|
||
| <div> | ||
| <div><h1>Tyrah Gullette</h1></div> |
There was a problem hiding this comment.
Here's the other h1, which for me at least ends up behind the nav header. Consider removing this, and using styling to push down the content to be below the header area.
| </header> | ||
| </nav> | ||
|
|
||
| <div> |
There was a problem hiding this comment.
Consider using a main tag to indicate where the main content of the page is. There was a project requirement to use header, main, and footer on your pages.
| <div class="grid-container"> | ||
| <div class="project-1"><h2><a href="https://github.com/ada-c17/task-list-api">Task List</a></h2></div> | ||
| <div class="project-2"><h2><a href="https://github.com/ursaturnine/swap-meet">Swap Meet</a></h2></div> | ||
| <div class="project-3"><h2><a href="https://github.com/ursaturnine/tyrah-and-san-solar-system-api">Solar System Api</a></h2></div> | ||
| <div class="project-4"><h2><a href="https://github.com/ursaturnine/viewing-party">Viewing Party</a></h2></div> | ||
|
|
||
| </div> |
There was a problem hiding this comment.
If you would like to use headings for each of the project names, consider using a section as the wrapping element rather than a div. But generally, heading tags should be considered as headings on the page (with associated content). To me, this feels like ti could be more semantically expressed as a list. Styling would be able to make it visually appear the same way.
|
|
||
| .div-photo { | ||
| float: right; | ||
| shape-outside: circle(); |
There was a problem hiding this comment.
Cool way to make the surrounding text wrap to the rounded shape of the images.
| } | ||
|
|
||
| .index-background { | ||
| background-image: radial-gradient(circle, purple,pink, hotpink, magenta,lavender,indigo,violet); |
There was a problem hiding this comment.
Love all the cool gradients you used!
| .index-background { | ||
| background-image: radial-gradient(circle, purple,pink, hotpink, magenta,lavender,indigo,violet); | ||
| scrollbar-width: thin; | ||
| scrollbar-color: var(--thumbBG) var(--scrollbarBG); |
There was a problem hiding this comment.
I don't think this actually has any effect since these variables need to be assigned before they can be used.
| transform: scale(10); | ||
| } | ||
|
|
||
| .portfolio-background { |
There was a problem hiding this comment.
Consider using the styles.css file as a place to put rules that are shared across all your pages, and then make individual css files for each page to add in the style rules specific to that page.
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions