Обучение прогромирования. .CSS .JS .HTML .PHP

Советник ) · 27 Ноя 2022

Общая тема по программированию .CSS .JS .HTML .PHP

Ссылки, Примеры и общения.

Начну с примера getbootstrap
Инструкция Здесь

PHP Инструкция Здесь
XAMPP Apache + MariaDB + PHP + Perl Здесь

JS (JavaScript) Здесь

Инструменты:
Visual Studio Code Здесь Туториал Здесь

Урок номер 1: Создание Индекс файла.

1. Create a new index.html file in your project root.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Ссылка на Файл сюда =>

2. Include Bootstrap’s CSS and JS.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

  </head>
  <body>
    <h1>Hello, world!</h1>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>

  </body>
</html>

Ссылка на Файл сюда =>

3. Создание HEADER FOOTER

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
  </head>
  <body>
  <!-- Header -->
  Здезь будет навигация
  <!-- Header End -->

    <h1>Hello, world!</h1>

<!-- Footer -->
  Здезь будет Footer
<!-- Footer End -->

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">

  </body>
</html>

Урок номер 2.1: Создание Навигации. Ссылка на Примеры

Код:

<!-- Вставляем на месте Header -->

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!-- Navigation End-->

Ссылка на Файл сюда =>

Урок номер 2.2: Создание Footer Пример здесь

HTML:

<!-- Вставляем на место Footer -->

<div class="container">
  <footer class="py-5">
    <div class="row">
      <div class="col-6 col-md-2 mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
        </ul>
      </div>

      <div class="col-6 col-md-2 mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
        </ul>
      </div>

      <div class="col-6 col-md-2 mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
        </ul>
      </div>

      <div class="col-md-5 offset-md-1 mb-3">
        <form>
          <h5>Subscribe to our newsletter</h5>
          <p>Monthly digest of what's new and exciting from us.</p>
          <div class="d-flex flex-column flex-sm-row w-100 gap-2">
            <label for="newsletter1" class="visually-hidden">Email address</label>
            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
            <button class="btn btn-primary" type="button">Subscribe</button>
          </div>
        </form>
      </div>
    </div>

    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <p>&copy; 2022 Company, Inc. All rights reserved.</p>
      <ul class="list-unstyled d-flex">
        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
      </ul>
    </div>
  </footer>
</div>

Ссылка на Файл сюда =>

Коректируем Навигацию.

HTML:

<!-- Header -->
  <div class="container">
    <header class="py-5">
      <div class="row">
        <div class="col-12 col-md-12 mb-12">

<!--- Код навигации --->


<!--- Код навигацииEnd --->

  </div>
</header>
</div>
</div>

Создаём Main Примеры здесь

И пропись сетки Colum

Код:

 <!-- На месте Hello World -->

<div class="container">
      <div class="row">
        <div class="col-12 col-md-12 mb-12">
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>

<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque soluta deleniti minima ducimus amet placeat, sed eius dignissimos repellat? Recusandae atque perspiciatis perferendis natus quasi eum velit facere voluptatum illum.</p>

<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque soluta deleniti minima ducimus amet placeat, sed eius dignissimos repellat? Recusandae atque perspiciatis perferendis natus quasi eum velit facere voluptatum illum.</p>


<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque soluta deleniti minima ducimus amet placeat, sed eius dignissimos repellat? Recusandae atque perspiciatis perferendis natus quasi eum velit facere voluptatum illum.</p>

      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  </div>
</div>
</div>

Ссылка на Файл сюда =>

index.html Файл готов. Следующие уроки: дезайн индех файла.

Вы можете также скачать Файл index.html

Дальнейшии уроки в Коментариях.

Желаю вам успехов в программировании.

J_Die · 27 Ноя 2022

Не вижу кода чтобы кс не лагал. Какая-то муть про привет мир.

surfy · 27 Ноя 2022

где я

Советник ) · 27 Ноя 2022

J_Die написал(а):
Не вижу кода чтобы кс не лагал. Какая-то муть про привет мир.

Если лагает КС

Или сюда

Foxar · 27 Ноя 2022

Из разряда:

*@Lucky@* · 27 Ноя 2022

Советник ) написал(а):
JS (JavaScript) Здесь

Летом только прошёл этот учебник весь)
Правда к некоторым моментам стоило бы вернуться и заново изучить. Точно запомнил с чем плохо разобрался - это промисы.

Советник ) · 27 Ноя 2022

*@Lucky@* написал(а):
Летом только прошёл этот учебник весь)
Правда к некоторым моментам стоило бы вернуться и заново изучить. Точно запомнил с чем плохо разобрался - это промисы.

Сам лет 10 не програмировал. Решил опять заняться.

worch · 27 Ноя 2022

SpringBunny · 28 Ноя 2022

Вау! А можете какой-то задачник для php посоветовать?
Основы знаю, понимаю, но практики жуть как не хватает

Сколько не искала, все идут либо на питона, либо js.
Пробовала js задачки, типо "поле чудес" или "морской бой" на php, но это пздц заморочки с SQL'ем

Gollum · 28 Ноя 2022

worch написал(а):

Жалко ее, по стопам одной мадамы пошла, начала прончик сливать (ПА ПАТПИСЬКЕ!!!!1!1111!)

Wesna^_^ написал(а):
Вау! А можете какой-то задачник для php посоветовать?
Основы знаю, понимаю, но практики жуть как не хватает
Сколько не искала, все идут либо на питона, либо js.
Пробовала js задачки, типо "поле чудес" или "морской бой" на php, но это пздц заморочки с SQL'ем

Питон ходовой, как и сишки. Поэтому все и переходят на традиционку или обновленку

SpringBunny · 28 Ноя 2022

Gollum написал(а):
Питон ходовой, как и сишки. Поэтому все и переходят на традиционку или обновленку

Я начала уже одну базу, бросать ее не охото. Вообще в планах было на ГО пойти после php. Js и питон категорически не охото

СиПлюсПлюс тоже возможен в планах. Надо базу закрепить!!!11

*@Lucky@* · 28 Ноя 2022

Wesna^_^ написал(а):
Вау! А можете какой-то задачник для php посоветовать?
Основы знаю, понимаю, но практики жуть как не хватает
Сколько не искала, все идут либо на питона, либо js.
Пробовала js задачки, типо "поле чудес" или "морской бой" на php, но это пздц заморочки с SQL'ем

А на php работала уже с сессиями/куками и get/post запросами? Делала какие-нибудь банальные регистрации и авторизации, с различными проверками, например, на валидацию данных? Плюс добавить сессии/куки, чтоб не проходить авторизацию каждый раз, как обновляешь страничку. Как по мне, вот что-то подобное - хорошая практика.

SpringBunny · 28 Ноя 2022

*@Lucky@*, эти базы во всех книжках прописаны, уже задолбали

Там оно это все пересекается с mysql.
Ну как-то задачи на регистарцию/авторизацию/валидацию поднадоело, т.к. одно и тоже. Хочется чего-то нового, что ли

*@Lucky@* · 28 Ноя 2022

Wesna^_^ написал(а):
*@Lucky@*, эти базы во всех книжках прописаны, уже задолбали
Там оно это все пересекается с mysql.
Ну как-то задачи на регистарцию/авторизацию/валидацию поднадоело, т.к. одно и тоже. Хочется чего-то нового, что ли

Ой, хорошо, щас я поищу заказчика под какой-нибудь проект, перешлю тебе потом. Тебе практика, а я подзаработаю

SpringBunny · 28 Ноя 2022

*@Lucky@*, ой, спасибо, не надо

Когда-то давно "практиковалась" на воркзиле(прошу прощения если это считается рекламой/атирекламой). Кааааааторга! Неохото практиковаться на биржах

Gollum · 28 Ноя 2022

Wesna^_^ написал(а):
Я начала уже одну базу, бросать ее не охото. Вообще в планах было на ГО пойти после php. Js и питон категорически не охото
СиПлюсПлюс тоже возможен в планах. Надо базу закрепить!!!11

База это база! (с)

Советник ) · 28 Ноя 2022

Wesna написал(а):
Вау! А можете какой-то задачник для php посоветовать?
Основы знаю, понимаю, но практики жуть как не хватает
Сколько не искала, все идут либо на питона, либо js.
Пробовала js задачки, типо "поле чудес" или "морской бой" на php, но это пздц заморочки с SQL'ем

В ютубе много задач. Например здесь в плейлисте.

Советник ) · 28 Ноя 2022

Обучение прогромирования. .CSS .JS .HTML .PHP
Продолжение....

Округляем Навигацию:

HTML:

<!--- Прописываем в <nav class="navbar navbar-expand-lg bg-light" > style- code
style="border-radius: 5px 5px;"
-->

<nav  class="navbar navbar-expand-lg bg-light" style="border-radius: 5px 5px;">

<!---Встовляем стиль картинки Background в <head>  ...  </head> --->

<style>
/* Set a background image by replacing the URL below */
/* url('Или вашу картинку') */
body {
  background: url('https://images.unsplash.com/photo-1470217957101-da7150b9b681?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

</style>

<!--- Если картинка должна двигатся, убираем команду "fixed" --->

Обработка Footer:

HTML:

<!---В разделе Footer обрабатываем class и style <div class="container> --->

<div class="container bg-light" style="border-radius: 5px 5px; margin-top: 20px;">

Обрабатываем размер Footer:

HTML:

<!-- Обновляем Footer на правильный формат-->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-12 mb-12">

    .......


    </div>
</div>
</div>

Информация здесь

HTML:

<!--- Цвета Навигации --->

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Bester Galerie Effekt für Bilder!? [DE/Tutorial]

]

Ссылка на Файл сюда =>

Do3e · 29 Ноя 2022

Программирование предпочитаю изучать по видео

Обучение прогромирования. .CSS .JS .HTML .PHP

Удалить тему?

Удалить тему?

Нету причины

Мне всёравно

Советник )

Вложения

J_Die

ЗАГ-ЗАГ!

surfy

Советник )

Foxar

Хитрый и коварный лис

@Lucky@

👀

Советник )

worch

SpringBunny

I’m gonna ruin my life

Gollum

SpringBunny

I’m gonna ruin my life

@Lucky@

👀

SpringBunny

I’m gonna ruin my life

@Lucky@

👀

SpringBunny

I’m gonna ruin my life

Gollum

Советник )

Советник )

Вложения

Do3e