SlideShare une entreprise Scribd logo
1  sur  1
Télécharger pour lire hors ligne
Important Notes: - This is an individual assignment. - I will be checking for borrowed or copied
assignments. All work is to be done from scratch, you may not use any templates or other
assistances. - This assessment is out of 10 marks total. Background: The purpose of this
assignment is to provide you hands-on experience with building and presenting basic layouts
using flexboxes and grids for a web page. Tasks: Create a web page structure for a client to show
them the general layout of the web page you are building for them: 1. Add a header, nav, two
sidebars, main, and footer. (1 mark) 2. Use a CSS grid layout properties to arrange the different
sections of the web page such that they follow the sample wireframe on page 2. The width of the
two sidebars and main must be 3oopx respectively. Do not use grid-area property to implement
this - no mark will be given if you use the property. (5 marks) 3. Add a space between the rows
and columns. Do not use padding or margin properties to implement this - no mark will be given
if you use the properties. (1 mark) 4. Add a text to indicate each section. Use a CSS flexbox
properties to center the text horizontally and vertically for every section. (2 marks) 5. Add your
name and email in the footer of the page. (1 mark) Hints: Grid properties include display, gap,
grid-template-columns, grid-template-rows, justify-content, align-content, grid-row-start, grid-
row-end, grid-column-start, grid-column-end, grid-column, grid-row, grid-area, etc. Flex
properties include display, flex-direction, flex-wrap, flex-flow, justify-content, align-items,
align-content, order, flex-grow, flex-basis, flex, align-self, etc.
A sample wireframe:

Contenu connexe

Similaire à Important Notes - This is an individual assignment. - I will be chec.pdf

Wire framing is an important step in any screen design process. It i.pdf
Wire framing is an important step in any screen design process. It i.pdfWire framing is an important step in any screen design process. It i.pdf
Wire framing is an important step in any screen design process. It i.pdf
poddaranand1
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
CIS363A
 
Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1
CIS363A
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
jkkjhdy798iyi
 
1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion
NYCCTfab
 

Similaire à Important Notes - This is an individual assignment. - I will be chec.pdf (20)

Cis 517 Enhance teaching / snaptutorial.com
Cis 517  Enhance teaching / snaptutorial.comCis 517  Enhance teaching / snaptutorial.com
Cis 517 Enhance teaching / snaptutorial.com
 
Individual web project
Individual web projectIndividual web project
Individual web project
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
Beginning Site Design
Beginning Site DesignBeginning Site Design
Beginning Site Design
 
Sitecore sxa best practices and secrets 29th june 2021
Sitecore sxa best practices and secrets   29th june 2021Sitecore sxa best practices and secrets   29th june 2021
Sitecore sxa best practices and secrets 29th june 2021
 
Website development using dreamweaver
Website development using dreamweaverWebsite development using dreamweaver
Website development using dreamweaver
 
Aem best practices
Aem best practicesAem best practices
Aem best practices
 
Wire framing is an important step in any screen design process. It i.pdf
Wire framing is an important step in any screen design process. It i.pdfWire framing is an important step in any screen design process. It i.pdf
Wire framing is an important step in any screen design process. It i.pdf
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
 
Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1Cis363 a week 1 ilab 1
Cis363 a week 1 ilab 1
 
Cis363 week 1 i lab 1
Cis363 week 1 i lab 1Cis363 week 1 i lab 1
Cis363 week 1 i lab 1
 
Storyboarding
StoryboardingStoryboarding
Storyboarding
 
Streamlining Website Development in Dreamweaver
Streamlining Website Development in DreamweaverStreamlining Website Development in Dreamweaver
Streamlining Website Development in Dreamweaver
 
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdfAUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
 
Master Pages In Asp.net
Master Pages In Asp.netMaster Pages In Asp.net
Master Pages In Asp.net
 
1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
HTML and CSS.pptx
HTML and CSS.pptxHTML and CSS.pptx
HTML and CSS.pptx
 
SolidWorks report.pptx
SolidWorks report.pptxSolidWorks report.pptx
SolidWorks report.pptx
 

Plus de watchamirpune

In 2022, Carson is claimed as a dependent on his parents tax return..pdf
 In 2022, Carson is claimed as a dependent on his parents tax return..pdf In 2022, Carson is claimed as a dependent on his parents tax return..pdf
In 2022, Carson is claimed as a dependent on his parents tax return..pdf
watchamirpune
 
In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
 In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
watchamirpune
 

Plus de watchamirpune (20)

In a binomial situation, q=1p. True False.pdf
 In a binomial situation, q=1p. True False.pdf In a binomial situation, q=1p. True False.pdf
In a binomial situation, q=1p. True False.pdf
 
In 2025, the Robinson Company switched its inventory method from FIFO.pdf
 In 2025, the Robinson Company switched its inventory method from FIFO.pdf In 2025, the Robinson Company switched its inventory method from FIFO.pdf
In 2025, the Robinson Company switched its inventory method from FIFO.pdf
 
In 2022. Laureen is currently single. She paid $2,760 of qualified tu.pdf
 In 2022. Laureen is currently single. She paid $2,760 of qualified tu.pdf In 2022. Laureen is currently single. She paid $2,760 of qualified tu.pdf
In 2022. Laureen is currently single. She paid $2,760 of qualified tu.pdf
 
In 2022. Jasmine and Thomias, a married couple, had taxable income of.pdf
 In 2022. Jasmine and Thomias, a married couple, had taxable income of.pdf In 2022. Jasmine and Thomias, a married couple, had taxable income of.pdf
In 2022. Jasmine and Thomias, a married couple, had taxable income of.pdf
 
