This document provides an overview of a UI 101 session which covers HTML, CSS, Sass, Bootstrap, and how to think like a UI developer. The session includes introductions to basic HTML syntax and structure, CSS syntax and properties like box model, positioning, flexbox, and media queries. It also compares CSS to Sass and provides examples of animating CSS and building a responsive website layout with common elements like navbar, sections, and footer. The document serves as a guide for the topics and code examples that will be covered during the UI 101 training session.

1. “ UI 101 ”
Mohamed Said
UI Engineer

2. Session content
● HTML
● CSS
● Sass
● Bootstrap
● Fix style issue
● How To Think Like A Ui developer ?
● The easiest way to animate CSS

3. Web development process
Analyst
UI
Developer
&
Front-End
Back-EndDesigner tester

4. UI
Developer
&
Front-End
HTML CSS
Bootstrap
JAVASCRIPT
JQUERY

5. FRONT END
Developer
UI
Developer

6. HTML

7. CSS
HTML

8. JAVASCRIPT
CSS
HTML

9. WHAT IS HTML ?
(Hypertext Markup Language)

11. HTML Syntax

12. Self closing tag

13. HTML Syntax

14. Basic Structure
Setting
version of
HTML5

15. Head
<title> <style>
<meta>
<script>
Description
keywords

16. Title Tag
Meta Description Tag
body

17. Heading

18. Link
<a href="url">link text</a>
<a href="https://www.google.com">Google</a>
Jump to :
<a href="#id">link text</a>
<div id="id">Content</div>
<a href="https://www.google.com" target="_blank">Google</a>

19. Images
<img src="img/rubikal.png" /> <img src="rubikal.png" alt="Rubikal" />
If a browser cannot find an image, it will display
the alternate text:

20. Divs

21. Block & Inline Element

22. Block & Inline Element

25. WHAT IS CSS ?
(Cascading Style Sheets)

26. CSS Syntax
Selector/element {
Property : value;
}

27. Class ID
.class{
Property : value;
}
#id{
Property : value;
}

28. Box Model

29. Box Model
width :100px;
height:100px;
Next : padding 10px

30. Padding
padding : 50px;
( top right bottom left )
padding : 50px 10px;
( top bottom left right)
padding : 50px 10px;
( top bottom left right)
padding : 50px 10px 0px;
( top left right bottom)

31. Box Model
padding :10px;
width :100px;
height:100px;
Next : border 5px

32. Box Model
border: 5px solid #000;
width :100px;
height:100px;
Next : margin 10px

33. Box Model
margin :10px;
width :100px;
height:100px;

34. Box Model
width :100px;
height:100px;
Box-sizing:content-box;
Box-sizing:border-box;

35. positions
absolute
Relative
Fixed

36. position : absolute;
Top :0;
left:0;
positions

37. position:static;

38. position:static;
position : absolute;
Top :0;
left:0;

39. position:relative;

40. position:relative;
position : absolute;
Top :0;
left:0;

41. position : fixed;
bottom :0;
right:0;
positions

42. position:relative;

43. position:relative;
position : fixed;
bottom :0;
right:0;

44. positions

45. ::after and ::before

46. CONTENT
CONTENT
::after and ::before

47. Z-index

48. Display
height:100px;

49. Flex Box basic

50. Flex Box basic
<nav class="container">
<div class="home">Home</div>
<div class="search">Search</div>
<div class="logout">Logout</div>
</nav>

51. Flex Box
.container {
display: flex;
}

52. Flex Box
.container {
display: flex;
justify-content: center;
}

53. Flex Box
.container {
display: flex;
justify-content: space-between;
}

54. Flex Box
justify-content

55. Flex Box
flex-direction

56. Flex Box
align-items

57. Flex Box
.logout {
margin-left: auto;
}

58. Flex Box
.container div {
flex: 1;
}

59. Flex Box
.search {
flex: 1;
}

61. @media screen and
(max-width:720px) {
.container {
display: block;
}
}

62. @media screen and
(min-width:720px) {
.container {
display: block;
}
}

63. CSS VS SASS

64. CSS VS SASS

66. CSS VS SASS

67. Bootstrap

70. Bootstrap

71. Bootstrap

72. Bootstrap

73. The easiest way to animate CSS ?

74. The easiest way to animate CSS ?

75. Problem ?

76. Problem ?

77. solve !

78. Problem ?

79. solve !

80. How To Think Like A ui developer ?
height:60px;
height:40px;

81. How To Think Like A ui developer ?
https://jsfiddle.net/faj9cdv3/1/

82. How To Think Like A ui developer ?
Navbar
Sec 1
Sec 2
Footer

83. THANKS
Mohamed Said
UI Engineer