Scribd
Upload
296 views

Front End Development.

Uploaded by

Subbulakshmi P
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
296 views

Front End Development.

Uploaded by

Subbulakshmi P
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Cognifyz

Where Data Meets Intelligence

INTERNSHIP PROGRAM
FRONT-END DEVELOPMENT.
About Us Cognifyz
Where Data Meets Intelligence

Cognifyz Technologies is a leading technology company that


specializes in the dynamic field of data science and excels in
delivering impactful projects and solutions.
The company offers a wide range of products and services,
including artificial intelligence (AI), machine learning (ML), and
data analytics tools.
Cognifyz Technologies also provides training programs to
enhance skills and knowledge in these areas.
The company focuses on delivering innovative and cutting-edge
solutions to meet the evolving needs of businesses.
During your internship tenure, it is important to keep in mind the following points

Enhance your professional presence by updating your LinkedIn profile. Share


your achievements, such as the offer letter or internship completion
certificate, which you received from us. Don't forget to mention and tag
Cognifyz Technologies in your posts. You can use hashtags like #cognifyz
#cognifyzTech #cognifyzTechnologies to showcase your affiliation.

Maintain academic integrity and respect intellectual property. Plagiarism


and copying code are serious offenses that can lead to the termination of
your internship and subsequent restriction from future opportunities with
us.

Demonstrate your work by sharing a video showcasing the completion of


your tasks on LinkedIn. Remember to tag Cognifyz Technologies in your
post and use relevant hashtags like #cognifyz #cognifyzTech
#cognifyzTechnologies to engage with our community.

Cognifyz
Where Data Meets Intelligence
SUBMISSION
Create a professional video showcasing your internship projects
and achievements.

Host the video on LinkedIn to provide proof of your work and


establish credibility among your peers. Consider tagging Cognifyz
Technologies in your posts to ensure they are notified of your work.

A SUBMISSION FORM will be shared later. Till then please continue


your task and make a septate file of each level.

When posting the video on LinkedIn, include the following hashtags


to maximize visibility and engagement: #cognifyztechnologies
#cognifyz #cognifyztech. Additionally, depending on your
internship domain.

Cognifyz
Where Data Meets Intelligence
Cognifyz
Where Data Meets Intelligence

TASK LIST
Welcome to our exciting front-end development. internship program! To complete this internship,
you will need to finish at least 6 tasks out of 8. We've designed these tasks to cater to your
convenience and ensure an engaging and rewarding experience. Additionally, completing all tasks
will further enhance your chances of receiving a stipend.
Level 1: Beginner Project: Interactive Website Development Cognifyz
Where Data Meets Intelligence

Objective:

To build a responsive and interactive website that


incorporates various front-end development
techniques, from basic HTML structure to advanced API
integration and CSS preprocessing.

Task 1: Basic HTML PageSteps:

1. Create an HTML file (index.html) with the basic


structure including <html>, <head>, and <body> tags.
2. Add a title to the webpage using the <title> tag.
3. Insert headings, paragraphs, and an image within the
body of the page.
4. Save the file and open it in a web browser to ensure
proper rendering.
Level 1: Beginner Task 2: Styling with Inline CSS:
Cognifyz
Where Data Meets Intelligence

Objective: Apply basic styling directly within


HTML elements to understand the
fundamentals of CSS and its impact on the
appearance of web content.

Steps:

1. Apply inline CSS styles directly within HTML


elements to change font color, size, and
background color.
2. Experiment with different styles and save
the HTML file to view the changes in the
browser.
Task 3: Responsive Design Cognifyz
Level 2: Intermediate Where Data Meets Intelligence

Objective: Ensure the webpage layout adjusts


appropriately for different screen sizes,
improving user experience across various
devices.

Steps:
1. Use media queries in a separate CSS file
(styles.css) to make the webpage responsive.
2. Adjust layout and element sizes for different
screen sizes, ensuring readability and
usability.
3. Test responsiveness by resizing the browser
window or using developer tools.
Task 4: Interactive Button Cognifyz
Level 2: Intermediate Where Data Meets Intelligence

Objective: Enhance user engagement by


adding interactive elements and implementing
basic JavaScript functionality.

Steps:
1. Add a button element to index.html.
2. Write JavaScript code in a <script> tag or a
separate file (script.js) to change the
background color when the button is
clicked.
3. Test the functionality by clicking the button
and observing the background color
change.
Cognifyz
Level 3: Advanced Task 5: Task: API Integration Where Data Meets Intelligence

Objective: Integrate external data sources to


provide dynamic content, expanding the
website's capabilities beyond static
information.

Steps:
1. Choose a public API (e.g., JSONPlaceholder)
and understand its endpoints.
2. Use fetch() in script.js to retrieve data from
the API.
3. Parse the JSON data and dynamically
update the DOM to display the fetched
information.
Cognifyz
Level 3: Advanced Task 6: Form Styling and Validation Where Data Meets Intelligence

Objective: Improve usability and data integrity


by designing visually appealing forms and
implementing client-side validation for user
input.

Steps:
1. Design a form in index.html with appropriate
input fields and labels.
2. Style the form using CSS in styles.css.
3. Implement client-side form validation in
script.js to validate user input before
submission.
4. Provide feedback to the user about validation
errors.
Level 4: Expert Task7: Component-Based Styling
Cognifyz
Where Data Meets Intelligence

Objective: Utilize CSS frameworks to streamline


development and maintain consistency across
the website, demonstrating proficiency in
modular design principles.

Steps:
1. Refactor the webpage to use Bootstrap or
another CSS framework.
2. Utilize framework components for the layout,
navigation, and other elements.
3. Customize and style the components as
needed to match the design requirements.
Level 4: Expert Task8: Introduction to CSS Preprocessing Cognifyz
Where Data Meets Intelligence

Objective: Explore advanced CSS preprocessing


techniques to enhance code organization, reusability,
and maintainability, showcasing expertise in modern
front-end development practices.

Steps:
1. Install a CSS preprocessor like Sass and set up your
project.
2. Define variables for colors, font sizes, etc., in a
separate Sass file (styles.scss).
3. Use nested styles and other preprocessing
features to organize and enhance the stylesheet.
4. Compile the Sass file into CSS and link it to
index.html.
How to
Contact Us?
To find out more information,
please contact us

@cognifyz-Technologies

[email protected]

www.cognifyz.com
Cognifyz
@cognifyz_tech Where Data Meets Intelligence

You might also like