https://github.com/zolppy/tailwind-challenge

Desafio de implementação de uma página web estática (não é necessário o uso de JavaScript) para prática e aperfeiçoamento de habilidades no uso do framework Tailwind CSS.
https://github.com/zolppy/tailwind-challenge

challenge drink food framework frontend restaurant tailwindcss web website

Last synced: about 1 year ago
JSON representation

Desafio de implementação de uma página web estática (não é necessário o uso de JavaScript) para prática e aperfeiçoamento de habilidades no uso do framework Tailwind CSS.

• Host: GitHub
• URL: https://github.com/zolppy/tailwind-challenge
• Owner: zolppy
• Created: 2024-10-30T22:44:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-05T17:48:23.000Z (over 1 year ago)
• Last Synced: 2025-02-09T16:22:49.387Z (about 1 year ago)
• Topics: challenge, drink, food, framework, frontend, restaurant, tailwindcss, web, website
• Homepage:
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  
Desafio de Tailwind CSS: Página de Menu de Restaurante

  
Consiste de um desafio de implementação de uma página web estática (não é necessário o uso de JavaScript) para prática e aperfeiçoamento de habilidades no uso do framework Tailwind CSS.



Requisitos Mínimos



  
A página deverá ser responsiva a dispositivos desktop e mobile;

  
Dever-se-á fazer uso somente de Tailwind CSS, no tocante à estilização;

  
O HTML deve ser semântico (uso de tags semânticas);

  
A página deverá conter pelo menos duas seções, seção de pratos e seção de contato;

  
O site deverá ser SPA (Single Page Application), ou seja, de uma única página;

  
Deverá haver um cabeçalho (header) fixo, com pelo menos links para cada seção descrita anteriormente, logo e nome do site;

  
A seção de pratos deverá conter os tipos de pratos: entradas, pratos principais, sobremesas e bebidas, com pelo menos três itens em cada tipo;

  
Rodapé (footer) com pelo menos o link para o repositório do projeto no GitHub;

  
O código deverá estar organizado (identação, sem espaços em branco desnecessários, mais de uma quebra de linha consecutivas...).



Obs.: não é necessário que o conteúdo da página, incluíndo imagens, seja real, poder-se-á utilizar "lorem ipsum" (conteúdo fictício, template), pois o foco maior está na interface.


Como Importar Tailwind CSS a uma página HTML, via CDN (Content Delivery Network)



Ao colar o código acima ao head da página, já será possível utilizar o framework.





  tailwind.config = {

    theme: {

      extend: {},

    },

    corePlugins: {

      preflight: true,

    },

  }





Esse segundo código é opcional, porém é fortemente aconselhável utilizá-lo, pois traz alguns benefícios a mais do framework, como o reset de estilos padrão, que podem variar em diferentes navegadores, por exemplo.


Como Utilizar Tailwind CSS

Com a tecnologia devidamente importada, bastará utilizar classes específicas a elementos HTML, de acordo com o que se desejar fazer, por exemplo:

<div class="flex flex-col flex-wrap"></div>


Produzirá exatamente o mesmo efeito que:


  

    div {

      display: flex;

      flex-direction: column;

      flex-wrap: wrap;

    }

  





Cheat Sheet do Tailwind CSS



  Link com exemplo de várias classes utilitárias do framework, divididas por

  seções: Tailwind Cheat Sheet