Static site - Jackie #42
Conversation
…ted css file and put in initial styling
Static SiteWhat We're Looking For
|
There was a problem hiding this comment.
I really like the overall styling, layout, and design of your site. The html is well-organized, clean, and makes really good use of semantics -- your <section> & <article> element nesting makes for really organized & parseable code. There are a bunch of really nice advanced touches, both with your styling/layout decisions and in your code style.
There are some opportunities to DRY out the CSS. After finalizing styles, you may want to review the CSS file looking for places with duplicate styling -- especially look for where you can share styles across pages using a common class, then add additional classes/IDs to a given element (or use pseudo-classes/pseudo-elements) to modify it further. You could also use a main css file to define styles that will be used across the site, then use individual css files per page for styles used only on that page -- and link both the main and individual stylesheet for a given page in its <head>. This can make the CSS easier to read and maintain.
Awesome site overall! Glad I got the opportunity to see it. 👍
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="styles/main.css"> | ||
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> | ||
| <link href="styles/normalize.css" rel="stylesheet"> |
There was a problem hiding this comment.
It looks like this normalize stylesheet is overriding some of your styling (like cool fonts) -- is that intended?
If not (that is, if you want your styles to apply after the normalizing), you can move your main.css stylesheet below the normalize.css sheet in the <head> section and that should resolve.
| <li><a href="portfolio.html">Code.Folio</a></li> | ||
| <li><a href="code-journal.html">Code.Journal</a></li> | ||
| <li><a href="http://jackiewatanabe.com">Past.life</a></li> | ||
| <li><a id="current-page" href="about.html">About.me</a></li> |
There was a problem hiding this comment.
Nice touch using styles to signify the current page in nav.
| @@ -0,0 +1,416 @@ | |||
| @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Loved+by+the+King|Oswald|Lobster+Two|Quicksand|Roboto'); | |||
There was a problem hiding this comment.
Looks like there are a couple fonts here that don't get used -- you could remove them when your design is finalized, to speed up page load time a bit.
| } | ||
|
|
||
| header h2 { | ||
| font-family: 'Lobster Two'; cursive; |
There was a problem hiding this comment.
Typo in font list? Your other font lists use commas, but looks like this one got a semicolon, so the browser isn't picking up the fall-back option after the semicolon.
|
|
||
| main { | ||
| min-height: 700px; | ||
| } |
There was a problem hiding this comment.
I think you have two blocks for a main selector -- could combine them.
| border-color: black; | ||
| } | ||
|
|
||
| .page-posts article:last-of-type { |
| header { | ||
| background-color: #D0DD97; | ||
| position: fixed; | ||
| opacity: .5; |
There was a problem hiding this comment.
I love your header -- the opacity on fixed element is really cool!
| header nav a { | ||
| text-decoration: none; | ||
| color: white; | ||
| text-transform: lowercase; |
| padding-bottom: 0px; | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
There was a problem hiding this comment.
Your #intro-text / #second-section / #third-section and #intro-title / #second-section-title / #third-section-title have a good number of property declarations in common. These could be a great place to use a shared class (ie .main-section / .main-title) to contain the shared properties, and include additional classes/IDs on any specific element for its additional styles.
| @@ -0,0 +1,2337 @@ | |||
| /*! | |||
There was a problem hiding this comment.
Ideally you'd only want to include files in your final product that are used by it, to reduce storage needs and/or increase load times. This can be tough when pulling in external libraries like FontAwesome, but you could remove extra jpgs that you didn't end up using.
One alternate option for FontAwesome would be to use a CDN (Content Delivery Network) for FontAwesome -- this would work more like Google Fonts, where you link to a URL instead of adding its files to your project -- the URL gives you access to any FontAwesome elements you might need. There can be a tradeoff with load speed, though, so it might not be the right choice for every case. Also you have to give them your email address, so 🤷♀️
Static Site
Congratulations! You're submitting your assignment!
Comprehension Questions