📄 1/3 100+ FREE Resources Every Web Developer Must Try

#frontend #info

FREE Resources to Learn Web Development 🔥

Websites: freeCodeCamp, MDN Web Docs, W3Schools, Scrimba, Codecademy, TheOdinProject, Frontend Mentor, Javascript30, Coursera, Khan Academy

YouTube Channels: Traversy Media, The Net Ninja, Code with Harry (Hindi), Web Dev Simplified, Coder Coder, The Coding Train, FreeCodeCamp

FREE Hosting Platforms for Your Websites 🔥

— Netlify: Deploy your web projects with ease.
— Render: Host web applications and static sites effortlessly.
— GitHub Pages: Host your static websites directly from your GitHub repository.
— Firebase Hosting: Scale your web apps effortlessly with Firebase.
— Vercel: Deploy websites and applications with automatic deployments.
— Cyclic.sh: Host your static sites with zero configuration.
— Appwrite: Open-source backend server for web and mobile developers.
— Supabase: Build modern apps with a scalable backend.
— InfinityFree: Free and unlimited web hosting with PHP, MySQL, and more.
— Surge: Static web publishing for front-end developers.

FREE APIs for Your Projects 🔥

— OpenWeatherMap API: Access current weather data for any location.
— News API: Retrieve live news articles from various sources.
— REST Countries API: Get information about countries worldwide.
— Chuck Norris Jokes API: Lighten up your projects with Chuck Norris jokes.
— Open Food Facts API: Access food product information and ingredients.
— Reddit API: Fetch Reddit data, including posts and comments.
— OneDrive API: Manage files and folders on Microsoft OneDrive.
— Dogs API: Bring adorable dog images and information to your projects.
— GIPHY API: Integrate GIFs and stickers into your applications.
— OMDb API: Access a database of movies and TV shows.
— VirusTotal API: Analyze suspicious files and URLs for malware.
— PokeAPI: Retrieve Pokémon data for your gaming-related projects.
— NASA API: Access a wealth of NASA data, including imagery and information.

📄 2/3 100+ FREE Resources Every Web Developer Must Try

#frontend #info

FREE Sites for Vectors, Images, and Illustrations 🔥

— Freepik: Discover free vectors, photos, PSDs, and icons.
— Vecteezy: Find high-quality vector art, graphics, and illustrations.
— Unsplash: Access over a million free high-resolution photos.
— Pixabay: Explore a vast library of free images and videos.
— Flaticon: Download free icons, SVG, PSD, PNG, EPS format, or as ICON FONT.
— Openclipart: Share and use free clipart and images.
— SVGRepo: Download SVGs for free.
— Vectorportal: Free vectors, clip art, and icons.
— SVGBackgrounds: Customizable SVG patterns and backgrounds.
— FreeDesignFile: High-quality graphic design resources.
— Pexels: Find free stock photos and videos shared by talented creators.
— Vectorian: Download royalty-free vector art, stock photos, and stock footage.

FREE Icons for Your Projects 🔥

FontAwesome, Flaticon, Iconfinder, Material Icons, Icons8, BoxIcons, Feather Icons, IcoFont, SVGHUB, Tabler Icons, Iconsmind, Iconmonstr, SVGRepo

FREE Fonts for Your Projects 🔥

Google Fonts,1001FreeFonts, Fontjoy, Fontsly, FontSpace, AbstractFonts, FontZone, DevFonts, DaFont, FontSquirrel, FontFabric

FREE Cheat Sheet Sites🔥

— HTML Cheat Sheet: Quick reference guide for HTML elements and attributes.
— CSS Cheat Sheet: Comprehensive guide to CSS properties and selectors.
— JavaScript Cheat Sheet: Handy reference for JavaScript syntax and concepts.
— Git Cheat Sheet: Essential commands and workflows for Git.
— Markdown Cheat Sheet: Markdown syntax guide for creating rich text formatting.
— React Cheat Sheet: Quick overview of React concepts and syntax.
— Learn x in y minutes: Concise tutorials to learn various programming languages and tools quickly.
— SQL Cheat Sheet: Comprehensive SQL commands and queries reference.
— OverAPI: Collection of cheat sheets for various programming languages and frameworks.

📄 3/3 100+ FREE Resources Every Web Developer Must Try

#frontend #info

FREE Sites for HTML/CSS Templates 🔥

HTML5UP, HTMLRev, Free-CSS, Templated, FreeHTML5, Start, Bootstrap, Bootswatch, BootstrapTaste, Cruip, Tooplate, HTML5xCSS3

Learn CSS by Playing Games 🔥

CSS Diner: Practice CSS selectors with a fun game.
Flexbox Froggy: Learn CSS Flexbox by playing this game.
Grid Garden: Master CSS Grid layout by playing this game.
Flexbox Defense: A game to learn CSS Flexbox.
CSSBattle: Compete against others by writing CSS code.
Flexbox Zombies: Learn CSS Flexbox by playing this game.

FREE Code Editors 🔥

— Visual Studio Code (VS Code)
— Sublime Text
— Brackets
— Vim

JavaScript Animation Libraries 🔥

— Anime.js: Lightweight JavaScript animation library.
— ScrollReveal.js: Easily reveal elements as they enter the viewport.
— Popmotion: A functional, flexible JavaScript motion library.
— AniJS: Declarative handling library for CSS animations.
— Wow.js: Reveal CSS animation as you scroll down a page.
— Typed.js: A JavaScript library that types.
— Velocity.js: Accelerated JavaScript animation.
— GSAP: Professional-grade animation for the modern web.

📄 Customizable Angular animations

#angular #animations #ui_element

...A component with customizable animations might look like this...

// collapse.ts

const closedStyle = style({ 
  height: 0 
});

const openStyle = style({ 
  height: '*' 
});

const timings = '{{duration}}ms linear';

const defOptions: AnimationOptions = { 
  params: { 
   duration: 300 
  } 
};

export const collapse = trigger('collapse', [
  transition(
    ':enter',
    animation([closedStyle, animate(animateTimings, openStyle)]),
    defaultOptions
  ),
  transition(
    ':leave',
    animation([openStyle, animate(animateTimings, closedStyle)]),
    defaultOptions
  ),
]);

// bonus.component.ts

@Component({
  animations: [collapse],
  host: {
    '[@collapse]': 'animationOptions',
  },
})
export class BonusComponent implements OnInit {
  @Input() public duration = 300;
  public options!: IAnimationOptions<string>

  public ngOnInit(): void {
    this.options = {
      value: '_',
      params: { 
         duration: this.duration 
      },
    };
  }
}

✅ Article link

📄 Angular Named Router Outlets

#angular #router #outlets

<!-- wrapper-layout.component.html -->

 <div class="container">
    <div class="row">
        <div>
            <left-side></left-side>
        </div>
        <div>
            <router-outlet 
                name="showright"
            ></router-outlet>
        </div>
    </div>
</div>

/** routing.module.ts */

{
    path: 'connect',
    component: WrapperLayoutComponent,
    children: [
       { 
           path: '', 
           component: RightSideComponent,
           outlet: 'showright'
       },
    ]
 },

// component navigation action

this.router.navigate([
    '/connect', 
    { outlets: { showright: ['user-info'] } }
]);

✅ Article link