Scribd
Upload
23 views

03 Assignment 1

The document provides instructions for an assignment to create a simple webpage using React components. Students are asked to build three components - a Header, MainContent, and Footer component. Each component should be styled differently with colors, fonts, and positioning. The App component will render and import the other three components to display the full webpage. Students are given hints on how to apply inline styles using the style attribute and dynamically display the copyright year.

Uploaded by

hassanieh.mnl
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

03 Assignment 1

The document provides instructions for an assignment to create a simple webpage using React components. Students are asked to build three components - a Header, MainContent, and Footer component. Each component should be styled differently with colors, fonts, and positioning. The App component will render and import the other three components to display the full webpage. Students are given hints on how to apply inline styles using the style attribute and dynamically display the copyright year.

Uploaded by

hassanieh.mnl
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Affordable Excellence in Education

COSC 498VI – Special Topics in Computer


Science

Assignment 1
Practicing Components
Create a Simple Webpage
Fall 2023

Dr. Roaa Soloh


CIS Department
Affordable Excellence in Education

Create a simple webpage that consists of a header, a main content


section, and a footer. Each section should be implemented as a separate
React component. You should also apply some basic styling to enhance
the presentation.

Requirements:

1. Header Component:
• Create a Header component that displays a title (e.g., "My
Webpage").
• Style the header with a background color, centered text, and a
font size that makes it stand out.
2. Main Content Component:
• Create a MainContent component that displays a paragraph
with some text (e.g., "Welcome to my webpage!").
• Style the main content with a different background color,
padding, and margins for readability.
3. Footer Component:
• Create a Footer component that displays a copyright
message (e.g., "© 2023 My Webpage").
• Style the footer with a background color and make the text
appear centered at the bottom of the page.
4. App Component:
• Create an App component that serves as the main container.
• Import and render the Header, MainContent, and Footer
components within the App component.
5. Styling:
• Apply CSS styling to each component directly using the style
attribute. You can use inline styles for simplicity.
• Feel free to customize the colors, fonts, and other CSS
properties according to your preferences.
Hints:
Affordable Excellence in Education

• You can use the style attribute within each component's JSX
code to apply inline styles. For example: style={{
backgroundColor: 'lightblue' }}.
Or for example declare a variable:
const footerStyle = {
backgroundColor: '#007bff',
color: '#fff'}
then add it; style={footerStyle}
• The copyright year should be display dynamically. Use JS
functions.
A screenshot of what you might get is in Figure 1.

Figure 1 Example

Style it like you want, add more data to content like images more texts,
etc...

You might also like