10 увлекательных проектов веб-разработки для вашего портфолио. [FE / BE]

Список из 10 проектов по веб-разработке [Frontend и Backend], которые вы можете начать создавать сегодня, чтобы расширить свое портфолио.

Предварительные условия

  • Любая IDE (интегрированная среда разработки), например VSCode, Brackets, Sublime Text
  • NodeJS для проектов серверной веб-разработки
  • Знание HTML, CSS и Javascript

🛑 Вы можете скачать эту страницу в формате PDF здесь 🛑

НАЧИНАЯ

Когда вы впервые начали изучать веб-разработку, вы, должно быть, прошли несколько руководств, построили несколько проектов из длинных обучающих видео и множества сообщений в блогах. Однако эти проекты обычно не лучший выбор для вашего портфолио по следующим причинам:

  1. Проекты отражают вас как изучающего код: большинство идей, которые вы реализовали в проекте, основывались на решенной проблеме. Воспитатель решил проблему, вам просто нужно следовать. В учебной среде это хорошо, потому что вы научитесь решать проблемы. Однако в профессиональной среде вы хотели бы продемонстрировать свои собственные навыки решения проблем, то, как вы, как человек, решите проблему.
  2. Скопированная база кода. Это связано с первой причиной. Технические специалисты по подбору персонала не имеют возможности проверить, является ли загруженный вами код вашим исходным кодом или кодом из кодовой базы вашего преподавателя.

По этим двум причинам вам нужно будет создавать проекты, которые вы контролируете, с нуля. Это позволит вам продемонстрировать свои навыки решения проблем, навыки программирования, а иногда и свои дизайнерские навыки. Независимо от того, насколько мало вы думаете, что знаете, ваш исходный контент намного лучше, чем демонстрация полностью скопированной базы кода.

В этом посте вы увидите 10 проектов веб-разработки, которые вы можете создать для своего портфолио.

5 для Frontend-разработки и 5 для Backend-разработки. Эти проекты будут проходить от новичка до продвинутого и познакомят вас со всем, что вам нужно знать, чтобы стать опытным веб-разработчиком, уверенным в своих силах.

ФРОНТЕНДНЫЕ ПРОЕКТЫ РАЗВИТИЯ

Перечисленные ниже проекты научат вас таким навыкам, как:

  • Структура планирования с помощью HTML
  • Создание точной копии дизайна пользовательского интерфейса
  • Flexbox / сетки в CSS
  • Бутстрап
  • Общие команды CSS

Каждый проект поставляется с «СПРАВОЧНИКОМ ПО Учебнику», т. Е. Ссылкой на учебное пособие, в котором объясняются основные концепции проекта, а также со списком тем, которые вы, как ожидается, поймете в конце проект.

1. Компонент ценообразования

Ссылка на руководство: Раздел адаптивных служб с использованием CSS Flexbox

Необходимые инструменты: HTML, CSS, Bootstrap (необязательно).

Что вы узнаете: CSS Flexbox, радиус границы CSS, создание пользовательских кнопок, дизайн макета в CSS. Позиционирование в CSS

2. Дизайн целевой страницы

Ссылка на руководство: Дизайн целевой страницы с использованием HTML и CSS

Необходимые инструменты: HTML, CSS, Javascript, Bootstrap (необязательно).

Что вы узнаете: CSS Flexbox, дизайн страниц, интерактивные кнопки с Javascript, дизайн макета с помощью CSS. Позиционирование в CSS

3. Дизайн страницы блога

Справочник: Простой дизайн страницы блога с использованием HTML и CSS

Необходимые инструменты: HTML, CSS, Bootstrap (необязательно).

Что вы узнаете: сетки CSS, методы макета CSS, позиционирование в CSS, медиа-запросы в CSS, проектирование с помощью точек останова в CSS.

4. Целевая страница с сокращением URL

Ссылка на руководство: Проверка формы в Javascript

Необходимые инструменты: HTML, CSS, Javascript, Bootstrap (необязательно).

Ресурсы: Ресурсы целевой страницы, сокращающие URL.

Что вы узнаете: создание полной целевой страницы, проверка формы в Javascript, медиа-запросы, адаптивный веб-дизайн, макеты CSS, позиционирование в CSS, регулярное выражение.

5. Проект API: выберите API по вашему выбору и создайте проект на его основе.

Пример проекта: отслеживание IP-адресов

Справочник по руководству: Работа с API в Javascript, Получение API в Javascript

Необходимые инструменты: HTML, CSS, Javascript, Bootstrap (необязательно).

Ресурсы: Приложение для отслеживания IP.

Что вы узнаете: API-интерфейсы в Javascript, Fetch API в Javascript, асинхронный Javascript, REST.

Список API: 50+ интересных API, с которыми вы можете работать

🛑 Вы можете скачать эту страницу в формате PDF здесь 🛑

ОБРАТНЫЕ ПРОЕКТЫ РАЗВИТИЯ

