- Podstawowe informacje
- Użyte technologie
- Link do projektu
- Treść strony
- Zrealizowane założenia projektu
- Przykłady realizacji założeń
- Testowane przeglądarki
- Pliki zewnętrzne
- Projekt w ramach : Coders Camp 2020
- Autor : Anna Szewczyk
- Mentor : Radosław Bajor
- Projekt polegał na stworzeniu responsywnej strony internetowej o dowlonej tematyce, w oparciu jedynie o technologie HTML5 i CSS3. Projekt przedstawia moją wizytówkę.
- HTML5
- CSS3
Projekt tworzony w Visual Studio Code Version 1.51.1.
Strona została podzielona 4 główne sekcje :
- O mnie
- Technologie
- Portfolio
- Kontakt
Poza wymienionymi sekcjami na stronie znajduje się pełnoekranowy header, menu nawigujace po stronie oraz stopka.
- Box-model
- Kaskadowość CSS
- Selektory CSS
- Popularne tagi HTML
- Podpinanie CSS'a do HTMLa
- Zapisywanie kolorów
- Stylowanie tekstu
- Zewnętrzne ikony/fonty
- Grid
- Flexbox
- Position (absolute, relative, sticky)
- Animacje keyframes
- Formularz
- Responsive Web Designe
-
Popularne tagi HTML min.:
<title><link>(podpięcie css, czcionki)<meta>(metadane)<img>(zdjęcia na stronie)<a>(linki na stronie)<h1>,<h3>(nagłówki)<div><span>,<strong>
-
Podpinanie CSS'a do HTMLa
- podpięcie w
<head><link rel="stylesheet" href="style.css">
- podpięcie w
-
Zapisywanie kolorów
- użycie np :
rgb( 192, 192, 192)#2980b9,#bbbcolor : white
- użycie np :
-
Stylowanie tekstu
- zmiana koloru tekstów, dodanie
<span>,<strong>etc.
- zmiana koloru tekstów, dodanie
-
Zewnętrzne fonty
-
Grid
- Sekcje O mnie, Technologie, Potrfolio, Kontakt i Formularz opracowane na gridzie. Użycie właściwości min:
.grid-container { display: grid; grid-template-areas: 'aboutMeT aboutMeT tech tech tech' 'gallery gallery gallery gallery gallery' 'contact form form form form'; }
- Sekcje O mnie, Technologie, Potrfolio, Kontakt i Formularz opracowane na gridzie. Użycie właściwości min:
-
Flexbox
- galeria projektów w Portfolio :
- galeria projektów w Portfolio :
-
Position (absolute, relative, sticky)
- menu nawigacyjne ustawione na sticky
- obracanie zdjęcia w Kontakt - relative, absolute
-
Animacje keyframes
- animowany napis w header
- animowany napis w header
-
Formularz
- Formularz w kontakt
- Formularz w kontakt
-
Responsive Web Design
- Cała strona płynnie się zwęża do mniejszych rozdzielczości, elementy wyglądają czytelnie, w wersji o niższych rozdzielczościach zdjęcia z galerii Projektów zamiast w dwóch wierszach pokazują się jeden pod drugim
-
Header
- desktop
- mobile
- desktop
-
Kontakt
- desktop
- mobile
- desktop
- Google Chrome Wersja 87.0.4280.88 (64-bitowa)
- Google Chrome Wersja 87.0.4280.101 (Android)
- Firefox Wersja: 84.0 (64 bity)
- Safari Wersja 13.0.4 (15608.4.9.1.3)
- Microsoft Edge Wersja 87.0.664.66 (wersja 64-bitowa)
- Wszelkie grafiki wyszukane w Google Graphics
- Font Karla z Google Fonts