SlideShare a Scribd company logo
1. Create an HTML file and name it portfolio.html. Your HTML page should have a proper
structure. (2 marks) 2. Add two meta tags for the character sets and viewport. (1 mark) 3. Add
your name and email in an HTML comment at the top of the page. (1 mark) 4. Create a folder
and name it styles. Create two CSS files under the folder and name them portfolio.css and
normalize.ess, respectively. (1 mark) 5. Use an external style sheet to link styles to your HTML
page. Do not use internal or inline styles. (1 mark) 6. Format the body of the page so that it is
1200 px wide, uses your own font scheme, and is centered in the browser window. (2 marks) 7.
Add a header, navigation bar, sidebar, main section, and footer. (1 mark) 8. In the header, add a
site title: [Your First Name]s Portfolio and center it. The header should also have a top border
with a width of 1px. (1 mark) 9. Add three menus for the navigation bar: Home, Projects, and
Contacts. The navigation bar should have a background color and proper spacing between
menus. The menus should not have an underline. ( 2 marks) 10. Display menus in a different
color if a menu has a focus or the mouse hovering over it. (1 mark) 11. Add a section after the
navigation bar. The section should contain a full body width image. Use a child selector to define
the width of the image in CSS. (2 marks) 12. Use lorem ipsum text to fill the contents of the
main section and sidebar. Add a h2> heading, two paragraphs, and 50 px padding to both
sections. (1 mark) 13. Float the main section and sidebar in the body so that the sidebar is
displayed to the right of the main section. The width of the sidebar should be one-third of the
body width. (2 marks) 14. Include a footer with a copyright symbol, current year, and your name.
The footer should have the exact same styles with the navigation bar. Use a group selector to
implement this. (1 mark) 15. If the browser window is 600 px or less, change the body width and
remove floats for the main section and sidebar. Adjust other styles as well so that the content is
fully visible without horizontal scrolling. (2 marks)

More Related Content

Similar to 1- Create an HTML file and name it portfolio-html- Your HTML page shou.pdf

WebDev Template Finals
WebDev Template FinalsWebDev Template Finals
WebDev Template Finals
Gerson Abesamis
ย 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
ย 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
tutorialsruby
ย 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
ย 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
ย 
Content accessibility guidelines for site management02
Content accessibility guidelines for site management02Content accessibility guidelines for site management02
Content accessibility guidelines for site management02
Matthew Schaefer
ย 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Joseph Gabriel
ย 
Unit 5 Page Design
Unit 5   Page DesignUnit 5   Page Design
Unit 5 Page Design
c.west
ย 
Chapter 12
Chapter 12Chapter 12
Chapter 12
application developer
ย 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
ย 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
ย 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
ย 
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Harshil Darji
ย 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
ย 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
ย 
Css
CssCss
SEO: A Web Design Perspective
SEO: A Web Design PerspectiveSEO: A Web Design Perspective
SEO: A Web Design Perspective
Vidya Ananthanarayanan
ย 
15 Howto Customization Look And Feel
15 Howto Customization Look And Feel15 Howto Customization Look And Feel
15 Howto Customization Look And Feel
SWING Software
ย 
Html n css tutorial
Html n css tutorialHtml n css tutorial
Html n css tutorial
zubeditufail
ย 

Similar to 1- Create an HTML file and name it portfolio-html- Your HTML page shou.pdf (20)

WebDev Template Finals
WebDev Template FinalsWebDev Template Finals
WebDev Template Finals
ย 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
ย 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
ย 
Css introduction
Css introductionCss introduction
Css introduction
ย 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
CSS - LinkedIn
ย 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
ย 
Content accessibility guidelines for site management02
Content accessibility guidelines for site management02Content accessibility guidelines for site management02
Content accessibility guidelines for site management02
ย 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
ย 
Unit 5 Page Design
Unit 5   Page DesignUnit 5   Page Design
Unit 5 Page Design
ย 
Chapter 12
Chapter 12Chapter 12
Chapter 12
ย 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
ย 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
ย 
Css introduction
Css  introductionCss  introduction
Css introduction
ย 
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
ย 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
ย 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
ย 
Css
CssCss
Css
ย 
SEO: A Web Design Perspective
SEO: A Web Design PerspectiveSEO: A Web Design Perspective
SEO: A Web Design Perspective
ย 
15 Howto Customization Look And Feel
15 Howto Customization Look And Feel15 Howto Customization Look And Feel
15 Howto Customization Look And Feel
ย 
Html n css tutorial
Html n css tutorialHtml n css tutorial
Html n css tutorial
ย 

