This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: GitHub code solution URL
- Live site Url : Vercel QR code app
- Mobile Home page
- Mobile Sidebar
- Mobile Sidebar active options
- Desktop Home page
- Desktop topbar active option
-
Creating a Click Outside Directive in Angular:
- Implemented a click outside directive within Angular to facilitate the closing of modal windows, tooltips, or dropdown menus.
- Linked the directive to the HTML tag to ensure that clicking outside the designated area triggers the closing action.
- Ensured that clicking within the designated area keeps the component open.
-
Utilizing '@angular/animations' for Basic Animations:
- Learned to integrate '@angular/animations' to animate sidebar actions in TypeScript.
- Manipulated the opacity of a layer using triggers, states, transitions, and animations.
- Implemented animations for opening and closing actions, enhancing user experience and interface interactivity.
-
CSS Transformations and Animations:
- Refreshed understanding of CSS transformations for manipulating the positioning of HTML elements at various keyframes.
- Employed CSS animations to define animation properties, enabling keyframes to animate according to specified parameters.
- By mastering these techniques, I've enhanced my ability to create dynamic and interactive user interfaces within Angular applications.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- @media
- @angular/animations
- @KeyFrame
- Angular
- Github Profile: Kennedy-was-taken
- Frontend Mentor : @Kennedy-was-taken