Zakoduj własną stronę internetową

czy kiedykolwiek chciałeś nauczyć się projektowania stron internetowych lub tworzenia witryny w Internecie? Dzisiaj pokażemy Ci, jak zbudować własną stronę internetową! Obejrzyj film instruktażowy, w którym instruktorka Juni, Maya, przeprowadzi cię przez każdy krok.

Czytaj dalej, aby uzyskać więcej informacji na temat znaczenia nauki tworzenia stron internetowych, przewodnik krok po kroku dołączony do filmu oraz aby dowiedzieć się o narzędziach, których możesz użyć, aby jeszcze bardziej poprawić swoje wrażenia z tworzenia stron internetowych.

pamiętaj:

  • strona w tym tutorialu jest tylko przykładowym projektem do celów dydaktycznych. Przed rozpoczęciem należy pamiętać, że osoby niepełnoletnie nie powinny publikować danych osobowych w Internecie, takich jak imię i nazwisko, adres lub numer telefonu! Należy również zachować ostrożność podczas przesyłania osobistych zdjęć online.
  • jeśli nie masz pewności, co można przesłać, zawsze skontaktuj się z osobą dorosłą.

dla kogo to?

 efekty uczenia się dla początkujących kodowanie HTML/CSS projekt Personal Website.
informacje o projekcie i podsumowanie efektów uczenia się pomogą Ci zdecydować, czy ten projekt kodowania HTML/CSS jest właśnie dla ciebie.

ten projekt należy do Naszej Klasy kodowania JavaScript Level 1 dla dzieci. Ten początkujący HTML / CSS tutorial jest dla studentów, którzy chcą średni projekt wyzwanie, około 121 linii kodu długo. Pomoże to uzyskać podstawowe zrozumienie tego, jak HTML i CSS działają wcześniej, ale jeśli jesteś zupełnie nowy, wyjaśnimy również więcej podstaw w tym filmie!

ten poradnik jest świetny dla początkujących w kodowaniu, zwłaszcza tych, którzy interesują się projektowaniem lub sztuką. Zalecamy, aby uczniowie mieli co najmniej 12 lat.

jeśli chodzi o efekty uczenia się, będziesz miał dużo doświadczenia z div, listami, linkami, pozycją, wyświetlaczem, tekstem (h1/h2/p), czcionkami i ogólnym CSS. Szacuje się, że ten projekt zajmie ci około 40 minut lub dłużej, w zależności od tego, jak bardzo jesteś kreatywny, ale powinieneś poruszać się szybciej lub wolniej we własnym tempie!

Dlaczego Warto Uczyć Się Tworzenia Stron Internetowych?

w dzisiejszych czasach nie musisz znać się na tworzeniu stron internetowych ani kodowaniu, aby stworzyć stronę internetową. Pod koniec tego artykułu pokażemy Ci kilku twórców witryn typu „przeciągnij i upuść”, którzy sprawią, że proces będzie niezwykle łatwy do wykonania. Dlaczego warto więc uczyć się tworzenia stron internetowych? Świetne pytanie.

nieograniczone dostosowywanie

Wszystkie łatwe narzędzia do tworzenia stron internetowych są w rzeczywistości ograniczone. Oferują zestaw motywów i wtyczek, które są bardzo łatwe w użyciu dla początkujących – o ile nie musisz ich modyfikować.

kiedy jednak musisz zmodyfikować motyw lub zrobić coś bardziej niestandardowego ze swoją witryną, będziesz potrzebował przynajmniej podstawowej wiedzy na temat kodu tworzenia stron internetowych. Jako przykład, z odrobiną wiedzy o Javascript, możesz zintegrować prawie każdy kanał mediów społecznościowych ze swoją witryną!

Kariera w kodowaniu & Fundacje