In 2022, Jasmine and Thomas, a married couple, had taxable income.pdf
 In 2022, Jasmine and Thomas, a married couple, had taxable income.pdf In 2022, Jasmine and Thomas, a married couple, had taxable income.pdf
In 2022, Jasmine and Thomas, a married couple, had taxable income.pdf
 
In 2022, Carson is claimed as a dependent on his parents tax return..pdf
 In 2022, Carson is claimed as a dependent on his parents tax return..pdf In 2022, Carson is claimed as a dependent on his parents tax return..pdf
In 2022, Carson is claimed as a dependent on his parents tax return..pdf
 
Implement the recursive function CountNodes of a binary tree. struc.pdf
 Implement the recursive function CountNodes of a binary tree. struc.pdf Implement the recursive function CountNodes of a binary tree. struc.pdf
Implement the recursive function CountNodes of a binary tree. struc.pdf
 
In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
 In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
In 1974, Loftus and Paimer conducted a classic study demonstrating ho.pdf
 
In Arabidopsis, you look at three closely linked traits on chromosome.pdf
 In Arabidopsis, you look at three closely linked traits on chromosome.pdf In Arabidopsis, you look at three closely linked traits on chromosome.pdf
In Arabidopsis, you look at three closely linked traits on chromosome.pdf
 
Imagine that investors expect to receive a compensation of rE=10 for.pdf
 Imagine that investors expect to receive a compensation of rE=10 for.pdf Imagine that investors expect to receive a compensation of rE=10 for.pdf
Imagine that investors expect to receive a compensation of rE=10 for.pdf
 
Image A is best described as A plant cell during prophase An animal.pdf
 Image A is best described as A plant cell during prophase An animal.pdf Image A is best described as A plant cell during prophase An animal.pdf
Image A is best described as A plant cell during prophase An animal.pdf
 
In 1930, the U.S. government attempted to help domestic firms that we.pdf
 In 1930, the U.S. government attempted to help domestic firms that we.pdf In 1930, the U.S. government attempted to help domestic firms that we.pdf
In 1930, the U.S. government attempted to help domestic firms that we.pdf
 
In April 2021, the University Sub Shop had an average check of $7.25 .pdf
 In April 2021, the University Sub Shop had an average check of $7.25 .pdf In April 2021, the University Sub Shop had an average check of $7.25 .pdf
In April 2021, the University Sub Shop had an average check of $7.25 .pdf
 
In 2003 and 2017 a poll asked Democratic voters about their views on .pdf
 In 2003 and 2017 a poll asked Democratic voters about their views on .pdf In 2003 and 2017 a poll asked Democratic voters about their views on .pdf
In 2003 and 2017 a poll asked Democratic voters about their views on .pdf
 
In C++, the function is called at program startup. group start root m.pdf
 In C++, the function is called at program startup. group start root m.pdf In C++, the function is called at program startup. group start root m.pdf
In C++, the function is called at program startup. group start root m.pdf
 
In 199746 of Americans said they did not trust the media when it co.pdf
 In 199746 of Americans said they did not trust the media when it co.pdf In 199746 of Americans said they did not trust the media when it co.pdf
In 199746 of Americans said they did not trust the media when it co.pdf
 
In Canada the proportion of the population is insolvent is 0.3. You.pdf
 In Canada the proportion of the population is insolvent is 0.3. You.pdf In Canada the proportion of the population is insolvent is 0.3. You.pdf
In Canada the proportion of the population is insolvent is 0.3. You.pdf
 
In Australia grassland, the summer time has minimum rainfall no rainf.pdf
 In Australia grassland, the summer time has minimum rainfall no rainf.pdf In Australia grassland, the summer time has minimum rainfall no rainf.pdf
In Australia grassland, the summer time has minimum rainfall no rainf.pdf
 
In an effort to determine the immunoglobulin D (IgD) levels of a cert.pdf
 In an effort to determine the immunoglobulin D (IgD) levels of a cert.pdf In an effort to determine the immunoglobulin D (IgD) levels of a cert.pdf
In an effort to determine the immunoglobulin D (IgD) levels of a cert.pdf
 
In addition, $2,476 was collected for Sandhill Company in August by t.pdf
 In addition, $2,476 was collected for Sandhill Company in August by t.pdf In addition, $2,476 was collected for Sandhill Company in August by t.pdf
In addition, $2,476 was collected for Sandhill Company in August by t.pdf
 

Dernier

Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Dernier (20)

Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 

Important Notes - This is an individual assignment. - I will be chec.pdf

  • 1. Important Notes: - This is an individual assignment. - I will be checking for borrowed or copied assignments. All work is to be done from scratch, you may not use any templates or other assistances. - This assessment is out of 10 marks total. Background: The purpose of this assignment is to provide you hands-on experience with building and presenting basic layouts using flexboxes and grids for a web page. Tasks: Create a web page structure for a client to show them the general layout of the web page you are building for them: 1. Add a header, nav, two sidebars, main, and footer. (1 mark) 2. Use a CSS grid layout properties to arrange the different sections of the web page such that they follow the sample wireframe on page 2. The width of the two sidebars and main must be 3oopx respectively. Do not use grid-area property to implement this - no mark will be given if you use the property. (5 marks) 3. Add a space between the rows and columns. Do not use padding or margin properties to implement this - no mark will be given if you use the properties. (1 mark) 4. Add a text to indicate each section. Use a CSS flexbox properties to center the text horizontally and vertically for every section. (2 marks) 5. Add your name and email in the footer of the page. (1 mark) Hints: Grid properties include display, gap, grid-template-columns, grid-template-rows, justify-content, align-content, grid-row-start, grid- row-end, grid-column-start, grid-column-end, grid-column, grid-row, grid-area, etc. Flex properties include display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-basis, flex, align-self, etc. A sample wireframe: