HTML5, CSS, JavaScript, jQuery – Seria Web Developer – część 2

4.5 z 5
4.5
4 opinie

HTML5, CSS, JavaScript, jQuery Szybki Start dla .Net Core – Seria Web Developer część 2

Czego się nauczysz
   *  Poznasz podstawy HTML
   *  Poznasz podstawy CSS
   *  Poznasz podstawy JavaScript
   *  Poznasz podstawy jQuery

Wymagania

Chęć nauki i dobrej zabawy !!!

Dla kogo jest ten kurs

  • Początkujący twórca stron internetowych
  • Początkujący programista AspNet Core
  • Początkujący programiści AspNet Mvc

Opis

Witam w szybkim kursie tworzenia stron WWW dla początkujących z HTML5, CSS,  JavaScript i Jquery.

Jeśli zaczynasz ten kurs, to wiedz że nauczysz się pewnych umiejętności związanych z tworzeniem stron internetowych.  Ten kurs w szczególności pomoże Ci nauczyć się HTMLa,  stylizacji strony za pomocą CSSa,  a także obsługi kodu po stronie klienta za pomocą JavaScriptu i Jquery. Celem tego kursu nie jest nabycie kompletnej wiedzy, ale umożliwienie Ci w ciągu kilku godzin zrozumienia podstawowych pojęć HTML, CSS, JavaScript i Jquery.

Zamiast pokazywać wiele slajdów, skupimy się w większości na praktycznych przykładach. Przejdziemy przez prosty przykład strony internetowej i pokażemy, jak zbudować HTML, zmienić sposób, w jaki on wygląda za pomocą CSS, a następnie w końcu napisać kod do rzeczywistej interakcji z użytkownikiem oraz z żądaniami sieciowymi za pomocą JavaScriptu.

Dzięki poznaniu podstaw i ich wspólnej pracy możesz zacząć szybko działać. Podczas tego kursu zapoznam Cię z podstawami tworzenia stron WWW po stronie klienta, pokazując podstawy budowania stron internetowych za pomocą HTML, CSS, JavaScript i jQuery.

Seria Web Developer :
część 1:  Budowanie pierwszej aplikacji ASP.NET Core 2.1 MVC z Visual Studio 2017
część 2:  HTML5, CSS, JavaScript, jQuery Szybki Start dla .Net Core
część 3:  Budowanie aplikacji ASP.NET Core MVC Entity Framework Core, Bootstrap, i Angular

HTML5 wprowadził szereg nowych elementów strukturalnych, które mają na celu ułatwienie tworzenia bardziej semantycznych i dostępnych stron internetowych. Oto niektóre z podstawowych elementów struktury w HTML5 wraz z ich zastosowaniami:

<header>:
Zastosowanie: Reprezentuje nagłówek strony lub sekcji. Często zawiera tytuł, logo i elementy nawigacyjne.

<nav>:
Zastosowanie: Przeznaczony do zawierania głównych elementów nawigacyjnych strony, takich jak menu, linki do innych stron lub sekcji.

<section>:
Zastosowanie: Reprezentuje logicznie grupowaną sekcję zawartości, która zazwyczaj posiada własny nagłówek.

<article>:
Zastosowanie: Używany do określenia niezależnej, samodzielnej zawartości, takiej jak artykuł, post na blogu czy komentarz. Może być używany wewnątrz <section>.

<aside>:
Zastosowanie: Przeznaczony dla treści, które są powiązane z główną zawartością, ale nie są jej integralną częścią, takie jak boczne paski, reklamy, przewodniki.

<footer>:
Zastosowanie: Zawiera stopkę strony lub sekcji. Może zawierać informacje o autorze, prawa autorskie, linki do dokumentów prawnych, informacje kontaktowe itp.

<main>:
Zastosowanie: Główny kontener dla unikalnej zawartości strony. Powinien zawierać treść, która jest bezpośrednio powiązana z głównym tematem strony.

<figure> i <figcaption>:
Zastosowanie: <figure> to kontener na elementy multimedialne takie jak obrazy, diagramy, zdjęcia, kod; <figcaption> umożliwia dodanie opisu lub legendy do tego, co zawiera <figure>.

<details> i <summary>:
Zastosowanie: <details> tworzy widget, który użytkownik może rozwinąć lub zwinąć, aby zobaczyć więcej lub mniej informacji. <summary> określa widoczny domyślnie nagłówek dla zawartości <details>.

<mark>:
Zastosowanie: Używany do wyróżnienia lub podkreślenia części tekstu, na przykład wyników wyszukiwania lub kluczowych słów.

Każdy z tych elementów odgrywa specyficzną rolę w strukturze strony, umożliwiając tworzenie bardziej uporządkowanych i semantycznie znaczących dokumentów HTML. Wspomaga to zarówno dostępność, jak i SEO (Search Engine Optimization), ponieważ pomaga wyszukiwarkom lepiej rozumieć strukturę i zawartość strony.
CSS (Cascading Style Sheets) jest używany do stylizacji elementów HTML i tworzenia atrakcyjnych wizualnie stron internetowych. Oto kilka podstawowych sposobów, w jakie można używać CSS do stylizacji elementów HTML:

1. Selektory i Deklaracje:
Selektory: Pozwalają wybrać elementy HTML, które chcesz stylizować. Na przykład, p jako selektor wybierze wszystkie elementy <p> (akapity).
Deklaracje: Składają się z właściwości i ich wartości. Na przykład, color: red; zmienia kolor tekstu na czerwony.

