Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mateusadada/imersao-front-end-alura
First immersion Front-End - Alura
https://github.com/mateusadada/imersao-front-end-alura
alura angular css3 front-end html5 imersao-alura imersaofrontend immersion javascript js react spotify
Last synced: 22 days ago
JSON representation
First immersion Front-End - Alura
- Host: GitHub
- URL: https://github.com/mateusadada/imersao-front-end-alura
- Owner: mateusadada
- License: mit
- Created: 2024-01-23T17:49:10.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-07-24T11:38:47.000Z (6 months ago)
- Last Synced: 2024-07-25T12:37:14.716Z (6 months ago)
- Topics: alura, angular, css3, front-end, html5, imersao-alura, imersaofrontend, immersion, javascript, js, react, spotify
- Language: HTML
- Homepage: https://primeira-imersao-front-end-alura.vercel.app/
- Size: 971 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
First immersion Front-End - Alura
Recreating Spotify's homepage
## 📜 Table of contents
- [Starting](#-starting)
- [Features](#-features)
- [Built with](#️-built-with)
- [Author](#️-author)
- [License](#-license)
## 🚀 Starting
This repository hosts [the final project](https://mateusadada.github.io/imersao-front-end-alura/) of the Front-End Immersion promoted by [Alura](https://www.alura.com.br/). The project consists of creating a website inspired by the visual of [Spotify's homepage](https://open.spotify.com/), a music streaming platform. Using HTML, CSS, and JavaScript, the project aims to develop skills in creating complex layouts with CSS Grid, implementing responsiveness with media queries, and manipulating the DOM to add interactivity to the page.
The main objective is to enhance knowledge in web development, applying concepts learned in the immersion classes. The website features functionalities such as artist search and playlist display, using a fake API created with the help of json-server.
## 📚 Features
Used during the evolution of the website:
- Implementation of a layout inspired by the visual of Spotify, with a sidebar navigation and a main content section.
- Implementation of media queries to make the website responsive on different screen sizes.
- Use of icons from the Font Awesome library to add stylized icons to the elements of the website.
- Organization of the code into separate files, such as HTML, CSS, and JavaScript, to facilitate code maintenance and readability.
- Display of information about searched artists, such as name and image, using JavaScript and DOM manipulation.
## 🛠️ Built with
* [HTML5](https://en.wikipedia.org/wiki/HTML5) - Used to structure the page content, defining the elements and their hierarchical organization.
* [CSS3](https://en.wikipedia.org/wiki/CSS) - Employed to style and visually enhance HTML elements, such as colors, fonts, sizes, positioning, and animations.
* [JavaScript](https://en.wikipedia.org/wiki/JavaScript) - Utilized to add interactivity to the page, allowing manipulation of the DOM, creation of events, and execution of functions.
* [json-server](https://www.npmjs.com/package/json-server) - Tool to create a fake API and simulate data consumption.
## ✒️ Author
* **Mateus Adada** - *Developer and documentation* - [mateusadada](https://github.com/mateusadada)
You can also see the list of all [collaborators](https://github.com/mateusadada/imersao-front-end-alura/graphs/contributors) who participated in this project.
## 📄 License
This project is under the license MIT. See the [LICENSE.md](https://github.com/mateusadada/imersao-front-end-alura/blob/main/LICENSE) file for more details.
Developed with ❤️ in Brazil 🇧🇷