├── groups.md ├── README.md └── presentation.md /groups.md: -------------------------------------------------------------------------------- 1 | # Groups for Frontend 2 | 3 | --- 4 | 5 | Only group of only five 6 | 7 | Josef Pospíšil 8 | 9 | Elene Vadatchkoria 10 | 11 | simran virk 12 | 13 | Rajesh Kumar 14 | 15 | Chennuru Rakesh Reddy 16 | 17 | [Content repository](https://github.com/pepe/our-awesome-portfolio) 18 | 19 | 100% 20 | 21 | --- 22 | 23 | Vladislav Rakita 24 | 25 | Petr Bartonicek 26 | 27 | [Content repo](https://github.com/riddya85/study-block-1) 28 | [Link to the site](https://riddya85.github.io/study-block-1/) 29 | 30 | 100% 31 | 32 | --- 33 | 34 | Fati Sylqa 35 | 36 | Alket Shabani 37 | 38 | Issa Basiru 39 | 40 | Braschi velasquez Giancarlo 41 | 42 | [Content Repo](https://github.com/alketshabani/study-block) 43 | 44 | 100% 45 | 46 | --- 47 | 48 | Pratap Modhvadiya 49 | 50 | Ladislav Vondruska 51 | 52 | Davit Demuria 53 | 54 | Kodzitsey Carrethers Kofi 55 | 56 | [Project URL](https://pratap-m.github.io/intro/) 57 | 58 | [Project Repo](https://github.com/pratap-m/intro/) 59 | 60 | 100% 61 | 62 | --- 63 | 64 | Nooshin Assadi Karam 65 | 66 | Seyed Ali Sadat Mousavi 67 | 68 | Myint Myat Thazin 69 | 70 | Meron Ashame 71 | 72 | [Project URL](https://myintmyatthazin.github.io/Portifolio_Project_SB/) 73 | 74 | [Project Repo](https://github.com/MyintMyatThazin/Portifolio_Project_SB) 75 | 76 | 100% 77 | 78 | --- 79 | 80 | Mohamad Abdulrahman 81 | 82 | Hossain MD Ujjal 83 | 84 | Tanim Sakibul Alom 85 | 86 | Yoginkumar Vaniya 87 | 88 | [Repo url](https://github.com/ujjalomc/study-block/blob/master/Yogin.html) 89 | 90 | 100% 91 | 92 | --- 93 | 94 | Artemiy Mikheev 95 | 96 | Margarita Gitcheva 97 | 98 | Andrey Khirnyy 99 | 100 | Michal Zawal 101 | 102 | [Group Repository](https://github.com/GichevaMargarita/portfolio-tutorial-culs) 103 | 104 | 100% 105 | 106 | --- 107 | 108 | Sunny AKA Shivam Dave 109 | 110 | Niguss Solomon 111 | 112 | Aakash Parmar 113 | 114 | Kartikeya Bhardwaj 115 | 116 | [Niguss Solomon Group](https://github.com/solomonniguss/Go-for-it-client-side-project-repo-) 117 | [URL] (https://solomonniguss.github.io/Go-for-it-client-side-project-repo-/) 118 | 100% 119 | 120 | --- 121 | 122 | Konsantinos Zacharakis 123 | 124 | Anouk Mechain 125 | 126 | Alina Topchyi 127 | 128 | [url](https://tehkonnos.github.io/Block_project/) 129 | 130 | 100% 131 | 132 | --- 133 | 134 | 135 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Contemporary Frontend Development 2 | 3 | ## CULS 2019 - study block 4 | 5 | 6 | - [Git](https://git-scm.com) 7 | - [Git Magic](https://crypto.stanford.edu/~blynn/gitmagic/index.html) 8 | - [GitHub](https://github.com) 9 | - [GitHub Desktop](https://desktop.github.com/) 10 | - [Get Atom](https://atom.io/) 11 | - [Atom Packages](https://atom.io/packages) 12 | - [Get Visual Studio Code](https://code.visualstudio.com) 13 | - [Get Brackets](http://brackets.io) 14 | - [Get Google Chrome Canary](https://www.google.com/chrome/browser/canary.html) 15 | - [JSBin](http://jsbin.com) 16 | - [Microservices](https://en.wikipedia.org/wiki/Microservices) 17 | - [Containers](https://en.wikipedia.org/wiki/Operating-system-level_virtualization) 18 | - [Serverless](https://en.wikipedia.org/wiki/Serverless_computing) 19 | 20 | - [HTML](https://www.w3.org/TR/html5/) 21 | - [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) 22 | - [XML](https://en.wikipedia.org/wiki/Extensible_Markup_Language) 23 | - [DOM](https://en.wikipedia.org/wiki/Document_Object_Model) 24 | - [JSON](https://en.wikipedia.org/wiki/JSON) 25 | - [Markdown](https://daringfireball.net/projects/markdown/syntax) 26 | - [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) 27 | 28 | - [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) 29 | - [W3C CSS](https://www.w3.org/Style/CSS/Overview.en.html) 30 | - [SASS](http://sass-lang.com) 31 | - [Less](http://lesscss.org) 32 | - [Bootstrap](http://getbootstrap.com) 33 | - [Semantic](https://semantic-ui.com) 34 | - [ZURB](https://foundation.zurb.com) 35 | - [Responsive design](https://en.wikipedia.org/wiki/Responsive_web_design) 36 | - [Material Design](https://material.io) 37 | 38 | - [JavaScript](https://www.w3.org/standards/webdesign/script) 39 | - [jQuery](http://jquery.com) 40 | - [React.js](https://reactjs.org) 41 | - [Angular.js](https://angular.io) 42 | - [Ember.js](https://emberjs.com) 43 | - [CoffeScript](http://coffeescript.org) 44 | - [TypeScript](http://www.typescriptlang.org) 45 | - [Elm](http://elm-lang.org) 46 | - [ClojureScript](https://clojurescript.org) 47 | - [Node.js](https://nodejs.org) 48 | - [NPM](https://www.npmjs.com) 49 | - [Jekyll](https://jekyllrb.com) 50 | - [Frontend Checklist](https://github.com/thedaviddias/Front-End-Checklist?utm_campaign=explore-email&utm_medium=email&utm_source=newsletter&utm_term=weekly) 51 | 52 | - [Jekyll](https://jekyllrb.com) 53 | - [PWA](https://developers.google.com/web/progressive-web-apps/) 54 | -------------------------------------------------------------------------------- /presentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | author: Pepe 3 | date: 2019-11-27 4 | title: The Intro 5 | --- 6 | 7 | # Contemporary Frontend Development 8 | 9 | --- 10 | 11 | ## Who am I? 12 | 13 | * @pepe | @damnpepe 14 | * World Citizen 15 | * Father 16 | * Programmer 17 | 18 | --- 19 | 20 | ## Who are you? 21 | 22 | * Name & Origin 23 | * Engagement 24 | * Experience 25 | 26 | --- 27 | 28 | ## Organization 29 | 30 | * This week theory 31 | * Next week practice 32 | 33 | --- 34 | 35 | ## Theory 36 | 37 | * Tools 38 | * Content 39 | * Presentation 40 | * Scripting 41 | * PWA 42 | 43 | --- 44 | 45 | # Project 46 | 47 | --- 48 | 49 | ## Final Project 50 | 51 | * Group 52 | * Portfolio page 53 | * Static only 54 | 55 | --- 56 | 57 | ## Final Project 58 | 59 | * Welcome page 60 | * Personal page for participants 61 | * Contact page 62 | 63 | --- 64 | 65 | ## Distribution of points 66 | 67 | * Attendance 30% 68 | * Project 50% 69 | * Test 20% 70 | 71 | --- 72 | 73 | ## Any questions 74 | 75 | Speak now, or be silent for the course 76 | 77 | --- 78 | 79 | ## Let's Go! 80 | 81 | --- 82 | 83 | # Tools 84 | 85 | --- 86 | 87 | ## GitHub 88 | 89 | * Git 90 | * Your work 91 | * OpenSource projects 92 | * GitHub Desktop 93 | 94 | --- 95 | 96 | ## More GitHub 97 | 98 | * Issues, projects 99 | * Pull requests 100 | * Static pages 101 | 102 | --- 103 | 104 | ## More Git(Hub) 105 | 106 | * Commit vs Push 107 | * Branches 108 | * Pull requests vs Participants 109 | 110 | --- 111 | 112 | ## GitHub task 113 | 114 | * Register 115 | * Follow @pepe and star 116 | * Create project repository 117 | 118 | --- 119 | 120 | ## Atom editor 121 | 122 | * GitHub 123 | * OpenSource project 124 | * Many packages 125 | 126 | --- 127 | 128 | ## Visual Studio Code 129 | 130 | * Microsoft take 131 | * Very similar to Atom 132 | 133 | --- 134 | 135 | ## Editors task 136 | 137 | * Install application 138 | * Install HTML, CSS, JS plug-in 139 | 140 | --- 141 | 142 | ## Chrome Developer tools 143 | 144 | * Standard 145 | * Many extensions 146 | * Task install Canary 147 | 148 | --- 149 | 150 | ## JSBin 151 | 152 | * Fast check 153 | * Found on the web 154 | * JS libs, Doc/Style types 155 | 156 | --- 157 | 158 | ## Story - reason 159 | 160 | * Microservices 161 | * Containers 162 | * Serverless 163 | 164 | --- 165 | 166 | 167 | # HTTP statuses 168 | 169 | --- 170 | 171 | # Finally Content 172 | 173 | --- 174 | 175 | ## Document vs Data 176 | 177 | * Web 178 | * Apps 179 | * Examples 180 | 181 | --- 182 | 183 | ## HTML 184 | 185 | * History 186 | * Incarnations 187 | * HTML5 188 | * Task template 189 | 190 | --- 191 | 192 | ## XML 193 | 194 | * History 195 | * Not really human readable 196 | * Java world 197 | * Incarnations 198 | 199 | --- 200 | 201 | ## DOM 202 | 203 | * HTML & XML 204 | * Tree structure 205 | * Hierarchical 206 | * Object Oriented 207 | 208 | --- 209 | 210 | ## JSON 211 | 212 | * History 213 | * Booming - Lingua Franca 214 | * API 215 | * Task - JSON example 216 | 217 | --- 218 | 219 | ## Media 220 | 221 | * Images 222 | * Sound 223 | * Video 224 | 225 | --- 226 | 227 | ## Others 228 | 229 | * Markdown 230 | * SVG 231 | * Binary 232 | * Task some more 233 | 234 | --- 235 | 236 | ## Story - communication 237 | 238 | * It's all about it 239 | * Best way 240 | * Cambrian explosion 241 | 242 | --- 243 | 244 | # Presentation 245 | 246 | --- 247 | 248 | ## What we see 249 | 250 | * Sizes 251 | * Positions 252 | * Visuals 253 | 254 | --- 255 | 256 | ## Tag attributes 257 | 258 | * Beginning 259 | * Each tag had their set 260 | * Browser dependent 261 | 262 | --- 263 | 264 | ## CSS 265 | 266 | * Separation of presentation and content 267 | * HTML, XML, SVG 268 | * History 269 | 270 | --- 271 | 272 | ## CSS structure 273 | 274 | * Selectors 275 | * Declarations 276 | * Properties 277 | 278 | --- 279 | 280 | ## Preprocessor languages 281 | 282 | * SASS 283 | * Less 284 | * Stylus 285 | 286 | --- 287 | 288 | ## Frameworks 289 | 290 | * Bootstrap 291 | * Semantic 292 | * ZURB 293 | 294 | --- 295 | 296 | ## Responsive design 297 | 298 | * Many sizes 299 | * Mobile first 300 | 301 | --- 302 | 303 | ## Material design 304 | 305 | * Google 306 | 307 | --- 308 | 309 | ## Office Fabric 310 | 311 | * Microsoft 312 | 313 | --- 314 | 315 | ## Story - communication 316 | 317 | * UX 318 | * Response times 319 | * Optimistic updates 320 | 321 | --- 322 | 323 | # Scripting 324 | 325 | --- 326 | 327 | ## JavaScript 328 | 329 | * History 330 | * Proper name 331 | * The Browser Language 332 | 333 | --- 334 | 335 | ## Frameworks 336 | 337 | * Whole universe 338 | * Almost everything 339 | * Usecase 340 | 341 | --- 342 | 343 | ## Popular FW 344 | 345 | * jQuery 346 | * React.js 347 | * Angular.js 348 | * Vue.js 349 | 350 | --- 351 | 352 | ## Transpilers 353 | 354 | * Always JS on the end 355 | * Building 356 | * Webpack, Gulp 357 | 358 | --- 359 | 360 | ## Transpiled languages 361 | 362 | * CofeeScript ✝ 363 | * TypeScript 364 | * Elm 365 | * ClojureScript ♥ 366 | 367 | 368 | --- 369 | 370 | ## Not only frontend 371 | 372 | * Node.js 373 | * npm 374 | * Next semester 375 | 376 | === 377 | 378 | --- 379 | author: Pepe 380 | date: 2019-11-28 381 | title: The Outro 382 | --- 383 | 384 | # Frontend developer Roadmap 385 | 386 | --- 387 | 388 | ## Story - all together 389 | 390 | * Static site generators 391 | * Jekyll 392 | * GitHub pages 393 | 394 | --- 395 | 396 | # PWA 397 | 398 | --- 399 | 400 | ## More pepe to your 401 | 402 | * @damnpepe Twitter/Mixcloud/Refind 403 | * +4207742778707 WhatsApp, iMessages 404 | 405 | --- 406 | 407 | ## Shout-out 408 | 409 | --- 410 | 411 | ## pepe's out 412 | 413 | === 414 | --------------------------------------------------------------------------------