2. Podłączanie Arkuszy Stylów do HTML:
Można dołączyć CSS do dokumentu HTML na trzy sposoby:
Wewnętrzny (Inline): Bezpośrednio w tagach HTML za pomocą atrybutu style.
Wewnętrzny (Internal): W sekcji <head> dokumentu HTML, używając tagu <style>.
Zewnętrzny (External): Linkując zewnętrzny arkusz stylów za pomocą tagu <link> w <head>.
3. Stylizacja Tekstu i Fontów:
Zmiana czcionki, rozmiaru, koloru, wyrównania tekstu itp., np. font-family, font-size, color, text-align.

4. Kontrola Układu:
Stylizowanie i kontrola układu elementów za pomocą właściwości takich jak margin, padding, border, width, height.

5. Flexbox i Grid:
Zaawansowane techniki układu, takie jak Flexbox (display: flex;) i CSS Grid (display: grid;), umożliwiają tworzenie responsywnych układów.

6. Pseudoklasy i Pseudoelementy:
Umożliwiają stylizowanie określonych stanów elementu (np. :hover, :focus) lub części elementu (np. ::before, ::after).

7. Responsywność i Media Queries:
Używanie zapytań medialnych (@media) do tworzenia stylów, które zmieniają się w zależności od rozmiaru ekranu i innych warunków.

8. Animacje i Przejścia:
Tworzenie animacji i efektów przejścia za pomocą @keyframes, animation i transition.

9. Zmienne CSS:
Użycie zmiennych CSS (--nazwa-zmiennej) do przechowywania wartości, które można wielokrotnie wykorzystywać i łatwo zmieniać.

10. Kaskadowość i Dziedziczenie:
Zrozumienie, jak CSS stosuje style (kaskadowość) i w jaki sposób elementy dziedziczą style od swoich rodziców.

Pamiętaj, że CSS jest bardzo potężnym narzędziem, które pozwala na wiele kreatywności i kontroli nad wyglądem strony internetowej. Praktyka i eksperymentowanie są kluczem do nauki i opanowania CSS.

jQuery to popularna biblioteka JavaScript, która znacznie ułatwia manipulację DOM (Document Object Model) i obsługę zdarzeń w przeglądarkach internetowych. Oto kilka kluczowych sposobów, w jakie jQuery upraszcza te zadania:

1. Uproszczona Manipulacja DOM:
Selektory: jQuery używa selektorów CSS do łatwego wybierania elementów DOM. Na przykład, $('#id') dla ID, $('.class') dla klas, i $('element') dla tagów.
Łańcuchowanie Metod: jQuery umożliwia łączenie wielu operacji na elementach w jeden łańcuch, co upraszcza kod. Na przykład, $('p').addClass('new-class').hide();.
Manipulacja Treścią: Metody takie jak .html(), .text(), i .val() ułatwiają pobieranie i ustawianie zawartości HTML, tekstu i wartości formularzy.

2. Obsługa Zdarzeń:
Prosta Rejestracja Zdarzeń: jQuery ułatwia dodawanie obsługi zdarzeń, takich jak kliknięcia czy zmiany, za pomocą metod takich jak .click(), .change(), itd.
Delegacja Zdarzeń: Za pomocą .on(), można dodać obsługę zdarzeń do elementów, które jeszcze nie istnieją w DOM (ale zostaną dodane w przyszłości), co jest przydatne w aplikacjach dynamicznych.

3. Efekty i Animacje:
jQuery oferuje wiele wbudowanych efektów i metod animacji, takich jak .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), co pozwala na łatwe dodawanie efektów wizualnych.

4. Zapytania AJAX:
Biblioteka upraszcza wykonywanie zapytań AJAX za pomocą metod takich jak $.ajax(), $.get(), $.post(), co pozwala na łatwe pobieranie danych z serwera bez przeładowywania całej strony.

5. Manipulacja Atrybutami i Stylami:
Metody takie jak .attr(), .css(), .addClass(), .removeClass(), .toggleClass() ułatwiają modyfikowanie atrybutów i stylów elementów.

Zalety jQuery:
Krótszy i Czytelniejszy Kod: Kod jest zwięzły i łatwy do zrozumienia.
Kompatybilność między Przeglądarkami: jQuery rozwiązuje wiele problemów związanych z różnicami między przeglądarkami.
Bogaty Zbiór Funkcjonalności: Oferuje szeroki zakres narzędzi do pracy z DOM, zdarzeniami, animacjami i AJAX.

Warto jednak zauważyć, że w nowoczesnym rozwoju stron internetowych, zwłaszcza z użyciem nowoczesnych frameworków JavaScript takich jak React, Angular czy Vue.js, bezpośrednia potrzeba stosowania jQuery maleje. Te frameworki często oferują własne, zintegrowane sposoby na manipulację DOM i obsługę zdarzeń.

Kod źródłowy dostępny na githubie

https://github.com/mariuszjurczenko/HtmlCssJS

4.5
4.5 z 5
opinie 4

Szczegóły oceny

5 ⭐️
2
4 ⭐️
2
3 ⭐️
0
2 ⭐️
0
1 ⭐️
0

{{ review.user }}

{{ review.time }}
 

Pokaż więcej
Proszę się zalogować, aby napisać opinię
HTML5, CSS, JavaScript, jQuery – Seria Web Developer – część 2
Kategoria:
4.5 z 5
4.5
4 opinie
Cena:
PLN 300