GenAI for Front-End Developers

This repository contains the lessons I learn through this Coursera course. Read more details about the course here.

• Instructors: Karlis Zars, Starweaver Instructor Team
• Offered By Coursera instrctor network

Course Roadmap

• Introduction to GenAI for Front End Developer
• GenAI and Front End Developer: Glossary
• History & Background for GenAI and Front End Developer
• Demo for UI Design with GenAI Tools
• Demo for Code Generation with GitHub Copilot
• Remediating Risks and Ethical Concerns
• Demo for Building a Responsive Web-Page with ChatGPT-4
• Demo for Automated Testing with GenAI
• Practice Project for Front End Developers
• Assessment for Front End Developers
• Closing Thoughts: What's Next

Exercices

Design Challenge

Scenario: You are a designing a new music streaming app. The home screen should feature trending songs, personalized playlists, and a search bar.

Task:

• Generate an initial home screen design for the music streaming app. View the home screen.
• Create at least 2 variations of the design.
• Tailor one of the designs for a different theme (e.g., podcast-focused). View the design iterations for Music Streaming app

Open Ended Questions:

1. How would you enhance the AI-generated design to align with your unique creative vision?

   A: I would give small and simple intructions to GenAI to fix minor things for me. I prefer using Google Stitch and I copy the designs to Figma where I can modify those according to my taste.

2. What additional features might improve the user experience of the music streaming app?

   A: AI integrated voice and image searches can enhance user experience by making it easy to find songs by recording background music or scanning album covers or lyrics.

Coding Challenge

Scenario: You are adding a feature to a web app that displays a modal window when a button is clicked. The modal should close when the user clicks outside of it or presses the "Esc" key.

Task:

• Generate a function to open and close the modal window.
• Implement the functionality to close the modal when clicking outside of it or pressing the "Esc" key.
• Integrate the generated code into your existing project and test it.

Open Ended Questions:

1. How would you enhance the AI-generated code to better fit your project requirements?

   A: I would review the code, understand its logic, and write brief meaningful comments around the code snippet.

2. What additional features might improve the user experience of the modal window?

   A: Some additional features that could improve the user experience of the modal window include:

   • Allowing the modal to be draggable or resizable.
   • Making the modal accessible by supporting keyboard navigation and screen readers.
   • Providing customizable buttons (e.g., "Cancel", "Confirm") and supporting callback functions.
   • Adding smooth open/close animations for better visual feedback.
   • Preventing background scrolling when the modal is open.
   • Supporting focus trapping to keep keyboard focus within the modal.
   • Offering responsive design so the modal works well on all devices.

Responsive Webpage Showcase (Optional)

• Please refer to the README.md file in the peer-graded-assignment/ directory for detailed instructions on how to complete this assignment.
• Project Demonstration:

  

• Check out the live preview here.

Testing Challenge

Scenario: You are testing a web application's registration form. The form includes fields for username, email, password, and password confirmation. Ensure that all fields are validated correctly, and appropriate error messages are displayed.

Task:

• Generate test scripts for the registration form validation.
• Refine the test scripts to cover edge cases (e.g., mismatched passwords, empty fields).
• Integrate the generated scripts into your existing testing framework and execute them.

Open Ended Questions:

1. How would you enhance the AI-generated test scripts to better fit your project requirements?

   A: I would review those scripts and add more specific test cases such as the email pattern validation, password strength validation, and ensuring that the error messages are user-friendly and informative.

2. What additional test cases might improve the test coverage of the registration form?

   A: Additional test cases could include:

   • Testing for SQL injection or other security vulnerabilities.
   • Verifying that the form behaves correctly with various input types (e.g., special characters, long strings).
   • Ensuring that the form is accessible (e.g., keyboard navigation, screen reader compatibility).

License

This repository is licensed under the MIT License.