More from Edwardh28McDonaldy

Assume a company had no jobs in progress at the beginning of July and.pdf
Assume a company had no jobs in progress at the beginning of July and.pdfAssume a company had no jobs in progress at the beginning of July and.pdf
Assume a company had no jobs in progress at the beginning of July and.pdf
Edwardh28McDonaldy
ย 
Assume 4 million people are unemployed- 8 million people are employed.pdf
Assume 4 million people are unemployed- 8 million people are employed.pdfAssume 4 million people are unemployed- 8 million people are employed.pdf
Assume 4 million people are unemployed- 8 million people are employed.pdf
Edwardh28McDonaldy
ย 
Assistive technology has helped make things more accessible to many pe.pdf
Assistive technology has helped make things more accessible to many pe.pdfAssistive technology has helped make things more accessible to many pe.pdf
Assistive technology has helped make things more accessible to many pe.pdf
Edwardh28McDonaldy
ย 
Assignment Content Project plans outline the intended course of events.pdf
Assignment Content Project plans outline the intended course of events.pdfAssignment Content Project plans outline the intended course of events.pdf
Assignment Content Project plans outline the intended course of events.pdf
Edwardh28McDonaldy
ย 
Assignment 8- Complete the following chart by defining the injury-ill.pdf
Assignment 8-  Complete the following chart by defining the injury-ill.pdfAssignment 8-  Complete the following chart by defining the injury-ill.pdf
Assignment 8- Complete the following chart by defining the injury-ill.pdf
Edwardh28McDonaldy
ย 
Assignment 10- Complete the following chart by defining the injury-il (1).pdf
Assignment 10-  Complete the following chart by defining the injury-il (1).pdfAssignment 10-  Complete the following chart by defining the injury-il (1).pdf
Assignment 10- Complete the following chart by defining the injury-il (1).pdf
Edwardh28McDonaldy
ย 
Assess the potential impact of ethnocentrism on the diversification of (1).pdf
Assess the potential impact of ethnocentrism on the diversification of (1).pdfAssess the potential impact of ethnocentrism on the diversification of (1).pdf
Assess the potential impact of ethnocentrism on the diversification of (1).pdf
Edwardh28McDonaldy
ย 
Assessing the current safety protocols- identifying gaps Implementi.pdf
Assessing the current safety protocols-    identifying gaps Implementi.pdfAssessing the current safety protocols-    identifying gaps Implementi.pdf
Assessing the current safety protocols- identifying gaps Implementi.pdf
Edwardh28McDonaldy
ย 
Assess the storage binding in Java or PHP and provide your findings by.pdf
Assess the storage binding in Java or PHP and provide your findings by.pdfAssess the storage binding in Java or PHP and provide your findings by.pdf
Assess the storage binding in Java or PHP and provide your findings by.pdf
Edwardh28McDonaldy
ย 
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdfAseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
Edwardh28McDonaldy
ย 
Asexual reproduction (such as propagating plants by making cuttings) o.pdf
Asexual reproduction (such as propagating plants by making cuttings) o.pdfAsexual reproduction (such as propagating plants by making cuttings) o.pdf
Asexual reproduction (such as propagating plants by making cuttings) o.pdf
Edwardh28McDonaldy
ย 
ASAP PLEASE What is the test statistic to verify normality of the resp.pdf
ASAP PLEASE What is the test statistic to verify normality of the resp.pdfASAP PLEASE What is the test statistic to verify normality of the resp.pdf
ASAP PLEASE What is the test statistic to verify normality of the resp.pdf
Edwardh28McDonaldy
ย 
ASAP! Have to analyze the excel file and with that data to put into a.pdf
ASAP! Have to analyze the excel file and with that data to put into a.pdfASAP! Have to analyze the excel file and with that data to put into a.pdf
ASAP! Have to analyze the excel file and with that data to put into a.pdf
Edwardh28McDonaldy
ย 
ASAP!!! Have to analyze the excel file and with that data to put into.pdf
ASAP!!! Have to analyze the excel file and with that data to put into.pdfASAP!!! Have to analyze the excel file and with that data to put into.pdf
ASAP!!! Have to analyze the excel file and with that data to put into.pdf
Edwardh28McDonaldy
ย 
As you reflect on the various readings and concepts associated with cr (1).pdf
As you reflect on the various readings and concepts associated with cr (1).pdfAs you reflect on the various readings and concepts associated with cr (1).pdf
As you reflect on the various readings and concepts associated with cr (1).pdf
Edwardh28McDonaldy
ย 
As we enter early childhood- we start to see some general sex differen.pdf
As we enter early childhood- we start to see some general sex differen.pdfAs we enter early childhood- we start to see some general sex differen.pdf
As we enter early childhood- we start to see some general sex differen.pdf
Edwardh28McDonaldy
ย 
As the temperature decreases- you would predict that- A- a membrane wo.pdf
As the temperature decreases- you would predict that- A- a membrane wo.pdfAs the temperature decreases- you would predict that- A- a membrane wo.pdf
As the temperature decreases- you would predict that- A- a membrane wo.pdf
Edwardh28McDonaldy
ย 
As the financial analyst in Link corporation- you are required to give.pdf
As the financial analyst in Link corporation- you are required to give.pdfAs the financial analyst in Link corporation- you are required to give.pdf
As the financial analyst in Link corporation- you are required to give.pdf
Edwardh28McDonaldy
ย 
As shown in the cross section of the cold front pictured hereMultiple.pdf
As shown in the cross section of the cold front pictured hereMultiple.pdfAs shown in the cross section of the cold front pictured hereMultiple.pdf
As shown in the cross section of the cold front pictured hereMultiple.pdf
Edwardh28McDonaldy
ย 
AQ- Actual Quantity.pdf
AQ- Actual Quantity.pdfAQ- Actual Quantity.pdf
AQ- Actual Quantity.pdf
Edwardh28McDonaldy
ย 