jeśli kiedykolwiek myślałeś o karierze w kodowaniu, projektowaniu stron internetowych i tworzeniu stron internetowych, wiedza również zapewni Ci ogromną przewagę. Tworzenie stron internetowych pomaga dzieciom i nowym programistom zainteresowanym sztuką i designem odkrywać swoją pasję, jednocześnie ucząc się podstaw kodowania. Poza karierą, istnieją również niezliczone korzyści z umiejętności życiowych w nauce kodowania dla dzieci.

zastosowanie w wielu dziedzinach

wreszcie, możliwość zbudowania własnej strony internetowej jest cenną umiejętnością w dzisiejszej erze cyfrowej. Blogerzy chcą, aby Programiści tworzyli własne blogi. Firmy internetowe szukają programistów do budowy witryn e-commerce zamiast tylko publikować artykuły na Amazon.

to złoty wiek projektowania i rozwoju stron internetowych i świetny czas, aby nauczyć się budować własną stronę!

zaczynajmy!

użyjemy podstawowego HTML i CSS, aby dowiedzieć się, jak zrobić prostą osobistą stronę internetową.

demo projektu

zanim zaczniesz pisać kod, zobacz, jak działa nasz gotowy projekt. Obejrzyj film, aby zapoznać się ze wszystkimi funkcjami naszej strony internetowej.

możesz również zobaczyć nasz kod rozwiązania projektu, jeśli utkniesz.

o czym należy pamiętać przed rozpoczęciem:

  • jest nagłówek obrazu z tekstem. Tekst ma różne rozmiary i używa dwóch różnych czcionek. Ma również biały zarys.
  • Biała sekcja poniżej ma dwie części obok siebie.
  • mamy listę hiperłączy, które prowadzą do innej strony. Po najechaniu na nie zmienią się na niebieskie.
  • jest też dział o mnie z tekstem.
  • Poniżej znajduje się sekcja doświadczenia z innym kolorem tła.

kroki do zakodowania projektu

aby zbudować naszą stronę internetową, wykonamy tę kolejność kroków. Obejrzyj samouczek, aby zobaczyć, jak instruktor Maya koduje każdą część i postępuj zgodnie z poniższymi wyjaśnieniami.

  1. Dodaj nagłówek obrazu & tekst, który się na nim znajduje.
  2. Utwórz listę linków, które chcesz udostępnić.
  3. Utwórz sekcję O mnie.
  4. Utwórz sekcję doświadczenia.

samouczek krok po kroku

Krok 1: Dodaj nagłówek obrazu & tekst, który się na nim znajduje.

  • Utwórz div z pozycjonowaniem względnym, aby zawierał obraz i tekst.
  • Utwórz div zawierający tekst i użyj bezwzględnego pozycjonowania, aby umieścić go na obrazie.
  • użyj <h1> i <h3>, aby dodać tekst.
  • użyj CSS, aby zmodyfikować czcionkę tekstu.
  • użyj CSS, aby usunąć dodatkowy margines & wypełnienia wokół obrazu.

Krok 2: Utwórz listę linków, które chcesz udostępnić.

  • Utwórz div z względnym pozycjonowaniem, aby zawierał linki i sekcję O mnie.
  • Dodaj padding do div.
  • Utwórz div z wbudowanym wyświetlaczem bloków, aby zawierał listę linków.
  • użyj <ul>, aby utworzyć listę.
  • użyj <li> i <a>, aby utworzyć linki.
  • użyj <i> i Font-awesome link, aby dodać ikony.
  • zmodyfikuj CSS, aby wyglądał jak oryginał.

Krok 3: Utwórz sekcję O mnie.

  • Utwórz div z wyświetlaczem inline-block, aby zawierał sekcję O mnie.
  • użyj <h3> i <p>, aby dodać tekst.

Krok 4: Utwórz sekcję doświadczenia.

  • Utwórz div z pozycjonowaniem względnym, aby zawierał sekcję doświadczenia.
  • Utwórz div dla pierwszego doświadczenia i użyj <h4> i <p>, aby dodać tekst.
  • Dodaj więcej doświadczonych div!

