'Mesto' (Place') interactive web page student project for Yandex.Practicum
Mesto.mov
This project is an nteractive gallery where users can share photos. This is a student project created during multiple sprints (4-9 sprints) of a web development course of Yandex Practicum. Trhoughtout these sprints, different layers of functionality were added to the project. The main concepts and techs I practiced working on the project: advanced features of HTML and CSS, Asynchronous JavaScript, OOP, Fetch API, form data validation. The data is loaded from and onto external API provided by Yandex.
- Add new cards;
- Delete cards created by the user;
- "Like" and "dislike" photos;
- Expand the photos by clicking on them (pop-up shows up)
- Close the picture popup by clicking on "X", area outside of the photo or ESC button;
- Editing user profile information including name, description and avatar;
- Form validation on the client side;
- Communication with external API to fetch and patch/delete data
- Adaptive layout using flexbox and grid positioning;
- Nested file structure according to BEM methodology;
- JavaScript (Asynchronous JS, OOP, DOM API, Fetch API);
- Client-side form validation;
- Git;
- Webpack;
- Figma
git clone https://github.com/AnastasiiaUferova/mesto.git
cd mesto
npm i webpack --save-dev
npm run build
npm run dev
In the subsequent sprints the project was refactored using React.js.