Scribd
Upload
17 views24 pages

Unit 3 CL8

Uploaded by

Krishna
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
17 views24 pages

Unit 3 CL8

Uploaded by

Krishna
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/ 24

UNIT – 3 Here's how we can make a portfolio look attractive to the reader:

CLASS - 8 (PORTFOLIO)  Keep the design simple and focus on the main points.
 Use high quality images.
Description of the Project
 Create specific sections to showcase personal and professional
This project emphasizes understanding the importance of portfolio sites, details.
and creating an attractive portfolio site using HTML, CSS, and Bootstrap.  Include a contact form.
 Include a picture (optional) and social media links (optional).
Introduction
Websites are a great way to display our portfolio where we can share
information about us, our skills, achievements as well as projects.
Observe this picture of a website. What do you think it is about?

Figure 3.2
Sample Portfolio Structure
Figure 3.1
Answer: Technical Activity
This is a portfolio website. A Portfolio site can be considered as an We will use HTML and CSS to create a portfolio site.
extension to your resume. A portfolio site is a convenient way to showcase
Part 1: Getting started with VS Code
one's skills, abilities and achievements. Suppose a photographer is looking
for more work, they could create a portfolio website to showcase their work Step 1: Download VS Code through the following link:
so far. We can also showcase our achievements from school to secure
https://code.visualstudio.com/
admission to good universities.
Step 2: Install the application with the instructions that appear onscreen. Note:
Step 3: Create a folder on your computer and name it "Portfolio". Please note that you can name this file any other name too. However, the
convention is to use the name index.html.
Step 4: Open VS Code. Click on 'File' option and select 'Open Folder' from
the dropdown. Part 2: Starting with HTML
Now that we have created our file, we can start writing the basic HTML
structure.
Step 1: Type html in the file and select html:5.
Note -
HTML5 is a markup language used for structuring and presenting content
on the World Wide Web. It is the fifth and last major HTML version that is
a World Wide Web Consortium recommendation. –

Figure 3.3
Step 5: Select the folder that you just created. It should now be visible in the
VS Code interface on the sidebar.
Step 6: Right click on the sidebar and select "New File". This will create a
new file. Name it index.html.

Figure 3.5
You will see a screen like the one shown here. This is the HTML structure.
This basic structure is also referred to as the HTML Boiler Plate.

Figure 3.4
Figure 3.6
Step 2: Change the title tag to "My Portfolio".
Figure 3.8
This will launch a server in your default web browser. You can view your
webpage as shown below: The title bar says "My Portfolio" as per our title
tag.

Figure 3.7
Figure 3.9
Part 3: Viewing the HTML Page
Note:
There are 2 ways to view the HTML page:
The webpage will appear empty at this point since we have not added any
1. Navigate to the folder where your html file is stored and double click on content inside the <body> tag.
it. This will open the HTML page in your default browser.
Part 4: Creating the Home section.
2. Or right click within your VS Code and select "Open with Live Server".
Note: In the Home Section, we will add brief description of the person and
an image.
HTML Headings
HTML contains 6 heading tags h1, h2, h3, h4, h5 and h6. <h1> is for the It is standard practice to store all our images in a separate folder. Create a
largest text size and <h6> is for the smallest. new folder inside our Portfolio folder and name it 'images'.
Step 1: Create a heading and a sub-heading using h1 and h3 tags. Step 2: Create an img tag. This tag has 3 attributes - src, alt and width. Add
the image location inside the src attribute.
Step 3: Write "My picture" inside the alt tag. This is optional but good
practice.
Note - Alternate text explains the topic of image if image fails to display
because of any reason. User gets the idea hence it's a good practice. –
Step 4: The width attribute is used to specify the width of the image. It is set
as 400px here.
Figure 3.10
Images on a webpage
Images are important part of a website. They make a website visually
pleasing and engaging. We can add images in a webpage using image tag
<img>.The image tag - <img> is a self-closing tag used to display an image
on a webpage. The source attribute 'src' is used to add the path of the image
and 'alt' attribute adds alternate text if the image cannot be displayed.

Figure 3.12
For example:
Let's start designing the header section by using an image as a background.
Part 5: Creating the My Work section
In this section, we will add details about our projects or completed work.
Step 1: Create a header for this section using the h2 tag.
Note:
We will divide the work section into three parts:
Figure 3.11
 Work/ project title.
 A horizontal line to separate the heading from the description.
 A brief description of the work done. Step 1: Create a heading using the h2 tag and write About Me inside it.
Step 2: For the title, we will use the h4 tag. Inside the h4 tag, add Step 2: To add details, use the p tag.
"StaticWebsite" as a title for the work.
Step 3: Add an <hr> tag, to create a horizontal line between the title and the
brief description.
Step 4: Add a paragraph tag with some text inside it.
To add a brief description, we will use the p tag. The p tag is known as the Figure 3.15
paragraph tag and is used to add a few sentences or paragraphs on a Step 3: Add an image using the <img> tag and set it to a width of 600px.
webpage.
Note - You can add text of your choice if it is relevant to the project. –

Figure 3.16
Figure 3.13
Part 7: Creating a Contact Form
Step 5: Similarly, create 2 more work sections.
Forms are an essential feature for any website that wants to have some sort
of interaction with its viewers. It is mainly used to collect information from
its users. Basic sample form may look similar to the image below.

Figure 3.14
Part 6: Creating the About Me section.
This section will be a summary of the person whose portfolio this is. It will Figure 3.17
include hobbies, passions, current work, education, etc.
Note: Step 1: Create a heading using the <h2> tag and write Contact Us inside it.
To create a form in HTML, use the <form> .... </form> tag. The form tag Step 2: Add the <form> tag.
acts as a container. Inside it, we can add various form elements such as
textboxes, labels, buttons, checkboxes and so on.
The <input> element
This is a commonly used element to create different types of input elements
like textboxes, radio buttons, checkboxes, drop-down lists, etc.
Figure 3.20
The <label> element
Note - No output can be seen for the form yet, since we have not included
This element is used to create labels for input elements. any form elements. –
Some Examples: Step 3: Create a textbox using the following code:

Figure 3.21
The input element has 2 attributes -
The name attribute is used to give the textbox a name and the placeholder
Figure 3.18 attribute is used to display text inside it.

Figure 3.19 Figure 3.22


Step 4: Similarly, create another text box to enter an email id.

Figure 3.25

Figure 3.23
Notice the use of another html tag <br>. This tag is known as the Break tag
and isused to insert line breaks between html elements.
We will now create a textarea so that visitors to our site can leave their
feedback. A textarea is like a textbox except that users can enter multiple
lines of text inside it.
Step 5: Use the <textarea> element to create it.
Step 6: Write "Any Feedback" in between the opening and closing
<textarea> element.
Step 7: The "rows" attribute specifies the size(height) of the textarea.

Figure 3.24
Step 8: Create a Submit button.
Step 9: Apart from using the <button> tag for creating buttons, we can also
use<input type="submit"> for creating a button.
Figure 3.26
Now, we have created a basic portfolio website. We used various HTML Class Selector - Here, we provide a class to an HTML element. All CSS
tags, including heading, paragraph, image, and form. We made this in VS styles will be applied only to the HTML element with that Class. The ".
code. (dot)" symbol is used to indicate a class.
All our content is in place, but do you think the website looks appealing and HTML Element with class - "my_class"
attractive enough? <h2 class="my_class"> Hello World </h2>
Our current website is not attractive enough to attract a viewer's attention. CSS style rule for the class -
.my_class
But this website will look better if we apply the following to it:
{
 Add different colours to different sections. color: green;
 Add different colours and sizes to the font/text.
 Change alignments of the headings and paragraph sections. }
 Add borders to the page. By convention, IDs are unique across the web page, whereas Classes
Note: To implement these features on a website, we can use CSS. can be applied to a single or a group of HTML elements.

Cascading Style Sheet or CSS is a style sheet language used to design and Let’s apply CSS to our website and make it look more attractive.
layout a webpage. CSS lets us modify colours, fonts, text sizes, apply Part 1 - Creating an external CSS file and linking it to webpage.
animations, effects and more. CSS files have the extension .css.
Step 1: Navigate to your project's location and create a new folder with the
Using CSS on a webpage name "css".
There are 3 ways to use CSS on a website: Inline CSS, Internal CSS, and Step 2: Inside the folder, create a file style.css.
External CSS. Here in this unit, we will use External CSS. Step 3: Open your HTML file and include the style.css file using the link
tag.
External CSS - In external CSS, a separate CSS file is created, and all CSS
code is written in it. This file is included on the HTML page with the link
tag, with the name of the CSS file as a value to the href attribute.
CSS Selectors and their usage
CSS selectors are used to specify a HTML element or tag upon which CSS
style rules are applied.
There are 3 ways to specify a CSS selector - Tag Selector, IDSelector and
Class Selector. In this unit, we will use the class selector.

Figure 3.27
Step 4: Open your style.css file. Create a body selector and specify the font per the contents inside the div. Height is set to auto. This will ensure that
properties. the height of the div will expand or compress depending on the content
inside it.
This CSS style rule ensures that the default font will be RobotoCondensed,
and font-size will be 20px for the entire site.

Figure 3.30
Figure 3.28
Part 2: Creating a main Wrapper container. Part 3: Creating a container for the Home Section and styling it.
Step 1: Create a div and place all the HTML contents (created in the Step 1: Create a div and give it a class "block1".
previous session) inside the div. Give the div a class, "Wrapper".
Step 2: Put the entire contents of the Home Section inside the block1 div.

Figure 3.29
Note: Figure 3.31
Put the closing </div> tag at the end of the HTML page, just above the Step 3: Set CSS properties for block 1.
</body> tag. Make sure that the entire contents of the website are placed
width: 100% will make this div occupy the entire width of its parent div
inside this wrapper container.
(div with class wrapper). height is set at 55vh. vh stands for viewport height
Step 2: Set wrapper class rules as follows: and is a dynamic property, which means that the height of this div is not
fixed but will automatically adjust itself when the browser height changes.
Since wrapper is a class (as defined in the HTML page), we usethe '.' (dot)
Color specifies the colour of the text. The value is a hexadecimal colour. It
operator to define it. width: 90% specifies that this div will occupy 90% of
is specified in the format - #RRGGBB. RR (red), GG (green) and BB (blue)
the whole page. Margin are assigned as auto. This will adjust the margin as
are hexadecimal integers between 00 and FF specifying the intensity of the
colour. text-align: center makes the block1 div appear at the centre. margin-
top leaves some space at the top of the block1 div.

Figure 3.34

Figure 3.32 CSS for class block1-2.

Part 4: Creating sub containers within the Block1 div. Step 5: Provide a fixed width and height for the image. Border-radius
property defines the radius of an element's corner and isused to round-up
Step 1: Split the block1 div into 2 sub containers(div). One container will the corners. Setting its value to 50% rounds up all the 4corners making it a
contain only the text elements and the other one will contain the image. circle.
Step 2: Give the two sub containers classes - block1-1 and block1-2. CSS
for class - block1-1Step 3: To access the <h1> tag inside the div with class
block1-1, specify the class name.block1-1 and then the h1 tag.
Step 4: Specify the margin property using the short-hand technique. The
first value of 30px indicates that margin-top and margin-bottom will be
30px.The second value - 0 specifies that margin-left and margin-right will
be 0.

Figure 3.35
Note:
Try setting different values for the border-radius to understand how it
works.
Part 5: Designing the My Work section.
Figure 3.33
Step 1: Create a div, give it a class - block-2.

Figure 3.37

Figure 3.36 CSS for block2-heading.

CSS for block-2. Step 5: Set the background property to linear-gradient. This property sets a
gradient colour as the background. min-height specifies the minimum
Step 2: Set the width to 100%. height that the container can be resized to.
Step 3: Make the contents appear at the centre by setting the property text- Step 6: Set the height property to auto so that the height is automatically
align:center. adjusted depending on the contents inside it. font-weight sets the thickness
of the font.
Step 7: Apply padding-top.

