Rubikal internal knowledge share sessions series (UI 101)

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