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.
- Cat Photo App
- Cafe Menu
- Digital Clock
- Multiplication App
- Button Ripple Effect
- Real-time Character Counter
- Sticky Navbar
- Random Color Generator
- Heart Trail Animation
- Video Trailer Popup
- Blurred Background Popup
- Image Scroll Effect
- Drum Kits
- Seat Reservation
- Random Photos
- Image Slider
- Dark Mode Toggle
- Auto Text Effect Animation
- Tabs Section
- Result Summary Component
- Hoverboard App
- User Filter App
- Quiz App
- Todo List
A simple and interactive cat-themed site developed with HTML.
Special topics covered:
- Figure
- Figcaption
- Form
- Fieldset
- Legend
- Label
- Input
- Button
HTML
A simple cafe menu site developed with HTML and CSS.
Special topics covered:
- Margin
- Padding
- Text-align
- Border
- Display
- Width / Height
CSS
A digital clock site developed with HTML, CSS and Javascript.
Special topics covered:
- Span
- Flex
- Align-items
- Justify-content
- Overflow
- Text-transform
- Letter-spacing
- Position
- Text-shadow
CSS
- Document.getElementById()
- Date()
- InnerText
- SetTimeout()
JS
A site for kids that calculates the product of two numbers, developed with HTML, CSS and Javascript.
Special topics covered:
- Form
- Input / autofocus
- Input / autocomplete
- Submit Button
HTML
- ::placeholder
- :hover
- Filter
- Cursor
CSS
- Math.Random()
- Math.ceil()
- localStorage.getItem()
- localStorage.setItem()
- JSON.parse()
- JSON.stringify()
- addEventListener()
JS
A ripple effect design on hover for buttons, developed with HTML, CSS and Javascript.
Special topics covered:
- ::before
- Text-decoration
- var()
- translate()
- Transition
- Z-index
CSS
- Mouseover Event
- event.pageX
- event.pageY
- offsetLeft
- offsetTop
- style.setProperty()
JS
A limited-character text area developed with HTML, CSS and Javascript.
Special topics covered:
- Textarea
- Textarea / maxlength
HTML
- Resize
- Box-sizing
- Box-shadow
CSS
- Keyup Event
- getAttribute()
JS
#
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
##
Special topics covered:
#