An interactive web project showcasing modern web development techniques, responsive design, and object-oriented programming using HTML, CSS, and ES6 JavaScript classes.
- Modular CSS: Organized styles in the
blocks/
directory (e.g.,header.css
,popup.css
) - Responsive Design: Media queries ensure a smooth experience on both desktop and mobile devices.
- Object-Oriented JavaScript: Modern ES6 classes for improved code organization:
- The
Card
class handles card creation and functionality. - The
FormValidator
class manages form validation. utils.js
contains utility functions and configuration.index.js
orchestrates these components together.
- The
- Popup Functionality: Open and close profile editor and card creation forms.
- Form Validation: Real-time validation for all forms with visual feedback.
- Interactive Elements: Add cards, like cards, remove cards, and view enlarged images.
- Code Quality: Configured with Prettier (
.prettierrc
) and EditorConfig (.editorconfig
) for consistent styling.
- HTML: Core structure defined in
index.html
- CSS:
- Global styles in
pages/index.css
- Component styles in
blocks/
- Third-party styles in
vendor/
- Global styles in
- JavaScript:
- Entry point in
index.js
that coordinates components. Card.js
andFormValidator.js
contain the primary ES6 classes.utils.js
contains utility functions, initial card data, and configuration.
- Entry point in
- Assets: Organized images and fonts in the
images/
andvendor/fonts/fonts.css
directories.
- Clone the repository.
- Open using a live server (e.g., VS Code's Live Server extension) to ensure modules work correctly.
- Interact with the page to add cards, edit profile, and view images.
- HTML5 & CSS3
- JavaScript (ES6 Classes, Modules)
- Object-Oriented Programming
- BEM Methodology
- Responsive design
- Prettier, EditorConfig
Enio Borges