MS FE Dev C1 Foundations of Coding Front-End Flashcards
What is the primary focus of front-end engineering?
Creating the user interface and experience of websites and applications
What are the core responsibilities of a front-end engineer?
Developing and maintaining the parts of a website that users interact with directly
Which languages are fundamental for front-end engineers?
- HTML
- CSS
- JavaScript
What is the purpose of testing and debugging in front-end engineering?
Ensuring the code functions correctly across different devices and browsers
Name three types of tests conducted by front-end engineers.
- Unit tests
- Integration tests
- User interface tests
What is the role of collaboration in front-end engineering?
Working closely with back-end developers, UX/UI designers, project managers, and clients
What are frameworks and libraries used for in front-end engineering?
Streamlining the development process and managing complex applications
What tool is commonly used for version control in front-end development?
Git
What is the significance of testing frameworks in front-end development?
To write and run tests, ensuring that code performs as expected
What does effective workflow management in front-end projects involve?
- Project planning
- Development and integration
- Testing and quality assurance
- Deployment strategies
What is the first step in managing front-end development workflows?
Project planning
What strategies are used for deployment in front-end engineering?
- Continuous Integration (CI)
- Continuous Deployment (CD)
What is a best practice for task prioritization in front-end engineering?
Using project management tools like JIRA, Trello, or Asana
Why are code reviews important in front-end engineering?
They help identify errors early, improve code quality, and foster knowledge sharing
What methodologies can front-end engineers adopt to remain flexible?
Agile methodologies
What is front-end engineering?
A complex discipline that combines technical expertise, collaboration, and strategic workflow management.
Front-end engineering focuses on the client side of web development.
What are essential components for front-end engineers?
Essential skills, tools, best practices, and ongoing learning.
Mastery of these components leads to high-quality digital experiences.
What is a key outcome of mastering front-end engineering skills?
Creating innovative, high-quality digital experiences.
This outcome is crucial for user engagement and satisfaction.
Which phase of front-end project planning involves creating a schedule of tasks and milestones?
Creating timelines!
Creating timelines involves scheduling tasks and milestones, helping track progress, and setting expectations for project completion.
Which of the following tools is a project planning software that assists in the organization, management, and tracking of projects and tasks?Jira, Slack, Git Hub, VS Code
Jira
Jira is a project planning software that helps in organizing, managing, and tracking projects and tasks, making it an essential tool for project management.
Why is effective project planning crucial for front-end development projects?
It ensures timely delivery by defining clear goals, allocating resources, and tracking progress.
What are the key phases of project planning?
- Defining requirements
- Setting objectives
- Creating timelines
- Identifying resources
What is the primary focus of defining project requirements?
Clarifying the project’s scope by identifying specific outcomes and tasks.
What questions help clarify project requirements?
- What will the application do?
- Who are the end users?
How do objectives function in project planning?
They serve as actionable milestones that guide the project team.
What is the purpose of creating timelines in project planning?
To develop a schedule for tasks and milestones, ensuring timely completion.
What does identifying resources involve?
Determining the tools, technologies, and team members needed for project completion.
What is the benefit of proper resource allocation?
It minimizes risks such as shortages or budget overruns.
What is Jira?
A robust tool for managing complex projects that integrates with various applications.
Which applications can Jira integrate with?
- GitHub
- Visual Studio Code
- Slack
- Microsoft Teams
What is Trello primarily used for?
Visualizing tasks and tracking progress in a user-friendly manner.
What integrations does Trello support?
- GitHub
- Slack
How does Asana combine features of other tools?
It integrates strengths of both Jira and Trello for effective task management.
What integrations does Asana offer?
- GitHub
- Slack
- Microsoft Teams
What are the overall benefits of using project management tools like Jira, Trello, and Asana?
They enhance collaboration, tracking, and overall workflow efficiency.
What are the key features of Slack?
Key Features:
Channels: Organized spaces for team discussions.
Messaging: Direct and group messaging with file sharing.
Integrations: Connects with apps like Google Drive, Office 365, and Salesforce.
Automation: No-code workflow builder for routine tasks.
Slack Connect: Enables collaboration with external partners.
AI-powered search: Helps retrieve past conversations and knowledge efficiently.
Huddles & Clips: Real-time audio/video chats and asynchronous voice/video memos.
What are the key features of Asana?
Key Features:
Task & Project Management: Create, assign, and track tasks with deadlines.
Workflow Automation: Automate repetitive processes to improve efficiency.
Collaboration Tools: Comment on tasks, share files, and integrate with apps like Slack and Google Drive.
Timeline & Calendar Views: Visualize project progress with Gantt-style timelines and calendars.
Reporting & Analytics: Generate insights on productivity and project status.
Integrations: Connect Asana with tools like Microsoft Teams, Salesforce, and Zoom.
What are the key features of Trello?
Key Features:
Boards, Lists & Cards: Organize projects into boards, break them into lists, and manage tasks with cards.
Drag-and-Drop Interface: Easily move tasks between different stages of completion.
Collaboration Tools: Assign tasks, add comments, and share files with team members.
Automation (Butler): Automate repetitive tasks and workflows.
Integrations: Connect with apps like Slack, Google Drive, and Jira.
Customizable Templates: Pre-built workflows for different industries and teams.
Mobile & Web Access: Work from anywhere with cross-platform support.
What are the key features of Jira?
Key Features:
Issue & Bug Tracking: Helps teams identify, prioritize, and resolve issues.
Agile Project Management: Supports Scrum and Kanban boards for agile workflows.
Custom Workflows: Allows teams to design processes tailored to their needs.
Automation: Reduces manual tasks with built-in automation tools.
Integration: Connects with apps like Slack, GitHub, and Confluence.
Reporting & Analytics: Provides insights into project progress and team performance.
What are the key features of GitHub?
Key Features:
Repositories: Store and organize code projects.
Version Control: Track changes using Git, allowing developers to revert or merge updates.
Collaboration Tools: Enable multiple contributors to work on the same project.
Pull Requests & Code Reviews: Facilitate discussions and improvements before merging changes.
Issue Tracking: Manage bugs, feature requests, and project tasks.
Integrations: Connect with tools like Slack, Jira, and CI/CD pipelines.
GitHub Actions: Automate workflows for testing and deployment.
What are the key features of Cypress?
Key Features:
Time Travel Debugging: Captures snapshots during test execution for easy debugging.
Automatic Waiting: Eliminates the need for manual waits or sleeps in tests.
Network Traffic Control: Allows stubbing and testing edge cases without involving the server.
Spies, Stubs, and Clocks: Enables verification and control of functions, server responses, and timers.
UI Coverage & Accessibility Testing: Provides insights into test coverage and accessibility compliance.
Integration with CI/CD: Works seamlessly with continuous integration pipelines
What are the key features of Jest?
Key Features:
Zero Configuration: Works immediately with most JavaScript projects.
Snapshot Testing: Captures UI component states to detect unintended changes.
Mocking & Spying: Easily mock functions, modules, and timers for isolated testing.
Asynchronous Testing: Handles API calls, promises, and async functions efficiently.
Built-in Test Runner: Automatically finds and runs tests without extra setup.
Fast Execution: Runs tests in parallel to speed up the process.
Slack
Slack is a collaboration and messaging platform designed to streamline communication within teams and organizations. It replaces traditional email with channels, where users can organize discussions by topics, projects, or departments.
Slack enhances productivity by keeping conversations searchable, organized, and accessible from anywhere.
Asana
Asana is a work management platform designed to help teams organize, track, and manage tasks and projects efficiently. It enhances collaboration by providing a centralized workspace
Asana helps teams stay organized, accountable, and productive by streamlining workflows and communication.
Trello
Trello is a visual project management tool that helps individuals and teams organize tasks, track progress, and collaborate efficiently using a Kanban-style board system.
Trello is ideal for task management, team collaboration, and workflow organization across various industries.
Jira
Jira is a project management and issue-tracking tool developed by Atlassian, widely used by software development teams and businesses to track tasks, manage workflows, and collaborate efficiently.
Jira is widely used across industries for software development, DevOps, and general project management.
GitHub
GitHub is a cloud-based platform designed for version control and collaboration, primarily used by developers to store, manage, and share code efficiently
GitHub enhances team productivity, code security, and project management, making it a vital tool for software development
What is the first phase in front-end project planning?
Defining project requirements
Defining project requirements is the first phase in project planning and involves identifying what the project needs to achieve, who the users will be, and what technology is required
What is the primary role of stand-ups in front-end development?
Aligning the team and promoting transparency.
Stand-ups are short, daily meetings that help align the team, promote transparency, and allow members to raise issues early.
How do CI/CD pipelines improve the efficiency of the development process?
By automating the testing, integration and deployment of process.
CI/CD pipelines automate the testing, integration, and deployment of code, ensuring quick and reliable delivery of new changes to users.
What is front-end development?
A multifaceted process involving tasks, tools, and practices for creating and maintaining web applications.
What is the purpose of daily stand-ups in front-end development?
To discuss progress, identify obstacles, and plan upcoming work, promoting team alignment and accountability.
What role does source control management play in front-end development?
Manages and tracks changes to the codebase, preventing conflicts and allowing reversion to earlier versions.
What is the purpose of code reviews?
To ensure code meets quality standards, find bugs early, and encourage knowledge sharing.
What are continuous bug checks?
Regular testing and debugging to identify new issues and maintain a stable user experience.
What are version control systems (VCS)?
Tools like GitHub that track changes to the code and allow for reverting to earlier versions.
How do CI/CD pipelines benefit front-end development?
Automate testing, integration, and deployment, reducing manual intervention and speeding up development cycles.
What is the Agile methodology?
A flexible, collaborative approach to software development emphasizing continuous improvement and responsiveness to change.
What is iterative development in Agile?
Dividing the project into small increments called ‘sprints’ that focus on delivering functional parts of the application.
What is the significance of continuous feedback in Agile?
Ensures the product aligns with user needs and allows for timely course corrections.
What does it mean for teams to be self-organizing in Agile?
Teams decide how to best accomplish their tasks, fostering innovation and accountability.
What is the relationship between Agile practices and CI (continuous integration)?
CI practices maintain a consistent, deployable codebase essential for Agile development.
What are the benefits of combining task management, efficient workflows, and iterative development?
Empowers teams to build dynamic, user-focused applications that meet needs and are delivered on time.
What method of effective workflow management focuses on iterative development, continuous feedback, and flexibility in responding to changes?
Agile
Agile is a method of workflow management that emphasizes iterative development, continuous feedback, and flexibility to adapt to changing requirements.
Which of the following is an essential task for front-end developers to ensure effective collaboration within a team?
Attending stand-ups meetings
Attending stand-ups allows developers to stay aligned with the team, discuss progress, and raise issues.
What is the primary role of code reviews in front-end development?
Ensuring code quality and adherence to best practices.
Code reviews help maintain high code quality standards and ensure adherence to best practices.
Which Git command is used to create a local copy of a repository?
git clone
The git clone command creates a local copy of a repository, allowing you to work with the codebase on your machine.
What is the first step in setting up a new project on GitHub?
Creating a repository to store files and version history.
The first step in setting up a new project on GitHub is creating a repository, which will store your project files and version history.
What is the primary function of Git?
Track changes, revert to previous versions, and collaborate without conflicts.
What type of system is Git?
Distributed system.
What does the git clone command do?
Copies a repository to your local machine.
What is the purpose of creating a branch in Git?
To work on a feature or fix independently.
What does the git commit command do?
Records a snapshot of changes with a message.
What is the function of the git push command?
Uploads local changes to a remote repository.
What does the git pull command do?
Fetches and merges changes from the remote repository.
What is a repository in GitHub?
Stores project files and tracks their history.
How can repositories on GitHub be configured?
Public or private.
Why should branches be used in GitHub?
To develop different features or fixes independently.
What is a pull request in GitHub?
A proposal to merge changes, allowing team review.
What is the purpose of code reviews in GitHub?
To catch errors, maintain standards, and ensure functionality.
Which command in Git is used to upload local changes to a remote repository?
git push
The git push command uploads your local changes to a remote repository, making them available to other collaborators.
How does GitHub facilitate collaboration among developers?
By allowing developers to manage repositories, branches, pull requests and code reviews.
GitHub facilitates collaboration by enabling developers to manage repositories, organize code changes through branches, propose changes via pull requests, and review code to maintain quality.
What is the purpose of adding a collaborator to a GitHub repository?
Adding a collaborator gives them access to contribute to the repository in various ways, including pushing changes, managing branches, and participating in discussions.
What is one of the core principles of front-end development?
Ensuring a responsive user interface across devices.
A key principle of front-end development is to create interfaces that adapt smoothly across different devices and screen sizes.
What is Jest?
Jest is a JavaScript testing framework designed to make testing fast, simple, and reliable. Developed by Facebook, it is widely used for unit testing, integration testing, and snapshot testing, particularly in React applications, though it also works well with Node.js and other JavaScript environments
Jest is a powerful, user-friendly testing tool that helps developers catch bugs early, improve code quality, and ensure applications work as expected.
What is Cypress?
Cypress is a modern front-end testing tool designed for web applications, offering a fast, reliable, and developer-friendly testing experience. It is widely used for end-to-end, component, and accessibility testing.
Cypress is a powerful alternative to Selenium, offering fast execution, real-time debugging, and a simplified setup.
What front-end development principle ensures a visually appealing and engaging website?
Integrating UI/UX design
UI/UX design focuses on creating a website that is visually appealing (UI) and provides a positive overall user experience (UX).
Why is it important to commit frequently in version control?
To mantain a detailed history of changes and facilitate easier rollbacks if needed.
Frequent commits help track progress and make it easier to revert to previous versions if problems arise.
What is the purpose of creating a GitHub repository?
A GitHub repository stores project files and keeps a version history of code changes, allowing for effective project management and collaboration.
How can project planning be integrated with development tools to streamline collaboration?
By linking task management tools like Jira or Trello with code repositories like GitHub.
Linking task management tools with code repositories allows for real-time updates and seamless collaboration.
What is the purpose of a .README file in a GitHub repository?
A .README file informs users about the project’s purpose, setup, and usage.
What is a key advantage of integrating tools like GitHub and Jira for project planning and development?
It provides real-time synchronization of code changes with task management.
Real-time synchronization between tools like GitHub and Jira provides immediate updates to both developers and project managers, improving transparency and efficiency.
What is the principle of responsiveness in front-end development?
A responsive website automatically adjusts its layout and content to fit different screen sizes and orientations
What approach do developers adopt to ensure responsiveness?
Mobile-first approach
Why is responsiveness essential in web development?
It ensures seamless user experience across all devices
What does accessibility in front-end development aim to achieve?
Create websites and applications that everyone can use, regardless of their abilities or disabilities
List some elements that enhance web accessibility.
- Clear and simple language
- Alternative text for images (alt text)
- Keyboard navigation
- Adequate color contrast for readability
What is the focus of security in front-end development?
Protecting websites and applications from unauthorized access, data breaches, and other cyber threats
Name some secure practices implemented by developers.
- User authentication
- Secure data forms
- Proper cookie handling
- Data encryption
What does visual engagement involve in front-end development?
Creating visually appealing and engaging experiences
What are the key principles that enhance visual engagement?
- User Interface (UI) principles
- User Experience (UX) principles
How do UI and UX principles contribute to web development?
They help create intuitive designs that guide users through the application
Fill in the blank: A responsive website adjusts its layout to fit different _______.
[screen sizes and orientations]