Figure 3.33
Step 4: Wrap the heading "My Work" in a div and give it a class "block2-
heading". Figure 3.38
Part 6: Designing the About Me section.
Step 1: Create a div, give it a class block3.
Step 2: Wrap the entire About Me section within this div.
CSS for block3-heading.
Step 5: Create a div with class block3-text and place the contents of the p
tag inside this div.

Figure 3.39
CSS for block3.
Step 3: Create another div with class block3-heading. Figure 3.42
Step 6: Create another div with class block3-image and place the img tag
inside it.

Figure 3.40
Step 4: Put the <h2> heading inside this div.

Figure 3.43
CSS for block3-text.
Step 7: Set the rules for this text block.
This container has a width of 50%, so it occupies only half of the container.
Padding has been applied using the shorthand technique. Only top, bottom
padding of 20px has been applied. Left, Right padding has been set to
0.Font-size is given as 1em. Em is a relative measurement unit. 1em is
equal to font-size of the parent element.
Figure 3.41
Figure 3.45
Part 7: Designing the Contact Form section.
Step 1: Create a div with class "block4" and put the contents inside this div.

Figure 3.44
CSS for block3-image.
Step 8: Set the rules for the image block.width and height of the image is set
at 35vw and 35vh." vw and vh are relative measurement units and are
referred as viewport width and viewport height. Viewport is the area in a
browser where the webpage is displayed.
Box-shadow property is used to add shadows.
The first value (Opx) specifies the horizontal offset, second value
(8px)specifies the vertical offset, third value (11px) specifies the blur Figure 3.46
radius, fourth value (-5px) specifies the spread radius and fifth value CSS for block4 class.
specifies the colour of the shadow.
Figure 3.47 Figure 3.46

Step 2: Create another div with class block4-form and wrap your form Step 3: Set the rules for the form.
inside this
The width of the form specifies how much space this form will take. Here
div. we have provided a value of 40%." Margin is set to automatic. Padding has
only 1 value of 10px. This will apply the padding to all foursides of the
form. block4-form h2 refers to the heading "Contact Us". text-align: center
positions the text at the centre. font-weight: 600 makes the text appear bold.

Figure 3.48

Figure 3.47
Issue with the current website layout.
The Home, My Work and About Me sections are placed on top of one
another. But this is not the ideal layout to go with. We need to place those
contents one beside another (horizontally).The simplest and easiest way of
arranging is by using CSS Flexbox.
Flexbox offers an efficient way of laying out and aligning items within a
container.
It also provides a responsive layout, which means that the layout is
automatically adjusted when the container is resized on different devices
like mobile phones, tablets, etc. Using Flexbox, we can quickly and easily
manage the layout of the HTML components, organizing them in a row-
wise or column-wise manner, wrapping them, as well as creating gaps in-
between them.
By creating a demo layout, we will understand the flexbox in detail.
Creating a Flex Container -
Create a container using div and assign it a CSS property of display: flex.
This property converts a simple container into a flex container.

Figure 3.50
Figure 3.49
We have applied CSS to our website and made it more attractive. But
structurally there are some issues.
like a mobile phone, the flex-items adjust itself accordingly without us
having to write additional code. This is the beauty of using Flexbox. –

Figure 3.53 (View on Desktop)

Figure 3.51
Inside this flex container we are going to create sub-containers, which we
refer to as Flex-Items. In this case, we will create 3 flex-items. Assign each
flex item an ID and define its CSS properties as shown. Figure 3.54(View on Mobile Screen)

Note: When we assign an ID to an HTML element, we can access it on a Note:


CSS file, using the #(hash) symbol. Flexbox Properties
1. Flex-direction - This property specifies the direction you want to stack
the flex items, horizontally or vertically. Default is Horizontal.

Figure 3.52
This should generate the following HTML page as an output.
FI - As you can see from the output, the 3 flex-items are automatically
adjusted along-side each other. If you view this webpage in a smaller screen
Figure 3.55
Step 1: Open style.css file and inside the CSS class .block1, add display:
flex property to make it a flex container. Also set the flex-direction and
justify-content property as shown in the figure.
justify-content: space-evenly property to adjust the flex-items.

Figure 3.56
2. Justify-content - This property adjusts the space between the flex-items.
This property can have values such as, space-around, space-between and
center.

Figure 3.58
Part 2 - Structuring My Work section using Flexbox.
Step 1: Open index.html file and wrap the Work components inside a div
and assign it to a class "block2-cards".
Figure 3.57 - 1

Figure 3.57 - 2

Figure 3.57 - 3 Figure 3.59

We will use the flexbox to structure our webpage further. Step 2: Open your style.css file and add the following CSS properties to
block2class, to make it a flex container.
Part 1 - Structuring our Home Section using Flexbox.
Figure 3.60
Note:
This will make the div's with class "block2-heading" and "block2-cards"
behave as flex-items and the property "flex-direction: column" will make
these two div's align on top of one another.
Step 3: Add the following CSS properties to the .block2-cards CSS block.
Figure 3.62
Step 5: Coming back to our CSS file, we are going to add some CSS
properties to the block2-items class.

Figure 3.61
Step 4: Inside the block2-cards container, we have 3 different works to
highlight.
We are going to wrap each work component inside a div to create a better Figure 3.63
layout and assign a class block2-items to it. Step 6: Add some more CSS for the heading and paragraphs inside each
Work Container, so that the contents have proper spaces among them. Since
the h4 and p tag are inside the block2-items container, we can access them
using .block2-items h4 and block2-items p.
Figure 3.66
Part 4 - Providing a Hover Effect on the Work Completed Components CSS
provides a pseudo property: hover that executes when we hover our mouse
Figure 3.64 over a component.
Part 3 - Adding Details Link inside block2 div. Step 1: In the style.css file, add the following CSS property for the hover
Next, we will create a hyperlink that will take us to another page containing effect
the details of the Work Completed. Step 2: The property 'transition: all 200ms ease-in' ensures that the
Step 1: Create 3 links within each of the work containers, using the <a> transition inthe background color will take 200 milli seconds to complete
(anchor)tag and assign a class details_link to it. and ease-in makes the transition start slowly.

Figure 3.67
Part 5 - Creating a Separate HTML Page
Figure 3.65
Create the HTML Pages for displaying the details of each of the Completed
Step 2: CSS rules for the 'details_link' class Works.
Step 3: We are specifying a font size, aligning the content at the center.
Step 4: The text-decoration:none property removes the underline that
appears by default when we create a link.
Step 3: Repeat the above process to create 2 more HTML
files(Work2_Details.html and Work3_Details.html) and add contents for the
remaining Completed Works.

Figure 3.68
Step 1: Create a new file on VS Code, give it a name say Figure 3.70 (Work2_Details.html)
"Work1_Details.html"\ and save it. On this file, create the boiler plate and
inside the body tag create three <p> tags one each for a Title, Duration and
Description and insert the contents.
Step 2: We can further add some CSS to this file. For this purpose, we are
going to create an internal <style> ... </style> tag on this new HTML file
and add the CSS properties.

Figure 3.71 (Work3_Details.html)


Part 6 - Linking the three web pages with the Details link.
Step 1: Print the names of the 3 separate pages that we just created in the
href attribute. Now, try clicking on the links and you will be directed to that
Figure 3.69 specific webpage.
Figure 3.72
Figure 3.74
Part 7 - Converting our About Me container into a Flex container.
Our Final Section Contact Form does not require any changes in its layout
Step 1: Inside our About Me container, wrap the div with .block3-text class as of now, so we are going to keep it the way it is.
and.block3-image class inside another div and give it a class .block3-
content

Figure 3.73
In your style.css file, navigate to .block3 class and give it a display property
of flex,converting it into a flex container. This will also make the block3-
heading andblock3-content as flex items. Note the use of flex-direction:
column property, this is done so that the 2 flex items are aligned one top of
another.
Step 2: Create another CSS property for the block3-content div and convert
this also into a flex container.
FINAL OUTPUT I. Multiple Choice Questions:
1. Which of the following CSS property can be used to show an
image on the background?
a. background-image: url();
b. background-image: src();
c. bg-image: url();
d. background: url();
2. Which of the following CSS properties are related to the
‘background-image’ property?
a. background-position
b. background-size
c. background-fixed
d. background-status
3. Which of the following are valid units of measurements used in
CSS?
a. % (percentage)
b. vh
c. px
d. vx
4. Which of the following will change the heading text color to red,
when the mouse is placed over the text?
a. h1: hover [ color: red; ]
b. h1: hover { color: red; }
c. h1 { color: red; }
d. hover: h1 { color: red; }
5. Which of the following are not valid values of the ‘type’
attribute for the <input> element?
a. type=” text”
b. type=”email”
c. type = “password”
d. type=”digit”
6. Which of the following classes are available in Bootstrap?
a. btnbtn-primary
Figure 3.75 b. btnbtn-warning
c. btnbtn-success
d. btnbtn-information 3. The <script> tag is used to embed the FontAwesome CDN on a
7. Which of the following statements are true about Media webpage
Queries? 4. border-radius property in CSS can be used to transform a
a. Media Queries are used when we want to apply CSS container into a circle
properties based on the screen size 5. flex-direction property in CSS aligns the flex items in a column
b. It uses @media rule i.e one item above another?
c. We cannot define multiple media queries for different screen III. True/False
sizes, in a single CSS file 1. hover:img property in CSS will create a hover effect on the
d. Media Queries consists of ‘max – width’ and ‘min – <img> tag. FALSE
width’ properties to specify screen size. 2. API Key refers to a unique identifier provided by an API.
8. Which of the following statements is true when the screen is TRUE
resized to 700px; 3. .html is the file extension commonly used for external CSS files
a. Height and width will be 300px and the background color FALSE
will be ‘red’. 4. <container> element in <HTML> is used to create a container
b. Height and width will be 300px and the background for content FALSE
color will be ‘blue’. 5. Bootstrap is a front-end framework. TRUE
c. Height and width will be 100% of the screen size and the IV. Question Answers:
background color will be ‘red’. Q1.What is flexbox? Describe flexbox properties.
d. Height and width will be 100% of the screen size and the Ans1. Flexbox offers an efficient way of laying out and aligning
background color will be ‘blue’. items within a container. It also provides a responsive layout,
9. The correct format of applying Media Query for a screen size which means that the layout is automatically adjusted when the
having a max width of 700px is ………………….? container is resized on different devices like mobile phones,
a. #media screen and (max-width: 700px) tablets, etc. Using Flexbox, we can quickly and easily manage
b. @media screen and (max-width: 700px) the layout of the HTML components, organizing them in a row-
c. @media screen and (width: 700px) wise or column-wise manner, wrapping them, as well as creating
d. $media screen and (width: 700px) gaps in-between them.
10. How many media queries can we create for a single webpage? Following is the list of flexbox properties:
a. only 1 a) Flex-direction - This property specifies the direction you want to
b. only 2 stack the flex items, horizontally or vertically. Default is
c. only 3 Horizontal.
d. As many as needed b) Justify-content - This property adjusts the space between the
II. Fill in the Blanks: flex-items. This property can have values such as, space-around,
1. Setting the text-transform Property to uppercase converts the space-between and center.
text into uppercase
2. The Value attribute is used to label a button.
Q2.What are Forms in HTML?
Ans2. Forms are an essential feature for any website that wants to
have some sort of interaction with its viewers. It is mainly used
to collect information from its users.
Q3.Which tag is used to create a horizontal line?
Ans3. <HR> tag is used to create horizontal line.
Q4. What is the purpose of alt attribute in an image tag?
Ans4. Alternate text explains the topic of image if image fails to
display because of any reason.
Q5.What is CSS?
Ans5. Cascading Style Sheet or CSS is a style sheet language used
to design and layout a webpage. CSS lets us modify colours,
fonts, text sizes, apply animations, effects and more. CSS files
have the extension .css.
Q6.What is font weight used for?
Ans6. font-weight is used to set the thickness of the font.

You might also like