More from Edwardh28McDonaldy (20)

Assume a company had no jobs in progress at the beginning of July and.pdf
Assume a company had no jobs in progress at the beginning of July and.pdfAssume a company had no jobs in progress at the beginning of July and.pdf
Assume a company had no jobs in progress at the beginning of July and.pdf
ย 
Assume 4 million people are unemployed- 8 million people are employed.pdf
Assume 4 million people are unemployed- 8 million people are employed.pdfAssume 4 million people are unemployed- 8 million people are employed.pdf
Assume 4 million people are unemployed- 8 million people are employed.pdf
ย 
Assistive technology has helped make things more accessible to many pe.pdf
Assistive technology has helped make things more accessible to many pe.pdfAssistive technology has helped make things more accessible to many pe.pdf
Assistive technology has helped make things more accessible to many pe.pdf
ย 
Assignment Content Project plans outline the intended course of events.pdf
Assignment Content Project plans outline the intended course of events.pdfAssignment Content Project plans outline the intended course of events.pdf
Assignment Content Project plans outline the intended course of events.pdf
ย 
Assignment 8- Complete the following chart by defining the injury-ill.pdf
Assignment 8-  Complete the following chart by defining the injury-ill.pdfAssignment 8-  Complete the following chart by defining the injury-ill.pdf
Assignment 8- Complete the following chart by defining the injury-ill.pdf
ย 
Assignment 10- Complete the following chart by defining the injury-il (1).pdf
Assignment 10-  Complete the following chart by defining the injury-il (1).pdfAssignment 10-  Complete the following chart by defining the injury-il (1).pdf
Assignment 10- Complete the following chart by defining the injury-il (1).pdf
ย 
Assess the potential impact of ethnocentrism on the diversification of (1).pdf
Assess the potential impact of ethnocentrism on the diversification of (1).pdfAssess the potential impact of ethnocentrism on the diversification of (1).pdf
Assess the potential impact of ethnocentrism on the diversification of (1).pdf
ย 
Assessing the current safety protocols- identifying gaps Implementi.pdf
Assessing the current safety protocols-    identifying gaps Implementi.pdfAssessing the current safety protocols-    identifying gaps Implementi.pdf
Assessing the current safety protocols- identifying gaps Implementi.pdf
ย 
Assess the storage binding in Java or PHP and provide your findings by.pdf
Assess the storage binding in Java or PHP and provide your findings by.pdfAssess the storage binding in Java or PHP and provide your findings by.pdf
Assess the storage binding in Java or PHP and provide your findings by.pdf
ย 
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdfAseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
Aseume z is a standard normal mandom variable- Then P(1-55z2-17) equal.pdf
ย 
Asexual reproduction (such as propagating plants by making cuttings) o.pdf
Asexual reproduction (such as propagating plants by making cuttings) o.pdfAsexual reproduction (such as propagating plants by making cuttings) o.pdf
Asexual reproduction (such as propagating plants by making cuttings) o.pdf
ย 
ASAP PLEASE What is the test statistic to verify normality of the resp.pdf
ASAP PLEASE What is the test statistic to verify normality of the resp.pdfASAP PLEASE What is the test statistic to verify normality of the resp.pdf
ASAP PLEASE What is the test statistic to verify normality of the resp.pdf
ย 
ASAP! Have to analyze the excel file and with that data to put into a.pdf
ASAP! Have to analyze the excel file and with that data to put into a.pdfASAP! Have to analyze the excel file and with that data to put into a.pdf
ASAP! Have to analyze the excel file and with that data to put into a.pdf
ย 
ASAP!!! Have to analyze the excel file and with that data to put into.pdf
ASAP!!! Have to analyze the excel file and with that data to put into.pdfASAP!!! Have to analyze the excel file and with that data to put into.pdf
ASAP!!! Have to analyze the excel file and with that data to put into.pdf
ย 
As you reflect on the various readings and concepts associated with cr (1).pdf
As you reflect on the various readings and concepts associated with cr (1).pdfAs you reflect on the various readings and concepts associated with cr (1).pdf
As you reflect on the various readings and concepts associated with cr (1).pdf
ย 
As we enter early childhood- we start to see some general sex differen.pdf
As we enter early childhood- we start to see some general sex differen.pdfAs we enter early childhood- we start to see some general sex differen.pdf
As we enter early childhood- we start to see some general sex differen.pdf
ย 
As the temperature decreases- you would predict that- A- a membrane wo.pdf
As the temperature decreases- you would predict that- A- a membrane wo.pdfAs the temperature decreases- you would predict that- A- a membrane wo.pdf
As the temperature decreases- you would predict that- A- a membrane wo.pdf
ย 
As the financial analyst in Link corporation- you are required to give.pdf
As the financial analyst in Link corporation- you are required to give.pdfAs the financial analyst in Link corporation- you are required to give.pdf
As the financial analyst in Link corporation- you are required to give.pdf
ย 
As shown in the cross section of the cold front pictured hereMultiple.pdf
As shown in the cross section of the cold front pictured hereMultiple.pdfAs shown in the cross section of the cold front pictured hereMultiple.pdf
As shown in the cross section of the cold front pictured hereMultiple.pdf
ย 
AQ- Actual Quantity.pdf
AQ- Actual Quantity.pdfAQ- Actual Quantity.pdf
AQ- Actual Quantity.pdf
ย 

Recently uploaded

BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
RidwanHassanYusuf
ย 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
MJDuyan
ย 
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
Nguyen Thanh Tu Collection
ย 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
RamseyBerglund
ย 
Bossa Nโ€™ Roll Records by Ismael Vazquez.
Bossa Nโ€™ Roll Records by Ismael Vazquez.Bossa Nโ€™ Roll Records by Ismael Vazquez.
Bossa Nโ€™ Roll Records by Ismael Vazquez.
IsmaelVazquez38
ย 
How to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in useHow to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in use
Celine George
ย 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
Krassimira Luka
ย 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
Celine George
ย 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Henry Hollis
ย 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
Mohammad Al-Dhahabi
ย 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
PsychoTech Services
ย 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
ImMuslim
ย 
How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17
Celine George
ย 
Skimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S EliotSkimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S Eliot
nitinpv4ai
ย 
A Free 200-Page eBook ~ Brain and Mind Exercise.pptx
A Free 200-Page eBook ~ Brain and Mind Exercise.pptxA Free 200-Page eBook ~ Brain and Mind Exercise.pptx
A Free 200-Page eBook ~ Brain and Mind Exercise.pptx
OH TEIK BIN
ย 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
ย 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
zuzanka
ย 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
Steve Thomason
ย 
How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17
Celine George
ย 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
Iris Thiele Isip-Tan
ย 

