HTML/CSS/JS/PHP шаблоны

FILES

В первый представленный архив включены примеры с подробным описанием структуры сайта. Приведены примеры от самого простого использования тегов до создания “движка” на основе PHP+MySQL. В примерах показано использование JS для работы с датой и временем, вывода сообщений, AJAX для загрузки страниц в div-ы без перезагрузки сайта. Последний, тринадцатый, пример может быть использован в качестве шаблона для того чтобы развернуть школьный сайт (электронный журнал, авторизация и регистрация, новостной блок и панель управления контентом). Скачать материал можно по ссылке

Первые шаги в PHP для начинающих
Примеры вычислений и практика
Тесты и самостоятельные упражнения
Работа с БД. Инструкции для работы PHP&MySQL

Разработка экспертной системы. Arduino & PHPMySQL

Разработка системы регистрации пользователей (PHPMySQL)

Запись в базу данных mysql на php через форму

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Проверка уникальности он-лайн

Установка локального хостинга XAMPP

Регистрация хостинга и домена

Установка сайта на хостинг

Как связать таблицы MySQL в phpMyAdmin

Как искать и отображать данные из базы данных MySQL

Как искать и фильтровать данные в HTML-таблице (PHP и MySQL)

Система входа с использованием PHP с базой данных MYSQL

Как вставить данные в базу данных (PHP и MySQL)

Как обновлять и удалять данные в базе данных (PHP и MySQL)

Как создать блог(PHP и MySQL)

Извлечение и объединение данных из двух или более таблиц (PHP и MySQL)

Программирование новостной системы с ПУ

Ниже, в исчерпывающем списке материалов сайта вы найдете обширную библиотеку скриптов для разработки сайта с инструкциями, примерами и тестами для изучения server-side языка программирования PHP. Для максимально качественного получения результата обучения рекомендуется открывать ссылки последовательно, предварительно закончив предшествующий курс (ссылки в порядке усложнения курса)

Новостные системы и агрегаторы (cms)

а) http://www.php-s.ru/newspublishing/NewsManager/
б) http://www.php-s.ru/newspublishing/CuteNews/
в) https://phpdes.com/php/novostnojj-modul-s-pomoshhyu-simplepie/
г) http://www.softtime.ru/info/ortus.php
д) http://www.softtime.ru/info/proteus.php
е) http://www.softtime.ru/info/venitespectatum.php
ж) http://www.softtime.ru/info/news.php
з) http://www.php-s.ru/chat_scripts/ (чат)

Гостевые книги

а) http://www.php-s.ru/guestbook/DRBGuestbook/
б) http://www.php-s.ru/guestbook/GBook/
в) http://www.php.su/articles/?cat=examples&page=034
г) http://www.php.su/articles/?cat=examples&page=033
д) http://www.php.su/articles/?cat=examples&page=035

Регистрация и авторизация пользователей на сайте

а) http://www.php-s.ru/authorization/MicroLoginSystem/
б) https://htmlweb.ru/php/example/avtorizacija.php
в) https://htmlweb.ru/php/example/avtorizacija3.php
г) https://htmlweb.ru/php/example/avtorizacija2.php
д) https://www.internet-technologies.ru/articles/sistema-registracii-polzovateley-s-pomoschyu-php-i-mysql.html

Галлерея изображений

а) http://www.php-s.ru/photogallery/PHPGallery/
б) http://www.softtime.ru/info/wallist.php
в) http://www.softtime.ru/info/wallist_mysql.php
г) http://www.softtime.ru/info/photo.php

Отправка писем и формы обратной связи

а) http://www.php-s.ru/sendmail/MicroMailer/
б) https://htmlweb.ru/php/example/mail_with_image_send2.php

Отправка писем и формы обратной связи

а) http://www.php-s.ru/sendmail/MicroMailer/
б) https://htmlweb.ru/php/example/mail_with_image_send2.php

Последним в списке материалов представлены дополнительные инструменты используемые при разработке сайта, однако без которых тяжело представить современного веб-разработчика. В список ниже включены: генераторы и сборники цветовых схем/палитр; инструменты для просмотра сочетания и контраста цветов; конвертеры HEX/RGB и RGBA. А так же сервисы, генерирующие цветовую гамму изображения или веб-страницы, сервисы подбора изображения по нужному цвету, онлайн-помощники генерации кода CSS для создания кнопок, форм, таблиц, веб-шрифтов, меню, теней, градиентов, уголков, лент, подсказок и прочих элементов сайта.

Генератор цветовых схем

https://colorsupplyyy.com/app
https://colourco.de/
https://www.materialpalette.com/

Сборники цветовых палитр

https://coolors.co/
https://colorhunt.co/?p=popular

Red CMYK Color Model

Конраст шрифт/фон

https://snook.ca/technical/colour_contrast/

WCAG


https://contrast-ratio.com/

Подбор изображения по цвету

http://labs.tineye.com/multicolr
http://www.shutterstock.com/labs/spectrum/

