This repository contains a few web UI practices based on the tutorial ASMR Web Design Bootcamp on YouTube channel AsmrProg, each focusing on different aspects of modern web design. Below is a brief introduction to each task along with the corresponding GitHub repository links.
Signup UI #1 Code | Demo | NoteCreate a visually appealing and responsive signup page using CSS techniques such as grid layout, background animations, and element positioning with pseudo-elements like ::after for additional design elements.
2
Login UI #1 Code | Demo | NoteCreate a visually appealing and responsive login page featuring smooth transitions and hover effects, as well as consistent and user-friendly form styling.
3
Responsive Sidebar Code | Demo | NoteCreate a responsive sidebar that can be toggled open and closed using JavaScript and CSS transitions, styled buttons for a user-friendly interface, and integrated icons using Boxicons to enhance the visual appeal.
4
Responsive Navbar Code | Demo | NoteUse CSS to style the navbar, buttons, and overlay with properties like position, z-index, visibility, opacity, and transition for smooth animations, and implemented JavaScript to toggle the menu's visibility, enhancing interactivity.
5
Popup Modal Code | Demo | NoteImplement a popup modal using a JavaScript function (toggleModal) to toggle specific classes (open and closed) that control the visibility and opacity of the modal and its background.
6
Widget #1 Code | Demo | NoteUse HTML radio buttons and labels to create tabbed navigation, use CSS variables for consistent styling, and implement CSS transitions for smooth animations.
7
Login UI #2 Code | Demo | NoteCreate a login UI, specifically focusing on styling input fields with hover and focus effects, and the CSS tip of using background-image with radial-gradient to create a dynamic and colorful background.
8
Resizable Footer Code | Demo | NoteCreate a responsive footer using the CSS resize property for resizable containers, Flexbox and Grid layouts for flexible and efficient content organization, and integrating Remixicon for enhanced visual appeal.
N/A
9
Instagram Sidebar Code | Demo | NoteCreate a responsive Instagram-style sidebar, utilize CSS Flexbox, specifically the flex-grow property, to control the size of sidebar items dynamically, and style a visually appealing badge on icons using CSS positioning.
10
Gmail Navbar Code | Demo | NoteDevelop a responsive Gmail-style navbar with toggle functionality using simple JavaScript for smaller screens. Utilize CSS flexbox techniques extensively.
11
Dot Pagination Code | Demo | NoteBuild a simple pagination with HTML & CSS