Recently uploaded (20)

BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
ย 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
ย 
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
Bร€I TแบฌP Bแป” TRแปข TIแบพNG ANH LแปšP 8 - Cแบข Nฤ‚M - FRIENDS PLUS - Nฤ‚M HแปŒC 2023-2024 (B...
ย 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
ย 
Bossa Nโ€™ Roll Records by Ismael Vazquez.
Bossa Nโ€™ Roll Records by Ismael Vazquez.Bossa Nโ€™ Roll Records by Ismael Vazquez.
Bossa Nโ€™ Roll Records by Ismael Vazquez.
ย 
How to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in useHow to Fix [Errno 98] address already in use
How to Fix [Errno 98] address already in use
ย 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
ย 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
ย 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
ย 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
ย 
Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...Gender and Mental Health - Counselling and Family Therapy Applications and In...
Gender and Mental Health - Counselling and Family Therapy Applications and In...
ย 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
ย 
How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17
ย 
Skimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S EliotSkimbleshanks-The-Railway-Cat by T S Eliot
Skimbleshanks-The-Railway-Cat by T S Eliot
ย 
A Free 200-Page eBook ~ Brain and Mind Exercise.pptx
A Free 200-Page eBook ~ Brain and Mind Exercise.pptxA Free 200-Page eBook ~ Brain and Mind Exercise.pptx
A Free 200-Page eBook ~ Brain and Mind Exercise.pptx
ย 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
ย 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
ย 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
ย 
How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17
ย 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
ย 

1- Create an HTML file and name it portfolio-html- Your HTML page shou.pdf

  • 1. 1. Create an HTML file and name it portfolio.html. Your HTML page should have a proper structure. (2 marks) 2. Add two meta tags for the character sets and viewport. (1 mark) 3. Add your name and email in an HTML comment at the top of the page. (1 mark) 4. Create a folder and name it styles. Create two CSS files under the folder and name them portfolio.css and normalize.ess, respectively. (1 mark) 5. Use an external style sheet to link styles to your HTML page. Do not use internal or inline styles. (1 mark) 6. Format the body of the page so that it is 1200 px wide, uses your own font scheme, and is centered in the browser window. (2 marks) 7. Add a header, navigation bar, sidebar, main section, and footer. (1 mark) 8. In the header, add a site title: [Your First Name]s Portfolio and center it. The header should also have a top border with a width of 1px. (1 mark) 9. Add three menus for the navigation bar: Home, Projects, and Contacts. The navigation bar should have a background color and proper spacing between menus. The menus should not have an underline. ( 2 marks) 10. Display menus in a different color if a menu has a focus or the mouse hovering over it. (1 mark) 11. Add a section after the navigation bar. The section should contain a full body width image. Use a child selector to define the width of the image in CSS. (2 marks) 12. Use lorem ipsum text to fill the contents of the main section and sidebar. Add a h2> heading, two paragraphs, and 50 px padding to both sections. (1 mark) 13. Float the main section and sidebar in the body so that the sidebar is displayed to the right of the main section. The width of the sidebar should be one-third of the body width. (2 marks) 14. Include a footer with a copyright symbol, current year, and your name. The footer should have the exact same styles with the navigation bar. Use a group selector to implement this. (1 mark) 15. If the browser window is 600 px or less, change the body width and remove floats for the main section and sidebar. Adjust other styles as well so that the content is fully visible without horizontal scrolling. (2 marks)