Tak na szybko bo już późna pora :)
- brak RWD, poczytaj sobie o tym zagadnieniu w necie.
- nie styluj inline w html - od tego są css. Styli inline praktycznie nie nadpiszesz potem w css.
- Dzisiaj już się raczej odchodzi od stosowania reset.css Nie jest to potrzebne jeśli zaczniesz o stronie myśleć nie jak o całości ale jak o pojedynczych komponentach. Nawet tak niegdyś popularne box-sizing wcale nie jest konieczne aby dla całej strony ustawiać border-box. W ten sposób, czyli myśląc o komponentach a nie o jednym monolicie i rezygnując z resetu css masz elementy, które możesz potem reużywac w innych projektach.
- staraj się unikać PX w css. Lepiej stosuj rem/em, vh/vw. Poczytaj sobie w necie na temat jednostek css i tematyka rem na różnych urządzeniach itp.
- ".percentbargrey" unikaj takich nazw klas. A co jeśli za chwilę stwierdzisz, że lepszy byłby nie kolor szary ale czerwony? Wypadało by wtedy zmienić nazwę klasy, jej style css no i oczywiście nazwy klas w html :) Nazwą klasy lepiej informować co to za element itp. np. normal-percent-bar czyli jakiś 'normalny' pasek, potem mógłby być "warning-" itp. A to jakie ma kolory nie jest w html istotne, w css natomiast dowoli sobie zmieniasz i nadal sens nazw klas zostaje i unikasz sytuacji, że w nazwie klasy masz "grey" a w css walisz "red" :)
- Nazewnictwo kolorów raz robisz słowne, raz hex itp. Nie jest to błąd i strona działa oki, ale ja bym raczej wybrał jeden sposób, np. hex albo rgb, słownych kolorów raczej unikam ale to już moja subiektywna opinia. Polecam tylko stosować po prostu jednolity styl.
- zapis "padding: 5px 10px 5px 10px;" można uprościć do "padding: 5px 10px" (top-bottom right-left). Twój zapis nie jest błędny, ale wg mnie stosując dwie wartości od razu analizując kod widzisz co i jak, a w Twojej wersji nieco dłużej musisz analizować i myśleć nad tym co jest po kolei.
- "font-weight: normal;" ja jestem raczej zwolennikiem podawania konkretnych wartości, 100, 300, 700 w nawiązaniu do ustawień pobranych czcionek. Zapis słowny jest oki, ale mi się wygodniej pracuje z wartościami liczbowymi - jest to jednak ponownie kwestia indywidualna.
- Robisz klasę .break z właściwością display:none i potem w regule @media powielasz identyczny zapis. Ja bym to pominął, osobiście staram się w @media pisać tylko te reguły, które ulegają zmianie. Nawet jeśli miałoby być powielanie (co wydaje mi się niezbyt sensowne) to albo wszystkich reguł albo żadnych. Takie powielanie wyrywkowe może doprowadzić Cię do zamętu gdy za jakiś czas zerkniesz w kod i będziesz się zastanawiać dlaczego to tu jest i czy na pewno powinno być to takie samo? Teraz jest tylko display:none, ale w większych projektach tych reguł będzie czasem więcej.
- Wykorzystujesz gdzieś obrazek Test2.png? Nie widzę go w kodzie, a jest w folderze img i to z nazwą sugerującą coś testowego. Polecam tego typu rzeczy wywalać bo gdy projekt się rozrośnie to łatwo się pogubić co faktycznie jest potrzebne, a co jest tylko do jakiś testów.
- Coś mi nie pasuje z tymi nagłówkami, powtarzasz H1 itp. Nie jestem akurat mocny w semantyce html więc tutaj się nie wypowiem - poszukaj sobie w necie artykułów Comandeer (Tomek Jakut), pisał jakiś czas temu obszerny art o tym jak i o wielu innych tematach html (dostępność, ikonki itp. - sam muszę kiedyś porządnie do tego usiąść bo czasami się łapię na lenistwie i "divowaniu" :)
Pozdrawiam i powodzenia w nauce :)