Skip to content

Collection I created while doing a HTML CSS course on Udemy. Including reusable Vue Components.

Notifications You must be signed in to change notification settings

fgeck/html-css-good2know

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Collection I created while doing a HTML CSS course on Udemy. Including reusable Vue Components.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published