COURSE INTRODUCTION

1. Course requirements

2. TEXT Course ; table of contents

3. Questions, Reviews and Course update

4. Internet and Web Pages

5. Responsive design e adaptive design

UX and WEB DESIGN

6. Introduction to the UX and web design use

7. Typography: Serif and Sans Serif

8. Typography : Text dimensions

9. Typography: Spacing and aligning

10. Colors: Relation-ship and Contrast Logic

11. Colors: Combinations

HTML:THE BASICS

12. Introduction to the HTML language

13. Visual Studio Code and the others..

14. Setting up Visual Studio Code

15. !DOCTYPE, html and body + Preview

16. Paragraphs, Headings and Line Breaks

17. Bold, italics and underlined

18. Quotes

19. Tables

20. Lists

21. Images

22. Hypertextual links (Links)

23. EXERCISE #1

24. EXERCISE #1 : THE SOLUTION

HTML: HEAD AND SEO ELEMENTS

25. Introduction to the Head tag

26. Title

27. Meta description

28. Meta keywords

29. Meta robots

30. Other Meta tags

31. Base, Link, Script and Style

32. EXERCISE # 2:

33. EXERCISE # 2 : THE SOLUTION

HTML: ELEMENTS OF THE FORM

34. Introduction to the Forms

35. Action and Method

36. Input

37. Label

38. Select

39. Textarea

40. Fieldset and Legend

41. Datalist

42. Readonly, Disabled, Required and Maxlength

HTML: THE HTML5 STANDARD

43. Introduction to the HTML5 standard

44. Div

45. Header

46. Nav

47. Section

48. Article

49. Footer

50. Aside

51. Images

52. ESERCISE #3

53. EXERCISE # 3 : THE SOLUTION

CSS3: THE WEB PAGE STYLE

54. Introduction to the style sheets (CSS)

55. The style sheets syntax

56. EXTRA HTML: Span

57. The structure of a style sheet with type selectors

58. Class and ID selectors

59. Pseudo-class and pseudo-element selectors

60. Hierarchy and attribute selectors

CSS3: THE BASE ATTRIBUTES

61. CSS in an HTML page

62. Text coloring

63. Page background

64. Page borders

65. Element outer margins

66. Element inner margins

67. Text fonts

68. Comments to the style sheet

69. EXERCISE # 4

70. EXERCISE # 4: THE SOLUTION

CSS3: THE SPACE ATTRIBUTES

71. Height and Width

72. Display Property

73. Position in the page

74. Overflow and z-Index

CSS3: ADVANCED ATTRIBUTES

75. Hexadecimal coloring and RGB

76. Advanced properties of the Background

77. Images within the borders

78. Rounded borders and shadowing

79. ESERCISE # 5

80. ESERCISE # 5 : THE SOLUTION

81. EXTRA HTML: use of Google Font

82. Advanced management of the textual properties

83. BONUS: Animations with CSS3

84. Responsive Design: Media Queries

85. ESERCISE # 6


86. ESERCISE # 6 : THE SOLUTION


CSS3 FLEXBOX

87. Introduction to the Flexboxes

88. Parent container properties : flex-direction

89. Parent container properties: flex-wrap

90. Parent container properties: justify-content

91. Parent container properties: align-items

92. Parent container properties: align-content

93. Parent container properties: flex-grow and flex-shrink

94. Parent container properties: flex-basis

95. Parent container properties: flex

96. Parent container properties: order

97. Parent container properties: align-self

98. ESERCISE # 7

99. ESERCISE # 7 : THE SOLUTION

CSS3 GRID

100. Introduction to the Grids

101. Container and Item

102. Rows, Columns and Gap in the container

103. Rows and Columns in the Item

104. Template and Grid Area

105. Justify and Align like in Flexbox

106. Grid and Responsive Design

BOOTSTRAP 4

107. Introduction to Bootstrap

108. Inserting Bootstrap into your own website

109. Layouts and Breakpoints

110. Text and Colors

111. Borders and radius

112. Button (Bootstrap + HTML)

ARTIMAGE PROJECT : BOOTSTRAP 4 + JAVASCRIPT

113. Javascript and jQuery

114. Setting the ARTIMAGE Project

115. Navigation bar : Brand Logo

116. Navigation bar : Menu

117. Image gallery

118. Jumbotron

119. Form and Footer

120. HTML/CSS for UX

THISISME PROJECT: HTML5

121. Setting the THISISME Project

122. Background and Google Font

123. Logo and Menu

124. About

125. Services

126. Portfolio

127. Curriculum: HTML

128. Curriculum: Stylesheet

129. Contacts

130. Error number two

EXTRA: SASS

131. Introduction to the Syntactically Awesome Stylesheet

132. SASS Environment

133. Compiling SASS

134. Variables in SASS

135. Nesting in SASS

136. @extend command

137. @mixin command

138. Media Queries

FRONT-END ADDITIONAL CONTENT

139. Free Hosting for the Thisisme Project!

140. We will decide together the next steps to follow