welcome to BOILERCAMP HOW TO WEB DEV

Transcription

1 welcome to BOILERCAMP HOW TO WEB DEV

2 Introduction / Project Overview

3 The Plan

4 Personal Website/Blog

5

6

7 Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js MongoDB / MVC

8 It s okay if you don t understand everything.

9 It s okay if you don t finish a section.

10 Please ask for help.

11 BoilerCamp.slack.com

12 Our Environment

13

14 Getting from an Idea to a Product

15 Ideas are easy. Implementation is hard.

16

17

18

19

20 Tech Stack

21 What s a tech stack?

22 A tech (technology) stack is all of the technologies that make up our application.

23 What devices will the application run on? Will my application need a server? Will I need to store data somewhere?

24 What devices will the application run on? Desktop and mobile.

25 What devices will the application run on? Desktop and mobile. (HTML / CSS)

26 Will my application need a server? Yup.

27 Will my application need a server? Yup. (Node.js / Express.js)

28 Will I need to store data somewhere? Yup.

29 Will I need to store data somewhere? Yup. (MongoDB)

30 Frontend versus Backend

31 Frontend

32 Frontend Anything that the user can see and interact with.

33 Frontend HTML CSS JavaScript

34 Backend

35 Backend Anything that the user can t see and interact with.

36 Backend Ruby on Rails PHP Node.js Java Django

37 How Internet Browsers Work

38 Text Magic Product

39 Java Code

40 Java Code Java Compiler

41 Java Code Java Compiler Android App

42 HTML Code

43 HTML Code Browser

44 HTML Code Browser Webpage

45 Webpage, Website, Webapp

46 Webpage A single web document.

47 Website A collection of webpages.

48 Webapp A website with a backend.

49 Recap

50 The Plan Our Environment Getting from an Idea to a Product How Internet Browsers Work

51 Questions?

52 HTML / CSS

53 What are HTML & CSS?

54 What is HTML?

55 HyperText Markup Language.

56 HyperText Markup Language.

57 Markup?

58 HTML makes up all of the content of a webpage.

59 HTML is not a programming language.

60 Hello World in HTML

61

62

63 Breaking Hello World Down

64 Tags

65

66

67 Attributes

68

69 Common Tags

70 html head body p, h1, h2, h3, h4 div

71 What is CSS?

72 Cascading Style Sheets.

73 CSS is the language used to style the content of a webpage.

74 Beautifying Hello World with CSS

75

76

77 Breaking Beautified Hello World Down

78 Selectors

79

80 Properties

81

82 Classes

83

84 Separating CSS from HTML

85 index.html style.css

86 Recap

87 HTML is content CSS is style

88 Questions?

89 Client-Side JavaScript

90 What is JavaScript?

91 JavaScript is a programming language

92 JavaScript is a programming language that runs in the browser

93 Hello World in JavaScript

94

95

96 Breaking Hello World Down

97 Using a function called console.log

98 Similar to System.out or printf

99 Variables

100 Variables store information

101 JavaScript variables are special

102 Instead of declaring ints, floats, strings, etc. JavaScript infers everything at runtime

103 Everything is declared with var

104 Back to Hello World

105

106

107

108 Functions

109 Functions encapsulate the logic

110 Functions have 3 parts: Arguments, Body, Return

111 Arguments are the inputs

112 Body is the logic

113 Return is the output

114 Back to Back to Hello World

115

116

117

118

119

120 But how can we use this with our website?

121 What is jquery?

122 Let s JavaScript manipulate the DOM

123 What s the DOM?

124 DOM is a model of all the HTML on the page

125 jquery selects things in the DOM (similar to CSS)

126 jquery adds logic to those things

127 jquery can add effects and it can add events

128 Back to Hello World

129

130

131

132

133 Recap

134 JavaScript is a programming language typically run on browsers jquery is a library that lets us change things on the web page

135 Questions?

136 Node.js / Express.js

137 What are Node.js and Express.js?

138 What is Node.js?

139 Node.js is the only real dev language

140 Node.js is a wrapper around JavaScript

141 Instead of only running the browser, JavaScript can now run outside the browser

142 Hello World in Node.js

143

144

145

146

147

148

149 Node.js also uses JSON

150 So what s JSON?

151 JavaScript Object Notation

152 It s a serialized version of a JavaScript object

153 We have keys and values

154 And the values of a key can be another object

155 What is Express.js?

156 Express.js Framework for building web apps

157 Express.js takes care of the server set up, so you can just focus on the logic

158

159 Hello World in Express.js

160

161 Routes

162 Routes are like roads for the internet

163 They handle the different URLs of your site

164 Routing example in Express.js

165

166

167

168 But what if we want to handle server logic in our HTML?

169 What is Handlebars?

170 Templating engine

171 Handles server logic in your HTML

172 Handlebars Example

173

174

175

176 Recap

177 Node.js lets you run JavaScript outside of the browser Express.js is a Node.js framework for building web apps Handlebars lets us include server logic in the frontend

178 Questions?

179 MongoDB / MVC

180 What are MongoDB & MVC?

181 What is MongoDB?

182 MongoDB is a database

183 Let s us store a ton of information in the form of JSON (BSON)

184 It s a document based data store

185 Allows us to insert JSON, update it, and retrieve it later.

186 What is MVC?

187 MVC is a way to organize and structure your code

188 Controller Model View

189 Database Controller Model View

190 Recap

191 MongoDB is a super JavaScript friendly database MVC is a great way to organize code

192 Questions?

193 Thanks!