Web Development Complete PPT

2. Agenda of Today’s Class – (25th Jan 23)
 CSS Borders
 CSS Border Radius
 CSS Border Shorthand Property
 HTML + CSS
 (Web Page Structure)
 Different Examples
 Live Coding
 Practice / Test
 Questions & Answers
Lec - CSS

3. Lec - CSS
 Basic tags understanding
 Div tag usage
 Combination of different tags to make a web page
 You will be able to make any kind of page
 CSS usage with HTML
 CSS usage in Page designing
 Front End Job Opportunities / Internships
 Fiverr / Free-lancing skills
LEARNING OUTCOME

4. Lec - CSS
Web Page Structure

5. Lec - CSS
Web Page Structure
PNY Trainings – Pakistan No. 1
50
px

6. Lec - CSS
Web Page Structure

7. Lec - CSS
Web Page Structure

8. Lec - CSS
Web Page Structure

9. Lec - CSS
Web Page Structure

10. Lec - CSS
Web Page Structure

11. Lec - CSS
Web Page Structure

12. Lec - CSS
The CSS border properties allow you to specify the style, width,
and color of an element's border.
CSS Borders

13. Lec - CSS
CSS Borders

14. Lec - CSS
CSS Rounded Borders

15. Lec - CSS
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the
properties for the top border in one declaration.
Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the width of the left border
This example demonstrates how to set the width of the left border.
Set the color of the four borders
This example demonstrates how to set the color of the four borders. It
can have from one to four colors.
Set the color of the right border
This example demonstrates how to set the color of the right border.
CSS Borders Practice

16. Lec - CSS
All the top border properties in one declaration
This example demonstrates a shorthand property for
setting all of the properties for the top border in one
declaration.
p {
border-style: solid;
border-top: thick double #ff0000;
}

17. Lec - CSS
Set the style of the bottom border
This example demonstrates how to set the style of the
bottom border.
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}

18. Lec - CSS
Set the width of the left border
This example demonstrates how to set the width of the
left border.
p {
border-style: solid;
border-left-width: 15px;
}

19. Lec - CSS
Set the color of the four borders
This example demonstrates how to set the color of the four
borders. It can have from one to four colors.
p.one { border-style: solid;
border-color: #0000ff; }
p.two { border-style: solid;
border-color: #ff0000 #0000ff; }
p.three { border-style: solid;
border-color: #ff0000 #00ff00 #0000ff; }
p.four { border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); }

20. Lec - CSS
Set the color of the right border
This example demonstrates how to set the color of the
right border.
p {
border-style: solid;
border-right-color: #ff0000;
}

21. Lec - CSS
NEXT WEEK TASKS
 Make atleast 3 Web Page Structure
 Use you HTML and CSS Skills
 Try to add more features in Page
 Each Task shall be graded 100 marks
 3-Projects (Total 300 Marks)
 More than 3 Projects should be graded 200 marks
each Project