В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.
Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.
Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.
Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.
В данную подборку вошли шаблоны для различных профессий, но, в основном, оценят топик программисты, веб-дизайнеры или верстальщики, так как по дизайну и структуре они больше подходят именно им.
Ранее мы уже публиковали подборки с шаблонами для создания портфолио. Например:
Шаблон полностью адаптивен, имеет классную анимацию появления элементов при скроллинге с полностью валидным кодом.Gorgo PortfolioБесплатный, очень чистый и стильный шаблон портфолио дизайнера . Выполнен в стиле минимализм . Также имеет классное полноэкранное меню .
Сетка с примерами работ сделана по примеру шахматной доски, что очень радует, так как это тренд. Сама страница работы меня очень впечатлила, вероятно из-за качественного демо-наполнения. Если Вы намерены использовать именно этот дизайн в качестве личной странички, позаботьтесь о качественном оформлении самой работы.LithiumБесплатный адаптивный шаблон в стиле Flat , который подойдет практически любому фрилансеру, будь это веб-разработчик или фотограф, так как на станице предусмотрено как привычное портфолио с фильтром по категориям работ, так и фотогалерея . BrandyЕще один чрезвычайно качественный шаблон для создания личного портфолио . Он имеет множество плюшек, которые все так любят: Parallax эффекты, эффект появления блоков при скроллинге, плавная прокрутка, различные счетчики и, конечно же, блок самого портфолио.
Шаблон абсолютно бесплатен и подойдет для фрилансеров любой IT профессии.KongИнтересный html шаблон портфолио дизайнера . В первом экране можно разместить свою фотографию, представиться и написать свою специальность.
Практически все блоки в шаблоне реализованы те, которые мы привыкли видеть в стандартном Лендинге.
По поводу цветовой гаммы - я бы ее сменил. Слишком уж ядовая.MyFolioОтличный адаптивный одностраничник-портфолио в зеленых тонах. Подойдет как фрилансеру-одиночке, так и команде разработчиков. Шаблон выполнен качественно и заслуживает внимания.BasicСтрогий шаблон в синих тонах для создания портфолио. Построен на Bootstrsp 3.2. Если заменить иконки в первом экране, можно использовать фрилансерам любой сферы деятельности.SmallНебольшой одностраничный html шаблон в плоском стиле . Он разделен на три экрана с высотой 100%. Первый экран - фотография и краткая информация о фрилансере.
Второй экран - портфолио. Выводятся последние 8 работ из Вашего портфолио на dribbble . То есть все, что нужно сделать, это настроить интеграцию с и на этом все. Изображения будут обновляться сами, синхронно с вашими действиями на Dribbble.
Третий экран - Контактная информация.KelvinКачественный, универсальный HTML5 CSS3 шаблон. Очень напоминает Ceevee, который был в этой подборке выше, но есть некоторые отличия в концепции блока с примерами работ и в графиках, которые отображают скиллы фрилансера. Предусмотрена возможность детального рассказа о себе с помощью различных блоков.PortioИнтересный, универсальный шаблон, хотя есть много моментов, из-за которых я бы не стал его использовать: это дурацкие шрифты, убогие кнопки. Возможно, кого-то заинтересует такой вариант. Как никак - яркая цветовая гамма. Если немножко поправить CSS стили, можно прийти к хорошему результату.PortБесплатный, и, я бы даже сказал, элегантный одностраничный шаблон на базе Bootstrap. Лично мне нравятся красные активные элементы. Блок с примерами работ выполнен в виде мудреной сетки, и это плюс. Данный шаблон будет отличным решением для создания портфолио веб-дизайнера или программиста .HexaМногостраничный Flat-шаблон со слайдером в шапке в характерной стилю цветовой гамме - зеленой. Используя данное решение, вы сможете создать отличный сайт-визитку с примерами работ и блогом.FreelancerОтличный одностраничник в плоском стиле и зеленой цветовой гамме. В первом экране предусмотрено место под фотографию, а лучше, чтобы не портить стилевое оформление, рисованный автопортрет владельца сайта.
Шаблон небольшой, и это огромный плюс, так как для наших целей использовать «портянки» незачем. Выполнен, на удивление, очень качественно. Он полностью адаптивен и базируется на фреймворке Bootstrap.Dribbble PortfolioЕще один шаблон, портфолио в котором интегрировано с Dribbble . Требуется лишь настроить выгрузку последних работ и забыть о постоянном, нудном обновлении портфолио на своей личной странице.
Шаблон выполнен в строгой, современной цветовой гамме. Все смотрится очень чистенько.
Также как и предыдущий Dribbble-шаблон, он небольшой. Я бы даже сказал, лаконичный. В общем, моя оценка 9 из 10.GeekНеплохой, хотя и ощущается немного тяжеловатым, шаблон для создания портфолио фрилансера в виде посадочной страницы. Он имеет различные диаграммы для визуального отображения уровня навыков в своих профилях деятельности - это интересно. Также имеется слайдер с отзывами и блок с симпатичной сеткой из фотографий, который можно использовать для демонстрации своих работ.Dribbble Folio V2Бесплатный шаблон с автонаполняемым портфолио . Работы импортируются с сайта Dribbble . Перед использованием данного решения, не забудьте настроить интеграцию с вашим профилем на Dribbble.
К сожалению, демо нет.HarbourОригинальный html css шаблон в фиолетовых тонах для создания персонального сайта. Это многостраничная тема, где главная выполнена в стиле одностраничника, но, в свою очередь, имеются также внутренние страницы. Подойдет для создания личного сайта фрилансера любой специальности.
Делаю верстку сайтов.
Общий опыт по веб-разработке 7 лет (дизайн, вёрстка, программирование).
Навыки основные: HTML, CSS, JS, SVG, jQuery, Node.js, WordPress, веб-дизайн (фотошоп, корел), git.
Иногда использую: PHP, MySQL.
Преимущества моей вёрстки:
- Знаю как всё работает от дизайна до сервера, поэтому вёрстка лаконичная и понятная. Могу работать в команде с вашим дизайнером и программистом. Дизайнеры получают попиксельное соответствие вёрстки их дизайну. А программисты быстро прикручивают вёрстку куда надо без всяких проблем.
- Делаю для компьютеров, планшетов и телефонов.
- Для всех современных браузеров. Могу для старых если нужно от IE6:)
- Программирую всё, что нужно на страницах: запросы на сервер, анимации, интерфейс, калькуляторы.
- Пишу весь код руками.
- Код абсолютно валидный.
- Скорость страниц до 100% в Google PageSpeed.
Преимущества работы со мной:
- Если договорились, то делаю сразу без отлагательств.
- Делаю быстро. Качество при этом не страдает. Если кто-то вам пообещает быстрее, скорее всего получите несравнимо хуже.
- Работаю обычно с постоплатой, но частями. Сделал часть, вы проверили, оплата.
- Спокойно исправляю ошибки после сдачи работы, если будут.
- Если я что-то не могу, вы узнаете это до начала работ, а не потом.
Особенности:
- Делаю только с нуля. Это может быть весь сайт, страница, блок на странице и так далее. То есть чужую вёрстку я не правлю.
- Не использую Bootstrap. Он для прототипирования или быстрого запуска, а не для нормального дизайна.
- Делаю из дизайна в форматах PSD, AI или CDR. Из других не делаю.
Представленные ниже работы являются скриншотами из браузера реальной вёрстки, которую я выполнил, а не дизайна. Многие отличные работы не вошли в портфолио по причине нежелания заказчиков.
Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:
index.htmlМое портфолио
Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav , оформленный как зеленая полоса, действует как фильтр содержания.
Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data , который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.
Вы можете поместить в список пунктов другие работы и использовать другие метки.
jQueryПлагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.
После загрузки страницы мы запускаем цикл для обнаружения меток.
script.js - Часть 1$(document).ready(function(){ var items = $("#stage li"), itemsByTags = {}; // Цикл по всем элементам li: items.each(function(i){ var elem = $(this), tags = elem.data("tags").split(","); // Добавляем атрибут data-id. Требуется плагином Quicksand: elem.attr("data-id",i); $.each(tags,function(key,value){ // Удаляем лишние пробелы: value = $.trim(value); if(!(value in itemsByTags)){ // Создаем пустой массив для пунктов: itemsByTags = ; } // Каждый пункт добавляется в один массив по метке: itemsByTags.push(elem); }); });
Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags["Веб дизайн"] будет содержать массив всех пунктов, которые имеют метку "Веб дизайн". Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.
Создадим вспомогательные функции
script.js - Part 2Function createList(text,items){ // Вспомогательная функция, которая получает текст кнопки меню и // массив пунктов li // Создаем пустой неупорядоченный список var ul = $("
- ",{"class":"hidden"});
$.each(items,function(){
// Создаем копию каждого пункта li
// и добавляем ее в список:
$(this).clone().appendTo(ul);
});
ul.appendTo("#container");
// Создаем пункт меню. Неупорядоченный список добавляется
// как параметр data (доступен через.data("list"):
var a = $("",{
html: text,
href:"#",
data: {list:ul}
}).appendTo("#filter");
}
Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску.
Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.
script.js - Часть 3// Создаем опцию "Все" в меню: createList("Все",items); // Цикл по массивам в itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $("#filter a").live("click",function(e){ var link = $(this); link.addClass("active").siblings().removeClass("active"); // Используем плагин Quicksandдля анимации пунктов li. // Он использует data("list"), определённую нашей функцией createList: $("#stage").quicksand(link.data("list").find("li")); e.preventDefault(); }); $("#filter a:first").click();
CSSСамая интересная часть стилей CSS - зеленая полоска #filter . Для нее используются псевдо-элементы:before / :after , чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.
styles.css#filter { background: url("../img/bar.png") repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; } #filter:before, #filter:after { background: url("../img/bar.png") no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ""; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); } #filter:before { background-position: 0 -47px; left: -78px; } #filter:after { background-position: 0 0; right: -78px; } #filter a{ color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; } #filter a:hover{ text-decoration:none; } #filter a.active{ background: url("../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; }
Готово!Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. Если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.