<script defer src="js/fontawesome-all.js"></script>
Nie blokuj renderowania.
Można wydajniej np : po przez CDN.
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,700,700i,900"
Czy faktycznie używasz tych wszstkich font-weight?
<header class="page_header">
<div class="container navigation_wrapper">
Brak jasnej struktury CSS.
container navigation_wrapper
Czym się różni navigation od wraper?
<div class="nav_wrapper">
<div class="logo">
<img src="img/logo.png" alt="page logo">
<span class="logo_text">Treehouse</span>
</div>
<button type="button" class="hamburger">
<span class="fas fa-bars open_icon"></span>
<span class="fas fa-times close_icon"></span>
</button>
</div>
Lepiej tu pasuje aside.
<img src="img/logo.png" alt="page logo">
Brak atrybutów width/height
class="nav_wrapper
Czym się różni navigation_wrapper od nav_wraper?
<h1 class="title">Creative Digital<br>Solutions<br>
Br to nie najlepszy pomysł.
<section class="top_section">
<div class="section_wrapper">
<h1 class="title">Creative Digital<br>Solutions<br>
<span class="sub_title">Proin iaculis purus consequat sem cure.</span>
</h1>
<a href="#porfolio_section" class="button">View Portfolio</a>
</div>
</section>
Raz robisz na 4 raz robisz na 2.
<p>
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.
</p>
Czy ten blok niesie sens paragrafu?
<h2 class="title_section">latest project<br>
<span class="sub_title">Proin iaculis purus consequat sem cure</span>
</h2>
Nie lepszy hgroup?
http://html5doctor.com/the-hgroup-element/
nav.addEventListener('click', function(){
document.querySelector('.page_header').classList.toggle('nav_opened');
})
Lpeiej użyć arrow_function jest ładniejsze.
.container {
width: 100%;
max-width: 940px;
margin: 0 auto;
}
Można bez width. container jest elementem blokowym.
p,h1,h2,h3 {
margin: 0;
padding: 0;
}
łatwiej użyć * bądż normalize albo reset. Zależy co prefeujesz.
font-size: 20px;
Unikaj stałych wartośći . Przez to czcionka może być za mała dla large-desktop.
padding: 10px 10px
można krócej. padding: 10px;
.nav .navigation_list{
text-align: center;
width: 100%;
display: none;
Martwa reguła display: none
Sporo kodu się powtarza CSS, lepiej wyznaczyć jedne konkretne reguły dla containerów.
