Project 3: Around The U.S.

Intro

Figma

Images

This project is made so all the elements are displayed correctly on popular screen sizes. Figma

The way you'll do this at work is by exporting images directly from Figma — we recommend doing that to practice more. Don't forget to optimize them here, so your project loads faster.

Good luck and have fun!

The "Around the U.S." web page is a simple, responsive webpage showcasing different locations. It utilizes BEM methodology for naming conventions in CSS, allowing for better maintainability and scalability of styles. Flexbox and Grids are employed to create a flexible and responsive layout.

index.html: The main HTML file that structures the content of the webpage. pages/index.css: The main CSS file containing styles for the entire webpage. images/: Directory containing images used in the project. card-images/: Directory containing images specific to the cards section.

The CSS file (pages/index.css) incorporates the following key features:

BEM Methodology: Follows the BEM (Block Element Modifier) naming convention for classes to improve code readability and maintainability.

Flexbox: Utilizes Flexbox for creating flexible and responsive page layouts.

Grids: Grid template is employed to control the layout of the main sections, such as the header, profile section, cards section, and footer.

The HTML file (index.html) is structured with semantic tags to enhance accessibility and SEO. The main sections include:

Header: Contains the site logo. Profile Section: Displays a profile image, information about the user (name, description), and buttons for editing and adding content. Cards Section: Features a list of cards, each showcasing an image and title, with a like button. Footer: Displays a copyright notice.

The script is designed for a photo-sharing platform where users can view, add, and edit photo cards. Modal interactions provide a user-friendly experience for profile editing, card addition, and image preview.

Link Please check out my projects here!: