Tasks and Duties
Objective: In this task, you are required to design and develop a responsive landing page based solely on your creative interpretation of a standard wireframe layout. The goal is to transform a static design prototype into a live HTML, CSS, and JavaScript page that adapts smoothly to various screen sizes, from desktops to mobile devices.
Task Details: You will begin by sketching a wireframe of a common landing page which includes a header, navigation menu, hero section, feature highlights, and a footer. Then, proceed to code the webpage using semantic HTML5, modern CSS (including Flexbox and/or Grid), and vanilla JavaScript where necessary for interactivity such as a responsive menu toggle. Your solution should emphasize clean and well-structured code with comments where needed.
Key Steps: 1. Draft your own wireframe design and plan the layout.
2. Create the HTML structure, ensuring semantic correctness.
3. Implement responsive styles using CSS media queries and layout techniques.
4. Add basic interactivity (e.g., navigation menu toggle) with JavaScript.
5. Test and refine your design on multiple screen sizes and browsers.
Expected Deliverables: A zipped archive containing the HTML, CSS, and JavaScript files. The code should be clearly commented to explain your design choices, ensuring that every aspect of the page is functional and displays properly on various devices.
Evaluation Criteria: Code quality, organization, responsiveness, usability, adherence to modern design practices, and overall completion of the task.
This task is designed to help you grasp the fundamentals of a responsive design process while being creative and detail-oriented. You are encouraged to research best practices for layouts and responsiveness on the internet. The work you produce will serve as an important portfolio piece that demonstrates your ability to bridge design with practical development.
Objective: The focus of this task is to build interactive front-end components that enhance user engagement. You will design and implement a component – such as an interactive modal, accordion, or tab system – using vanilla JavaScript along with HTML and CSS. The emphasis is on creating reusable and maintainable code.
Task Details: Begin by selecting an interactive UI component that you believe is critical in enhancing user experience. You are responsible for designing both the UI and the interactivity of the component. This task requires deep focus on DOM manipulation, event handling, and ensuring that your component is accessible and responsive. You must also incorporate error handling and fallback designs for browsers that might not support modern features.
Key Steps: 1. Choose an interactive component and outline its requirements and behavior.
2. Develop a clear HTML structure to support the dynamic component, ensuring semantic usage.
3. Write the CSS needed to style the component in different states and ensure responsiveness.
4. Use vanilla JavaScript to implement interactivity, including animations and transitions where appropriate.
5. Ensure your component has accessible attributes (such as ARIA) and keyboard navigation support.
Expected Deliverables: A single submit file (zip) that contains the complete set of code files for your component. Include documentation in a README file on how to test and use your interactive component.
Evaluation Criteria: Clarity of your code, level of interactivity and user experience improvement, adherence to accessibility standards, code modularity, and effective use of JavaScript for DOM manipulation. Comprehensive commenting and documentation will also be reviewed.
Objective: The goal for this week is to focus on accessibility and user experience (UX) enhancements for a web interface. You will pick an existing front-end interface concept and infuse it with accessibility best practices by applying proper semantic HTML, ARIA roles, and keyboard navigation improvements.
Task Details: Start with a typical web page that could represent a blog or information portal. Analyze the page structure and identify areas where accessibility can be improved. You will then rework the webpage to ensure that it conforms to WCAG and ARIA guidelines. This involves making the page fully navigable via keyboard, ensuring proper contrast ratios, adding semantic tags where appropriate, and labeling interactive elements clearly.
Key Steps: 1. Choose a web page concept and conduct an accessibility audit using publicly available tools (e.g., Lighthouse or WAVE).
2. Modify the HTML and CSS to include semantic tags and ensure proper document structure.
3. Implement ARIA attributes for dynamic content and interactive components.
4. Enhance keyboard navigation and ensure focus states are clearly visible.
5. Document the changes made and justify why these improvements aid accessibility.
Expected Deliverables: A zipped folder that includes all the updated project files (HTML, CSS, and JavaScript if applicable) along with a report in a text or markdown file outlining the accessibility audits performed, the improvements made, and how they meet accessibility standards.
Evaluation Criteria: Depth and accuracy of the accessibility improvements, adherence to guidelines, clarity and professionalism in the submitted report, code clarity, and practical demonstration of enhanced usability for people with disabilities. This task challenges you to step into the shoes of all users by ensuring your work is functional and supportive for everyone.
Objective: This task is centered on analyzing and optimizing the performance of a web page. You are required to identify performance bottlenecks, implement optimization techniques, and document the improvements. The focus is on front-end performance enhancements that improve load times and smooth user experience.
Task Details: You will start with a basic web page that you develop or reuse from one of your previous projects. Using publicly available tools like Google PageSpeed Insights or Lighthouse, analyze your page for performance issues. Identify elements that may slow down the user experience, such as large images, excessive JavaScript execution, or inefficient CSS. Implement smart solutions such as image optimization techniques (like lazy loading), minification of scripts, proper caching strategies, and code splitting if applicable.
Key Steps: 1. Create or select a front-end project to optimize.
2. Measure the initial performance using online performance analysis tools.
3. Identify and list the issues that impact performance.
4. Apply optimization techniques such as lazy loading images, minification of assets, reducing DOM complexity, and asynchronous loading of JavaScript.
5. Measure performance improvements post-optimization and document your findings.
Expected Deliverables: A compressed file (zip) containing your revised project files along with a detailed performance report. The report (in PDF or markdown format) should detail the before-and-after analysis, strategies used for improvement, and any challenges encountered.
Evaluation Criteria: Effectiveness of the optimization techniques applied, clarity and thoroughness of the documentation, measurable improvements in performance scores, code efficiency and cleanliness, and overall enhancement of the user experience. This task reinforces both your problem-solving skills and practical application of performance best practices in frontend development.
Objective: The final week's task brings together all the skills you have honed over the previous weeks by integrating them into a mini web application project. You are to develop a small, interactive dashboard that includes a dynamic data display, responsive design, interactivity through JavaScript, accessibility improvements, and optimized performance.
Task Details: You must design and code a mini web application that displays a set of static data (which you can create as a JSON file) in the form of a dashboard. The dashboard should include various components such as charts, data tables, or interactive panels. Your application must incorporate responsive layout design, interactive UI elements, and optimized loading strategies. Additionally, ensure that your project is accessible to all users by following accessibility and ARIA guidelines. This is an opportunity to demonstrate your ability to think holistically about frontend development – from design to deployment.
Key Steps: 1. Outline the requirements for your dashboard and create a wireframe design.
2. Develop a responsive layout using HTML and CSS that adapts across different devices.
3. Use JavaScript to fetch and display data from a static JSON file, enabling interactive features like filtering or sorting.
4. Implement accessibility features and optimize performance through code review and improvement techniques.
5. Document your design decisions and perform testing to ensure the application works well across browsers.
Expected Deliverables: Submit a compressed archive (zip) containing all source code files for the project, the static JSON data file, and a detailed project report outlining design choices, features implemented, and performance and accessibility enhancements. The project documentation should be at least 200 words and meticulously detail your development process and testing outcomes.
Evaluation Criteria: Integration of design components learned throughout the internship, code quality and organization, responsiveness, interactivity level, adherence to accessibility standards, performance optimizations, and the professionalism of the final documentation. This task is meant to simulate real-world project development, testing your ability to deliver a well-rounded web application independently.