Перечисленные здесь проекты серверной разработки ориентированы на NodeJS, однако вы можете использовать любой язык по вашему выбору для заполнения раздела Backend перечисленных проектов. Вот некоторые из вещей, которые вы узнаете:

  • Маршрутизация
  • CRUD Операции
  • Документация по API с POSTMAN
  • Фреймворки NodeJS

Каждый проект снабжен «СПРАВОЧНИК ПО Учебнику», т. Е. Ссылкой на учебное пособие, в котором объясняются основные концепции проекта, а также список тем, которые вы, как ожидается, поймете в конце проект.

1. Система аутентификации пользователей

Резюме: этот проект поможет вам создать систему входа / регистрации для пользователей на сайте. Это удобно, так как на большинстве сайтов есть встроенный уровень аутентификации.

Справочник по руководству: Аутентификация в NodeJS с помощью PassportJS, Создание системы входа в PHP

Необходимые инструменты: язык программирования по вашему выбору (NodeJS, PHP, Python и т. д.), Postman для тестирования API.

Что вы узнаете: аутентификация / авторизация, файлы cookie, сеансы, маршрутизация, использование Postman, SQL, MongoDB, работа с базами данных

2. Проект прокси-сервера

Резюме: прокси-сервер - это сервер, который действует как средний уровень при запросе данных из стороннего API. При создании прокси-сервера вы создадите сервер, который запрашивает данные из внешнего API и обслуживает эту информацию.

Справочник по руководству: Как работает прокси-сервер

Необходимые инструменты: язык программирования по вашему выбору (NodeJS, PHP, Python и т. д.), Postman для тестирования API.

Что вы узнаете: CORS против SOP, создание прокси-сервера, работа с Fetch API в NodeJS, получение данных из стороннего API, работа с базами данных

3. Заявка на аренду книги

Резюме: вы можете создать приложение для аренды книг, которое позволит одному пользователю выполнять следующие действия.

  • Создайте учетную запись администратора пользователя
  • Операции CRUD с книгами: создание нового списка книг, изменение списка книг или номера ISBN книги, удаление списка книг
  • Показывать пользователям, доступна ли книга для аренды или нет
  • Разрешить арендаторам книг создавать учетную запись "Арендаторы"

Чтобы сделать проект более сложным, вы можете реализовать простой интерфейс с помощью EJS / Handlebars + Bootstrap на нем.

Справочник по руководству: Создание ролей пользователей в NodeJS

Необходимые инструменты: язык программирования по вашему выбору (NodeJS, PHP, Python и т. д.), Postman для тестирования API, язык шаблонов (EJS / Pug / Handlebars)

Что вы узнаете: создание моделей данных, ограничение доступа к данным, работа с базами данных, CRUD в серверной части, управление данными в серверной части

4. Приложение веб-сканера

Резюме: создайте приложение, которое может сканировать Интернет с целью веб-индексации или сбора данных.

Справочник по руководству: Создание приложения-поискового робота на NodeJS

Необходимые инструменты: язык программирования по вашему выбору (NodeJS, PHP, Python и т. д.), Postman для тестирования API.

Что вы узнаете: работа с сервис-воркерами, создание поискового робота, работа с базами данных, CORS, защита баз данных.

5. Серверная часть для приложения электронной коммерции.

Резюме. Эта конкретная задача - гигантская задача, и вам может потребоваться некоторое время для ее выполнения. Цель этой задачи - изучить основные части серверной части приложения электронной коммерции. В вашем приложении могут быть реализованы следующие функции

  • Операции CRUD пользователем с правами администратора, Внедрение корзины товаров
  • Социальная интеграция
  • Панель администратора и панель пользователя

Справочник по руководству: Создание серверной части администратора Laravel

Необходимые инструменты: язык программирования по вашему выбору (NodeJS, PHP, Python и т. д.), Postman для тестирования API.

Что вы узнаете: создание нескольких пользователей в приложении, отношения "один ко многим" в базах данных, создание системы проверки, управление базами данных, защита баз данных.

🛑 Вы можете скачать эту страницу в формате PDF здесь 🛑

ЗАКЛЮЧЕНИЕ

В заключение, основные моменты, на которые следует обратить внимание: при создании проектов для вашего портфолио ваша цель - показать, как вы как человек можете продумать проблему, реализовать масштабируемые алгоритмы и системы проектирования, которые легко масштабируются с течением времени.

Вы можете присоединиться к Сообществу 👉‍🏾‍ здесь 👈‍🏾‍, чтобы получать уведомления о мастер-классе HerCodeFactory Portfolio Building, когда он начнется.

Я надеюсь, что эти предложения и руководства по проектам помогут вам стать разработчиком, которым вы стремитесь стать.

До следующего поста, Ciao!

Ванесса О.

ПОМНИТЕ: 🛑 Вы можете загрузить эту страницу в формате PDF здесь 🛑