Skip to content

Latest commit

 

History

History
98 lines (59 loc) · 1.93 KB

README.md

File metadata and controls

98 lines (59 loc) · 1.93 KB

HTML and CSS Knowledge and Notes

Important Design Rules

7 Steps to a great Website

Omnifood Project

Example

This project is based on the "Build Responsive Real-World Websites with HTML and CSS" course by Jonas Schmedtmann. To learn frontend development I adapted the project that it is completely build with Vue and TailwindCSS.

It is a plain Single Page Application without any Backend functionality, and not the peak of software engineering.

The main goal of this project for me was to build a modern website while learning new technologies. To checkout the whole website execute following steps:

  1. clone this repository
    git clone https://github.com/fgeck/html-css-good2know.git
  1. change into omnifood-project directory
cd omnifood-project
  1. install dependencies
    npm install
  1. run the application
    npm run dev
  1. navigate to http://localhost:5173/

Click Here to see the source code

Open Todos

  • responsive for mobile devices
  • on SPA navigation with effects

Reusable Vue Components created with Vue and TailwindCSS

Accordion

Preview file


Carousel

Preview file


Table

Preview file


Pagination

!! Needs some rework:

  • dynamically change displayed pages
  • re-render on change

Preview file


Hero Section

Peview file


Email App Layout (just for training purposes)

Preview file