Scribd
Upload
2 views8 pages

FrontEnd Developer Week 1 - 2

The document outlines a four-week training program for a new Front-End Developer at Prksconsulting, focusing on enhancing the company's website. The first week includes learning HTML and CSS, creating the website's structure, styling, and implementing responsive design. Deliverables include various documents summarizing the work done each day, culminating in a final review of the website's interactive features.

Uploaded by

officialmailtomausam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views8 pages

FrontEnd Developer Week 1 - 2

The document outlines a four-week training program for a new Front-End Developer at Prksconsulting, focusing on enhancing the company's website. The first week includes learning HTML and CSS, creating the website's structure, styling, and implementing responsive design. Deliverables include various documents summarizing the work done each day, culminating in a final review of the website's interactive features.

Uploaded by

officialmailtomausam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Week 1

Introduction and Basic Training


Overview

You've just joined Prksconsulting as a Front-End Developer. In


your first team meeting, the Head of Web Development explains:
"We need to enhance our website to better showcase our real
estate services and engage users effectively. Over the next four
weeks, you'll focus on building a modern, responsive website with
interactive features."
Your mission for the first week is to get acquainted with our
current website structure and design requirements. You’ll start by
learning the basics of HTML and CSS, and then work on creating
the foundational layout and styling for our new website. This
project is essential for improving user experience and visual
appeal.
Day 1

Objective: Introduction to Front-End Development


Task: Familiarize yourself with basic front-end development concepts,
including HTML and CSS.
Deliverable: Front-end development introduction notes

Day 2

Objective: HTML Basics


Task: Learn HTML fundamentals and create the basic structure for
Prksconsulting’s website.
Deliverable: HTML structure draft

Day 3

Objective: CSS Fundamentals


Task: Study CSS basics and apply styling to the HTML structure created.
Deliverable: Styled HTML page with basic CSS.

Day 4

Objective: Responsive Design


Task: Implement responsive design techniques using CSS media queries to
ensure the website is mobile-friendly.
Deliverable: Responsive layout adjustments

Day 5

Objective: Review and Feedback


Task: Finalize the initial website layout and styling
Deliverable: Presentation of the website design and feedback from the
team.
Day 1: Task: Introduction to Front-End Development

Detailed Description:

Today, you'll immerse yourself in Prksconsulting’s front-end project, focusing


on understanding the company's current website and the goals for the new
website development. Your main objective is to get familiar with the
company's background and the requirements for the website redesign.

Activities:

Read through the provided company overview document for


Prksconsulting.
Visit the Prksconsulting website (www.prksconsulting.com) and explore the
current design, services, and property listings.
Review the project brief for the new website, focusing on the main design
and functionality goals.
Research the basics of front-end development technologies (HTML, CSS,
and responsive design).

Deliverable:

Prepare a summary document (500-700 words) that includes:


A brief overview of Prksconsulting and its services.
Your understanding of the main goals and requirements for the new
website.
Initial thoughts on how front-end development can address these
requirements.
A list of at least 3 key features you think the new website should have,
based on your understanding of Prksconsulting’s needs.
Any questions or clarifications you need regarding the project.

Submission: Upload your summary document to the program portal


by the end of the day.
Day 2: Task: HTML Basics

Detailed Description:

Today, you'll focus on learning and applying HTML fundamentals to lay the
foundation for the new Prksconsulting website. Your primary goal is to create the
basic structure for the website that will serve as the framework for further
development.

Activities:

Study the basics of HTML, including elements, tags, and document structure.
Start building the basic layout for Prksconsulting’s website, focusing on core
components such as headers, footers, and navigation.
Create HTML pages for key sections of the website, such as the homepage,
services page, and contact page.
Implement semantic HTML elements for better structure and accessibility.

Deliverable:

Prepare an HTML structure document that includes:


1. The basic HTML layout for Prksconsulting’s website, with headers, footers, and
navigation elements.
2. HTML pages for the main sections of the site, including the homepage,
services page, and contact page.
3. A brief summary (300-500 words) explaining the HTML structure and the
rationale behind your layout choices.
4. Any questions or issues encountered while creating the HTML pages..

Submission: Upload your notes document to the program portal by the


end of the day.
Day 3: Task: CSS Fundamentals

Detailed Description:

Today, you'll focus on learning and applying CSS fundamentals to style the
HTML structure created on Day 2. Your primary goal is to enhance the visual
appeal of the Prksconsulting website by applying basic styling principles.

Activities:

Study CSS basics, including selectors, properties, and values.


Apply styling to the HTML structure, focusing on typography, colors, and
layout.
Implement basic CSS styling for the website's core components, such as
headers, navigation menus, and content sections.
Experiment with layout techniques using Flexbox or Grid to ensure a
responsive design.

Deliverable:

Prepare a CSS styling document that includes:


1. Applied styles to the HTML structure, covering typography, color schemes,
and layout adjustments.
2. Screenshots or a live preview of the styled pages (homepage, services page,
and contact page).
3. A brief summary (300-500 words) explaining the CSS techniques used and
the design choices made.
4. Any questions or challenges encountered while applying CSS styles.

Submission: Upload your Code to the program portal by the end of the
day.
Day 4: Task: Responsive Design

Detailed Description:

Today, you'll focus on implementing responsive design techniques to ensure that


the Prksconsulting website functions well on different devices and screen sizes.
Your goal is to make the website adaptable and user-friendly across a range of
devices.

Activities:

Learn about CSS media queries and their role in creating responsive designs.
Apply media queries to the existing CSS to adjust the layout for various
screen sizes (e.g., mobile, tablet, desktop).
Test the website on different devices and screen sizes to ensure that it
displays correctly and maintains usability.
Make necessary adjustments to ensure fluid layouts and flexible images.

Deliverable:

Prepare a comparison report (600-800 words) that includes:


1. Implementation of media queries in the CSS for various screen sizes.
2. Screenshots or a live preview of the website across different devices and
screen sizes.
3. A brief summary (300-500 words) explaining the responsive design techniques
used and any challenges faced.
4. Any additional adjustments or improvements needed for better
responsiveness..

Submission: Upload your Card to the program portal by the end of the
day.
Day 5: Task: Interactive Features and Final Review

Detailed Description:

Today, you'll focus on adding interactive features to enhance user engagement on


the Prksconsulting website and perform a final review of your work. Your goal is to
ensure the website is functional, engaging, and meets the project requirements.

Activities:

Implement interactive features such as buttons with hover effects, forms


with basic validation, and simple JavaScript interactions.
Test interactive elements to ensure they work smoothly and enhance user
experience.
Conduct a final review of the website, checking for consistency in design,
responsiveness, and functionality.
Prepare a presentation or demo showcasing the completed website and its
interactive features.

Deliverable:

Prepare an interactive features and final review document that includes:


1. Implementation of interactive elements, such as buttons and forms, with
accompanying JavaScript code snippets if applicable.
2. Screenshots or a live demo of the interactive features in action.
3. A brief summary (300-500 words) explaining the interactive features added
and the results of the final review.
4. Any final adjustments made and observations for further improvements.

Submission: Upload your design document to the program portal by


the end of the day.

You might also like