Градиенты CSS3 (background gradient css generator)

https://cssgradient.io/
https://mycolor.space/gradient
https://www.css-gradient.com/

Инфостиль, стоп-слова, грамматика, семантика

http://glvrd.ru/
https://orfogrammka.ru/
https://miratext.ru/seo_analiz_text

Уникальность текста

http://pr-cy.ru/unique/
http://www.antiplagiat.ru/
http://content-watch.ru/text/
http://www.topwriter.ru/comparison/
https://text-compare.com/
https://www.diffchecker.com/

Онлайн-инструменты CSS

Универсальные генераторы

https://coveloping.com/
http://angrytools.com/
https://css3clickchart.com/
http://www.generatecss.com/
http://www.createcss3.com/

Easy CSS3 Generator


http://css3generator.com/
http://www.cssmatic.com/

Тени

https://brumm.af/shadows

Easy CSS3 Generator


http://www.cssmatic.com/
http://www.themeshock.com/css-drop-shadow/
http://www.themeshock.com/css-text-shadow/

Кнопки

http://www.bestcssbuttongenerator.com/
http://dabuttonfactory.com/
http://cssgradientbutton.com/
http://buttons.cm/
http://unicorn-ui.com/
https://bttn.surge.sh/

Меню

http://cssmenumaker.com/

Центрирование

http://howtocenterincss.com/

Текст под углом

http://www.cssportal.com/

Уголки

http://triangle.designyourcode.io/
http://lugolabs.com/
https://csstriangle.firebaseapp.com/

Ленты

http://www.css3d.net/
http://www.cssportal.com/

Подсказка при наведении/указатель

http://online-html-tools.blogspot.ru/
http://www.cssportal.com/
http://csstooltip.com/
http://cssarrowplease.com/

Таблицы/блоки таблицей

http://tablestyler.com/
http://divtable.com/generator/
http://russellgoldenberg.github.io

Формы

https://html-css-js.com/html/generator/form/

Form Style Generator for Pardot Forms

Спрайты

https://spritegen.website-performance.org/
http://css.spritegen.com/

Переключатели

https://proto.io/
http://www.cssportal.com/

Кодировка изображений в Base64

https://www.base64-image.de/

Градиенты

http://www.gradient-animator.com/
http://elrumordelaluz.github.io/
http://www.colorzilla.com/
http://www.css3factory.com/
http://www.generateit.net/
http://gradient.quasi.ink/
http://www.gradientify.net/

Анимация

http://tobiasahlin.com/

Easy CSS3 Generator


https://coveloping.com/
http://www.theappguruz.com/
http://angrytools.com/
http://waitanimate.eggbox.io
http://waitanimate.wstone.io/
http://animista.net/

Фигуры

https://coveloping.com/
http://csshexagon.com/

Медиа-запросы, точки перелома

http://simplecss.eu/
http://www.responsivebreakpoints.com/
http://giona.net/tools/

CSS фильтры

http://www.cssfilters.co/
http://ilyashubin.github.io/

Разное

https://developer.mozilla.org (рамка из изображения)
http://purecssapple.com/ (девайсы Apple на css)

Типографика

https://typeanything.io/
http://type-scale.com/
http://www.gridlover.net/
https://drewish.com/tools/
http://www.modularscale.com/
http://csstypeset.com/

Генераторы шрифтов @font-face

http://jaicab.com/
https://www.web-font-generator.com/
https://www.flaticon.com/font-face
http://transfonter.org/
http://www.font2web.com/

Внешний вид кода, оптимизация и компрессия

http://cssshrink.com/ (CSS Shrink)
http://css.github.io/csso/ (CSSO – CSS optimizer)
http://info.seocafe.info/tools/csspack/ (упаковка css)
http://csscompressor.com/ (CSS Compressor)
http://tools.w3clubs.com/ (CSS min)

Важный CSS (Critical Path CSS Generator)

https://www.sitelocity.com/critical-path-css-generator
https://jonassebastianohlsson.com/

Извлечение CSS из HTML

http://extractcss.com/
http://lab.xms.pl/

CSS Grid Generator

http://www.gridcss.com/
http://www.responsivegridsystem.com/
https://cssgr.id/

Валидаторы CSS

http://jigsaw.w3.org/

HTML Validation and Web Hosting Research


https://www.10bestdesign.com/dirtymarkup/ (проверка кода)

Совместимость

http://css3test.com/ (тест браузера)
http://caniuse.com/ (поддержка различных свойств браузерами)

HTML/CSS/JS песочницы и он-лайн среды PHP/MySQL разработки

а) https://codepen.io/#

б) https://koding.com/

в) https://c9.io/

г) http://jsfiddle.net/

д) http://dabblet.com/

е) http://cssdesk.com/

ж) http://sqlfiddle.com/

з) https://compilr.com/

и) http://www.unheap.com/

к) http://csstemplater.com/

л) https://codesandbox.io/

м) http://www.tutorialspoint.com/codingground.htm

н) quackit.com

о) sqlzoo.net