Portfolio Technical Assignment

Web Developer Path: HTML & CSS in Action

Portfolio Goal
This portfolio is designed to help reinforce the material learned in the HTML & CSS
module and provide an opportunity to apply all studied techniques in practice. It will
also improve layout skills, adapting interfaces for different devices, working with
interactive elements, and visually styling web pages.

Additionally, the project helps the student learn how to structure information,
develop convenient interfaces, and create high-quality web pages that can become
the foundation for their first real projects and freelance orders.

Portfolio Structure
1. Home Page — Personal Philosophy and
Motivation
The home page should show the student's personality and their attitude toward
programming. Here they can introduce themselves, share their values and goals in
IT, and show what inspires them.

Content:
· Welcome message where the student introduces themselves and briefly talks
about themselves. This may include:
o How they started learning programming.
o Why they became interested in it.
o What they plan to do in the future.

· Personal motto or programming philosophy. This can be a personal statement

showing their approach to learning and work. Examples:
o “Learn, create, improve”
o “Code is art, not just a set of symbols”

· Inspirational quote. The student can choose a quote from a famous

programmer, IT entrepreneur, or scientist that motivates them to move
forward. Examples: Steve Jobs, Linus Torvalds.
Integration of Studied Topics:
· HTML structure: Use the basic document structure (doctype, head, body) and
semantic tags.
· Styling: Use CSS for text, backgrounds, colors, and fonts, as well as CSS
animations and transformations for an impressive intro screen.
· Responsiveness: Use media queries so the page works correctly on any
device.

Technical Requirements:
· Correct HTML markup with semantic tags.
· Styling of headings, paragraphs, and buttons using CSS.
· Use animations (for example, smooth element appearance) and
transformations (hover effects).

2. Current Programming Languages

This page should introduce programming languages that are in high demand on the
job market and show their importance in different areas. The student should explain
each language, its features, applications, and large companies that use it.

Content:
· Overview of popular programming languages:
o Python
o JavaScript
o Java
o C++
o C#
o PHP
o Swift
o Go

Full description of each language:

· Main usage areas:
o Web development
o Mobile applications
o Artificial intelligence
o Game development
o Cybersecurity, etc.
 · Large companies using the language:
o Google
o Microsoft
o Apple
o Meta
o Amazon, etc.

· Creation history:
o Who created it.
o When it appeared.
o What goals it was created for.

· Popular programs, websites, and services written in this language.

Interactive Elements:
· Programming language cards where a short description appears when
hovering.
· “Learn more” button that opens additional information.
· Graph or chart showing the current relevance of languages.

Integration of Studied Topics:

· Lists and tables: Use lists for collections and tables for comparisons.
· CSS styling: Style cards and tables with CSS and apply hover effects.
· Flexbox: Align cards on the page.

Technical Requirements:
· Correct layout of lists and tables.
· Card animations (smooth appearance of descriptions on hover).
· Use Flexbox for evenly distributing cards.
· Media queries for adapting graphs and cards on mobile devices.

3. Blog — Useful Materials

This page is intended for collecting useful resources and recommendations for
beginner developers. It should help users navigate the programming world and
provide verified books, courses, articles, and other useful materials.

Content:
· Personal experience and advice for beginners.
· List of the best programming books with short descriptions.
 · List of free and paid online courses:

o Coursera
o Udemy
o Yandex Practicum, etc.

· Selection of YouTube channels for learning:

o Web development
o Algorithms
o Other topics

· Articles about:
o Web development
o Backend
o IT careers

· List of movies and series about programmers that motivate and inspire.

Design:
· Article cards with:
o Image
o Heading
o “Learn more” button

· Buttons for filtering content by categories:

o Books
o Courses
o YouTube
o Articles

Integration of Studied Topics:

· HTML markup:
o Use headings, paragraphs, lists, and images to structure content.
· CSS styling:
o Style article cards with hover effects and “Learn more” buttons.
· Responsive design:
o Use Flexbox or Grid Layout to organize articles as a grid.

