alura-7DaysOfCode-landing-page

#7DaysOfCode

Seven challenges. In the technology you are learning. Practice, study and show your portfolio.

About The Project

One of the most common tasks for Front-end Devs is to implement a UX Design in components. Or, simplifying: Crop a Figma and implement it in your React. Yes. Everyone who develops for Front-end and React ends up experiencing this. The big challenge is to maintain the harmony between the thinking of those who carry out the design and those who develop the code. It needs to have a clean and clear structure. And the best way to win a challenge is, of course, studying, thinking and practicing!

Feel free to:

day [01/07]
The first challenge of #7DaysOfCode will be to take Figma from a project and implement two components. Write the application menu component and the newsletter subscription component. Both are composed of other parts and, so that your code doesn’t get messed up, the suggestion is: separate the application into more than two components.

Built With

This section list any major frameworks/libraries used in your project.

Getting Started

These instructions provide a clear and simple step-by-step, which is intended to help users understand accessing and configuring your app.

Clone the repo

git clone https://github.com/cristianmeelo/alura-7DaysOfCode-landing-page

Install NPM packages
```
npm install
```
Run project
```
npm run dev
```

🚧 Under construction 🚧

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

import React from 'react';

function MeowComponent() {
  return (
    <div>
      <h1>Meow</h1>
    </div>
  );
}

export default MeowComponent;

🚧 Under construction 🚧

Project Tree

This topic is quite optional, but one that I personally find very interesting. I use the project-tree by zhucy extension in vscode, it automatically generates your project structure!

project-name
├─ README.md
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│  └─ vite.svg
├─ src
│  ├─ App.css
│  ├─ App.jsx
│  ├─ assets
│  │  ├─ black.png
│  │  └─ white.png
│  ├─ components
│  │  ├─ Footer.jsx
│  │  └─ Navbar.jsx
│  ├─ index.css
│  ├─ main.jsx
│  └─ routes
│     ├─ Contact.jsx
│     └─ Home.jsx
└─ vite.config.js

🚧 Under construction 🚧

Acknowledgments

Use this space to list resources you find helpful and would like to give credit to. I’ve included a few of my favorites to kick things off!

.

.

.

.

with ❤️

Cristian Melo

View Source Code

Post Views: 54