front-end-projects

Front-End Projects with HTML, CSS and Javascript

Collection of front-end projects developed by HTML, CSS and JS.

Notes:

• Projects are ordered from simple to complex.
• At the bottom of each project, there are summary of a few sentences and special topics about the content of the project.

Projects:

1. Cat Photo App
2. Cafe Menu
3. Digital Clock
4. Multiplication App
5. Button Ripple Effect
6. Real-time Character Counter
7. Sticky Navbar
8. Random Color Generator
9. Heart Trail Animation
10. Video Trailer Popup
11. Blurred Background Popup
12. Image Scroll Effect
13. Drum Kits
14. Seat Reservation
15. Random Photos
16. Image Slider
17. Dark Mode Toggle
18. Auto Text Effect Animation
19. Tabs Section
20. Result Summary Component
21. Hoverboard App
22. User Filter App
23. Quiz App
24. Todo List

---

Cat Photo App

A simple and interactive cat-themed site developed with HTML.

Online Demo

Special topics covered:

HTML

• Figure
• Figcaption
• Form
• Fieldset
• Legend
• Label
• Input
• Button

---

Cafe Menu

A simple cafe menu site developed with HTML and CSS.

Online Demo

Special topics covered:

CSS

• Margin
• Padding
• Text-align
• Border
• Display
• Width / Height

---

Digital Clock

A digital clock site developed with HTML, CSS and Javascript.

Online Demo

Special topics covered:

CSS

• Span
• Flex
• Align-items
• Justify-content
• Overflow
• Text-transform
• Letter-spacing
• Position
• Text-shadow

JS

• Document.getElementById()
• Date()
• InnerText
• SetTimeout()

---

Multiplication App

A site for kids that calculates the product of two numbers, developed with HTML, CSS and Javascript.

Online Demo

Special topics covered:

HTML

• Form
• Input / autofocus
• Input / autocomplete
• Submit Button

CSS

• ::placeholder
• :hover
• Filter
• Cursor

JS

• Math.Random()
• Math.ceil()
• localStorage.getItem()
• localStorage.setItem()
• JSON.parse()
• JSON.stringify()
• addEventListener()

---

Button Ripple Effect

A ripple effect design on hover for buttons, developed with HTML, CSS and Javascript.

Online Demo

Special topics covered:

CSS

• ::before
• Text-decoration
• var()
• translate()
• Transition
• Z-index

JS

• Mouseover Event
• event.pageX
• event.pageY
• offsetLeft
• offsetTop
• style.setProperty()

---

Real-time Character Counter

A limited-character text area developed with HTML, CSS and Javascript.

Online Demo

Special topics covered:

HTML

• Textarea
• Textarea / maxlength

CSS

• Resize
• Box-sizing
• Box-shadow

JS

• Keyup Event
• getAttribute()

---

Sticky Navbar

#

Online Demo

Special topics covered:

#

---

Random Color Generator

#

Online Demo

Special topics covered:

#

---

Heart Trail Animation

#

Online Demo

Special topics covered:

#

---

Video Trailer Popup

#

Online Demo

Special topics covered:

#

---

Blurred Background Popup

#

Online Demo

Special topics covered:

#

---

Image Scroll Effect

#

Online Demo

Special topics covered:

#

---

Drum Kits

#

Online Demo

Special topics covered:

#

---

Seat Reservation

#

Online Demo

Special topics covered:

#

---

Random Photos

#

Online Demo

Special topics covered:

#

---

Image Slider

#

Online Demo

Special topics covered:

#

---

Dark Mode Toggle

#

Online Demo

Special topics covered:

#

---

Auto Text Effect Animation

#

Online Demo

Special topics covered:

#

---

Tabs Section

#

Online Demo

Special topics covered:

#

---

Result Summary Component

#

Online Demo

Special topics covered:

#

---

Hoverboard App

#

Online Demo

Special topics covered:

#

---

User Filter App

#

Online Demo

Special topics covered:

#

---

Quiz App

#

Online Demo

Special topics covered:

#

---

Todo List

#

Online Demo

Special topics covered:

#

---