# Stwórz stronę internetową z CV za pomocą vscode.dev _Jak fajnie byłoby, gdyby rekruter poprosił o Twoje CV, a Ty wysłałbyś mu link?_ 😎 ## Cele Po wykonaniu tego zadania nauczysz się: - Tworzyć stronę internetową prezentującą Twoje CV ### Wymagania wstępne 1. Konto na GitHub. Przejdź na [GitHub](https://github.com/) i załóż konto, jeśli jeszcze go nie masz. ## Kroki **Krok 1:** Utwórz nowe repozytorium na GitHub i nadaj mu nazwę `my-resume` **Krok 2:** Utwórz plik `index.html` w swoim repozytorium. Dodamy przynajmniej jeden plik bezpośrednio na github.com, ponieważ nie można otworzyć pustego repozytorium w vscode.dev. Kliknij link `creating a new file`, wpisz nazwę `index.html` i wybierz przycisk `Commit new file`. ![Utwórz nowy plik na github.com](../../../../8-code-editor/images/new-file-github.com.png) **Krok 3:** Otwórz [VSCode.dev](https://vscode.dev) i wybierz przycisk `Open Remote Repository`. Skopiuj adres URL repozytorium, które właśnie utworzyłeś dla swojej strony z CV, i wklej go w polu tekstowym: _Zamień `your-username` na swoją nazwę użytkownika na GitHub._ ``` https://github.com/your-username/my-resume ``` ✅ Jeśli wszystko się udało, zobaczysz swój projekt oraz plik index.html otwarty w edytorze tekstu w przeglądarce. ![Utwórz nowy plik](../../../../8-code-editor/images/project-on-vscode.dev.png) **Krok 4:** Otwórz plik `index.html`, wklej poniższy kod w obszarze kodu i zapisz.
Kod HTML odpowiedzialny za treść Twojej strony z CV. Twoje Imię i Nazwisko!

O MNIE

Wpisz kilka słów o sobie!

DOŚWIADCZENIE ZAWODOWE

Stanowisko

Nazwa organizacji | Miesiąc rozpoczęcia – Miesiąc zakończenia

  • Zadanie 1 - Opisz, co robiłeś!
  • Zadanie 2 - Opisz, co robiłeś!
  • Opisz rezultaty/efekty swojej pracy

Stanowisko 2

Nazwa organizacji | Miesiąc rozpoczęcia – Miesiąc zakończenia

  • Zadanie 1 - Opisz, co robiłeś!
  • Zadanie 2 - Opisz, co robiłeś!
  • Opisz rezultaty/efekty swojej pracy
Dodaj szczegóły swojego CV, zastępując _tekst zastępczy_ w kodzie HTML. **Krok 5:** Najedź na folder My-Resume, kliknij ikonę `New File ...` i utwórz 2 nowe pliki w swoim projekcie: `style.css` oraz `codeswing.json`. **Krok 6:** Otwórz plik `style.css`, wklej poniższy kod i zapisz.
Kod CSS do formatowania układu strony. body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; max-width: 960px; margin: auto; } h1 { font-size: 3em; letter-spacing: .6em; padding-top: 1em; padding-bottom: 1em; } h2 { font-size: 1.5em; padding-bottom: 1em; } h3 { font-size: 1em; padding-bottom: 1em; } main { display: grid; grid-template-columns: 40% 60%; margin-top: 3em; } header { text-align: center; margin: auto 2em; } section { margin: auto 1em 4em 2em; } i { margin-right: .5em; } p { margin: .2em auto } hr { border: none; background-color: lightgray; height: 1px; } h1, h2, h3 { font-weight: 100; margin-bottom: 0; } #mainLeft { border-right: 1px solid lightgray; }
**Krok 6:** Otwórz plik `codeswing.json`, wklej poniższy kod i zapisz. { "scripts": [], "styles": [] } **Krok 7:** Zainstaluj rozszerzenie `Codeswing`, aby zobaczyć stronę z CV w obszarze kodu. Kliknij ikonę _`Extensions`_ na pasku aktywności i wpisz Codeswing. Kliknij _niebieski przycisk instalacji_ na rozszerzonym pasku aktywności, aby zainstalować, lub użyj przycisku instalacji, który pojawi się w obszarze kodu po wybraniu rozszerzenia. Po zainstalowaniu rozszerzenia zobaczysz zmiany w swoim projekcie 😃 ![Zainstaluj rozszerzenia](../../../../8-code-editor/images/install-extension.gif) Tak będzie wyglądał Twój ekran po zainstalowaniu rozszerzenia. ![Rozszerzenie Codeswing w akcji](../../../../8-code-editor/images/after-codeswing-extension-pb.png) Jeśli jesteś zadowolony ze zmian, które wprowadziłeś, najedź na folder `Changes` i kliknij przycisk `+`, aby dodać zmiany. Wpisz wiadomość commit _(Opis zmiany, którą wprowadziłeś w projekcie)_ i zatwierdź zmiany, klikając `check`. Po zakończeniu pracy nad projektem wybierz ikonę menu hamburgera w lewym górnym rogu, aby wrócić do repozytorium na GitHub. Gratulacje 🎉 Właśnie stworzyłeś stronę internetową z CV za pomocą vscode.dev w kilku krokach. ## 🚀 Wyzwanie Otwórz zdalne repozytorium, w którym masz uprawnienia do wprowadzania zmian, i zaktualizuj kilka plików. Następnie spróbuj utworzyć nową gałąź ze swoimi zmianami i wykonaj Pull Request. ## Przegląd i samodzielna nauka Przeczytaj więcej o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) i jego innych funkcjach. **Zastrzeżenie**: Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.