Code Monkey home page Code Monkey logo

t4rum / sc-css Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 4.88 MB

Este repositório contém os códigos das aulas de CSS do Bootcamp React Fullstack TNT, projetado para demonstrar a aplicação prática de estilos e layout em projetos React. O repositório inclui exemplos de uso de CSS para criar interfaces de usuário visualmente atraentes e responsivas, utilizando técnicas como Flexbox, Grid Layout e estilização avança

HTML 58.75% CSS 32.62% JavaScript 8.63%
bootstrap css3 design-ui html5 javascript reactjs web-design

sc-css's Introduction

Repositório de Aulas de CSS - Bootcamp React Fullstack TNT

Este repositório contém os códigos das aulas de CSS do Bootcamp React Fullstack TNT. O projeto visa demonstrar a aplicação de técnicas de estilização e layout em projetos React, utilizando diversas abordagens de CSS para criar interfaces atraentes e funcionais.

Estrutura do Projeto

O projeto é composto pelos seguintes componentes principais:

  • Navbar: Um componente de navegação no topo da página, estilizado para oferecer uma experiência de usuário intuitiva.
  • BlogContent: Componente para exibir postagens de blog, com um layout flexível para imagem e texto.
  • Footer: Componente de rodapé que fornece informações de direitos autorais e é fixado na parte inferior da página.
  • Media: Componente para exibir tabelas com notas de alunos e calcular médias, aplicando estilização condicional para aprovação e reprovação.
  • Produtos: Componente para exibir produtos com preços e descontos, com estilização para destacar informações importantes.

Tecnologias Utilizadas

  • React: Biblioteca JavaScript para construir interfaces de usuário.
  • CSS: Folhas de estilo em cascata para estilização e layout dos componentes.
  • Vite: Ferramenta de construção rápida para desenvolvimento com React.

Componentes

Navbar

O componente Navbar oferece um menu de navegação no topo da página, utilizando Flexbox para o alinhamento dos itens e garantindo um design responsivo.

BlogContent

O componente BlogContent exibe uma postagem de blog, incluindo uma imagem e texto formatado. O layout é ajustado para criar uma apresentação visual agradável.

Footer

O Footer é um componente simples de rodapé, que fornece informações de direitos autorais e é fixado na parte inferior da página.

Media

O componente Media exibe uma tabela com as notas dos alunos, calculando a média e utilizando estilização condicional para destacar aprovações e reprovações.

Produtos

O Produtos é um componente que mostra produtos com preços e descontos, aplicando estilos para distinguir entre produtos com desconto e sem desconto.

Como Rodar o Projeto

  1. Clone o repositório:
    git clone <URL_DO_REPOSITORIO>
    
  2. Navegue para o diretório do projeto:
    cd <NOME_DO_DIRETORIO>
    
  3. Instale as dependências:
     npm install
    
  4. Inicie o servidor de desenvolvimento:
     npm run dev
    

Contribuições

Se você deseja contribuir para o projeto, sinta-se à vontade para abrir uma issue ou enviar um pull request. Qualquer melhoria ou correção é bem-vinda!

Licença

Este projeto está licenciado sob a Licença MIT.

sc-css's People

Contributors

t4rum avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.