kolejne kroki

Świetna robota! Teraz możesz dodać więcej sekcji do swojej witryny. Niektóre pomysły mogą zawierać sekcję dotyczącą projektów, nad którymi pracowałeś lub klubów, w których jesteś. Możesz również przesłać swoją nową stronę do sieci za pomocą Github i Github pages.

narzędzia do tworzenia stron internetowych

kilka osób korzysta z narzędzia do tworzenia stron internetowych, aby zbudować stronę internetową

jak wspomnieliśmy wcześniej, istnieje kilku twórców stron internetowych. Większość najlepszych kreatorów stron internetowych została stworzona, aby usprawnić proces, zapewniając szablony, interfejsy typu „przeciągnij i upuść” i wszelkie inne funkcje potrzebne do utworzenia bezpłatnej osobistej strony internetowej.

to, że masz podstawową wiedzę na temat tworzenia stron internetowych, nie oznacza, że powinieneś zapomnieć o tych narzędziach. Mogą pomóc w hostowaniu nowej witryny, znalezieniu niestandardowej domeny (nazwy i adresu witryny) oraz zaoferowaniu szablonów, motywów i wtyczek, które przyspieszą proces projektowania stron internetowych.

dbając o podstawy, te narzędzia dają możliwość skupienia się na nowo odkrytych umiejętnościach kodowania na dostosowaniu witryny do perfekcji! Lub-nawet jeśli chcesz zbudować wszystko od zera-te narzędzia mogą dać ci kilka świetnych pomysłów na to, co zbudować i jak to zbudować.

oto niektóre z najpopularniejszych narzędzi do tworzenia stron internetowych:

  • Wix

Wix jest jednym z najłatwiejszych w użyciu kreatorów stron internetowych. Ich bezpłatny plan jest na tyle kompletny, że jest to świetna opcja dla kreatora stron dla dzieci, o ile nie masz nic przeciwko, aby twój adres URL był subdomeną Wix (sitename.wixsite.com). mają płatne plany z rozsądnymi cenami, jeśli wyrosniesz z darmowej warstwy.

  • WordPress

chociaż ludzie znają go jako darmowy kreator stron internetowych, tym, czym WordPress tak naprawdę jest system zarządzania treścią (CMS). W prostym sensie różnica polega na tym, że Kreator stron internetowych jest łatwiejszy w użyciu, ale CMS oferuje więcej możliwości dostosowywania. Chociaż sam WordPress jest darmowy, być może będziesz musiał zapłacić za niektóre motywy i wtyczki lub za hosting, jeśli chcesz mieć własną nazwę domeny.

  • Weebly

Weebly jest kreatorem stron internetowych, podobnie jak Wix. Podstawową różnicą jest to, że Weebly oferuje znacznie mniej możliwości dostosowywania, co czyni go przyjazną dla użytkownika opcją, która świetnie nadaje się do kodowania dla dzieci, ale rzadziej rośnie wraz z Tobą w miarę poprawy umiejętności budowania witryny.Ucz się dalej: Zajęcia z tworzenia stron internetowych Dla Dzieci, teraz masz własną stronę internetową! Jest to ekscytujący krok, z którego powinieneś czuć się niesamowicie dumny. Na tym też nauka nie musi się kończyć.

kontynuuj naukę: kursy tworzenia stron internetowych Dla Dzieci

Juni Learning oferuje kursy programowania dla dzieci, które dadzą ci umiejętności potrzebne do doładowania nowej witryny, a nawet do tworzenia aplikacji internetowych i portfolio. Oprócz tworzenia stron internetowych prowadzimy również kursy kodowania dla dzieci w wieku 8-18 lat w różnych językach, takich jak Scratch, Python, Java, C++ i inne.

sprawdź nasze kursy online dla dzieci lub skontaktuj się z zespołem doradców Juni, aby dowiedzieć się, który kurs jest najlepszy dla Twojego ucznia!

Articles

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.