SlideShare uma empresa Scribd logo
1 de 1
Baixar para ler offline
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:

Mais conteúdo relacionado

Semelhante a 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
jkkjhdy798iyi
 
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
 
1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion1291 fa13 assign7_9_unit_pavilion
1291 fa13 assign7_9_unit_pavilion
NYCCTfab
 

Semelhante a 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 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
 
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
 

Mais 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
 

Mais 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
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 

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: