https://github.com/emeraldknight-sp/rocketseat-pinterest

Pinterest homepage clone made with Vanilla.js to learn how to manipulate the DOM tree.
https://github.com/emeraldknight-sp/rocketseat-pinterest

clone css font-awesome html ionicons javascript phosphor phosphor-icons phosphoricons pinterest

Last synced: about 2 months ago
JSON representation

Pinterest homepage clone made with Vanilla.js to learn how to manipulate the DOM tree.

• Host: GitHub
• URL: https://github.com/emeraldknight-sp/rocketseat-pinterest
• Owner: emeraldknight-sp
• License: mit
• Created: 2024-03-25T14:58:01.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-07-26T23:42:17.000Z (5 months ago)
• Last Synced: 2024-07-27T15:47:35.499Z (5 months ago)
• Topics: clone, css, font-awesome, html, ionicons, javascript, phosphor, phosphor-icons, phosphoricons, pinterest
• Language: JavaScript
• Homepage: https://rocketseat-pinterest.vercel.app
• Size: 912 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Rocketseat: Pinterest




  



This project is the clone of an already known application to work in practice with some initial concepts of HTML and CSS, it was a project worked on by Rocketseat to introduce fundamentals to newbies in programming where I wanted to insert a little JavaScript to manipulate the DOM tree and review how to dynamically insert elements using a programming language like JS.



  Technologies   |   

  Project   |   

  Layout   |   

  License



## 🔗 Links

[![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white)](https://instagram.com/davidalmeidadev)

[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://instagram.com/davidalmeidadev)

[![Brave](https://img.shields.io/badge/Portfolio-yellow?style=for-the-badge&logo=Brave&logoColor=white)](https://react-project-portfolio.vercel.app/)

[![Licence](https://img.shields.io/github/license/Ileriayo/markdown-badges?style=for-the-badge)](./LICENSE)

## 🚀 Tecnologies

This project was developed with the following technologies:

- HTML5, CSS3, JS ES6+

- [Phosphor Icons](https://phosphoricons.com/)

- [Ionic Icons](https://ionic.io/ionicons/usage)

- [Font Awesome Icons](https://fontawesome.com/)

## 💻 Project

In this simple project to create a simple and intuitive interface like Pinterest I used slightly advanced concepts such as Mobile First, I used CSS BEM conventions, in addition to HTML and CSS, and I also used JavaScript to dynamically add elements within of HTML by creating components, applying classes, effects and images.

Using the benefits of nomenclatures with CSS BEM, I was able to make the code more organized and semantic, easier to maintain and with Mobile First I created a simple structure to scale the application, making it also accessible between other devices such as cell phones, tablets and computers.

## 🏡 Get started

To start this project in your code editor, if it is VS Code, you must have the Live Server extension installed. But you can visit it in production [here](https://rocketseat-project-pinterest.vercel.app/).

## 🔖 Layout

You can view the project layout by clicking [here](https://br.pinterest.com/).



  



## 📝 License

This project is under the [MIT license](./LICENSE).