Technical Requirements:
· Semantic markup for every material.
· Cards with images, headings, and buttons styled with CSS.
 · Content filtering buttons with animation effects.
· Responsive content using media queries.

4. My Projects
This page is designed to show completed works that prove the student's knowledge
and skills. Users should be able to view finished projects, read descriptions, and
follow links to source code or live versions.

Content:
· List of completed projects, including:
o Landing pages created during learning.
o Figma designs made during the course.
o Websites created using HTML and CSS.

Full description of each project:

· Name and short description.
· Technologies used.
· Main difficulties faced and solutions.
· Project links:

o GitHub Pages
o CodePen
o ZIP archive with code

· Screenshots of the finished interface.

Design:
· Gallery with previews of completed projects.
· When hovering over a project card:

o A short description appears.

o “View” button appears.

· Project filtering by categories:

o Landing pages
o Websites
o Figma

Integration of Studied Topics:

· Lists and tables:
 o Structure project descriptions.
· Flexbox and Grid Layout:
o Create a responsive project card gallery.
· Transformations and animations:
o Add hover effects and attract attention.

Technical Requirements:
· Each card must have:
o Preview image
o Description
o Link

· Responsive layout using CSS Grid and Flexbox.

· Hover effects using CSS transformations:

o Card scaling
o Background changes

· Ability to filter projects by categories.

5. Contact
This page allows users to contact the student and learn more about their work. It
should contain a feedback form, social media links, and optionally a map or
illustration.

Content:
Feedback form:
Includes:

· Name field.
· Email field.
· Message field.
· “Send” button.
· Checking that fields are filled before submission.

Social and professional platforms:

· GitHub:
o For viewing projects and repositories.
· Telegram or WhatsApp:
 o For quick communication.
· LinkedIn:
o For professional contacts.

Additional Elements:
· Interactive map showing location (if needed).
· Decorative image or graphic banner.

Integration of Studied Topics:

· HTML forms:
o Create forms using form-related tags.
· Form styling:
o Style input fields, buttons, and links with CSS hover effects.
· Validation:
o Use HTML attributes to check filled fields.
· Responsiveness:
o Adapt forms and contact information for different devices using media
queries.

Technical Requirements:
· Correct form layout with required fields.
· Interactive buttons and links styled with CSS.
· Field validation using the required attribute.
· Responsive form layout using media queries.

Final Result
After completing the project, the student will create a complete multi-page portfolio
demonstrating their knowledge and skills in web development.

This project reinforces HTML and CSS knowledge, teaches how to organize web
page structures, design interfaces using modern approaches, and create responsive
websites for different devices.

During the portfolio project, the student will learn:

· Correct use of semantic HTML markup, headings, lists, tables, navigation

elements, and forms.
· CSS styling including:

o Fonts
 o Colors
o Background images
o Shadows
o Gradients
o Animations

· Creating flexible responsive layouts using:

o CSS Grid
o Flexbox

· Creating interactive elements:

o Dropdown lists
o Animated cards
o Buttons with hover effects

· Creating feedback forms with field validation.

· Organizing content as:

o Cards
o Lists
o Image galleries
o Tables

· Working with media queries to make websites comfortable on mobile devices.

Final portfolio pages:

· Home page showing the student, their programming philosophy, and
personal motivation.
· Programming languages section showing:

o Popular languages
o Their usage areas
o Companies using them
o Examples of software written with them

· Blog section containing useful materials for beginner programmers:

o Articles
o Books
o Courses
o YouTube channels
o Other resources
 · Projects section containing:
o Project descriptions
o Screenshots
o Technologies used
o Links to finished projects

· Contact page containing:

o Feedback form
o Social media links
o Additional interactive elements

This project helps the student not only improve technical skills but also prepare a
professional portfolio that can be used for first freelance orders, interviews, or
further development, including moving to platforms like Tilda.