NTI Web Design Training

Overview

This repository contains all the materials, tasks, and additional challenges completed during the NTI Web Design training program. It includes bonus tasks that go beyond the core curriculum, showcasing advanced skills and a thorough understanding of web design concepts.

Contents

• Materials: A comprehensive collection of presentations, resources, and notes used throughout the training.
• Tasks: Real-world application of skills learned, designed to solidify core concepts.
• Bonus Tasks: Optional tasks that challenge you to push beyond the basics and explore advanced design and development techniques.
• Recommended Chrome Extensions: Essential tools for enhancing productivity and efficiency in web design.
• Recommended VS Code Extensions: Visual Studio Code tools that streamline and optimize your development workflow.
• Useful Resources: A curated list of helpful web design and development resources.

Training Focus

The NTI Web Design training program focused on the following areas:

• HTML: Structuring web pages with semantic and accessible markup.
• CSS: Styling, layout, and advanced techniques for responsive design.
• Responsive Design: Building websites that adapt seamlessly to various screen sizes and devices.
• JavaScript: Introducing interactivity and dynamic content to websites.

Recommended Chrome Extensions

Boost your web design process with these recommended Chrome extensions:

• CSS Peeper: Visual tool for inspecting website styles.
• ColorZilla: Easily pick and copy colors from any website.
• Measure Everything: Measure dimensions of elements on web pages.
• Check Responsive: Test your website’s responsiveness across various devices.

Recommended VS Code Extensions

Improve your coding experience with these useful VS Code extensions:

• Code Spell Checker

  • ID: streetsidesoftware.code-spell-checker
  • Description: Checks spelling within source code.
  • Publisher: Street Side Software

• Error Lens

  • ID: usernamehw.errorlens
  • Description: Enhances visibility of errors and warnings in the editor.
  • Publisher: Alexander

• Image Preview

  • ID: kisstkondoros.vscode-gutter-preview
  • Description: Displays image previews within the editor.
  • Publisher: Kiss Tamás

• Live Server

  • ID: ritwickdey.LiveServer
  • Description: Launches a local server with live reloading for static & dynamic pages.
  • Publisher: Ritwick Dey

• Prettier - Code Formatter

  • ID: esbenp.prettier-vscode
  • Description: Formats code automatically for consistency.
  • Publisher: Prettier

Useful Resources

These valuable resources can assist in web design and development:

• DummyJSON: API for generating fake data, such as products or users, for testing purposes.
• Retool API Generator: Quickly generate APIs from any data source.
• Freepik: Find free images, icons, vectors, and graphic resources for your design needs.
• Color Hunt: A curated collection of color palettes for design inspiration.
• Can I use: Check cross-browser support for HTML, CSS, and JavaScript features.
• Pattern Monster: Create custom patterns for website backgrounds.
• Uiverse: Access open-source UI elements and components for designers and developers.
• Happy Hues: A color palette tool based on color psychology.

Conclusion

This repository serves as a complete showcase of all the tasks, challenges, and additional resources from the NTI Web Design training. Explore the materials, try out the bonus tasks, and utilize the recommended tools and extensions to further develop your web design skills.