# W7 Monday: Mod 3 Intro, Design Principles, HTML Fundamentals --- ## Welcome to Mod 3 --- ### Mod 2: Data Structures and Algorithms - Problem Solving Skills - Debugging <!-- we are going to set aside data structures and algorithms and start your learning in web development. This doesn't mean that your knowledge of DS and A is all for nothing. Data structures and algorithms put you on a fast paced track to gain those skills in problem solving and debuggging which are all fundamentals for any programmer, not just for web developers. You might see some familiar data structures in this module. In those times, I encourage you to be curious and ask yourselves the time and space complexities of some of the operations that you do on those data structures. --> --- ### Mod 3: Intro to Full-Stack <img src="https://i.imgur.com/eRsC8vd.jpg" alt="fullstack drawing" width="400"> <!-- - Explain the 3 parts of the stack - Associate client to frontend and server to backend --> --- ### Module Breakdown | Week | Content | | ------ | ------- | | Week 7 | HTML and CSS | | Week 8 | HTTP, REST, Servers, APIs, and Promises | | Week 9 | Browser, DOM, Events, and Storage | --- ### Every Day - Morning boost - Morning demos/quizzes/practices/discussions - Afternoon long practices - EOD lecture - Project solutions and Study Guides in the [mod-3-feb-2022](https://github.com/javiermortiz/mod-3-feb-2022) repo - Homework <!-- - Set the repo link as the description of the lecture questions channel - Don't skip homework, all the morning practices assume you went over the homework readings --> --- ### Every Week - Practice assessment - Practice assessment walkthrough - Kahoot - Monday assessment --- ### Reminders - Cameras on during lecture and pairing - Raise your hand feature for questions during lecture - Slack lecture questions channel for debugging or slightly off-topic questions - We don't monitor Zoom chat for questions <!-- If your question requires debuggin, use the Slack lecture questions channel --> --- ### Meet the team! --- ## Morning Boost - Monday Morning Boost (3 min) --- ## Week 7 Roadmap --- ### What is Full-Stack? <img src="https://i.imgur.com/fjsB59q.png" alt="full stack image" width="400"> <!-- - The client/browser makes a request - The server responds with some assets like an HTML and CSS files --> --- ### HTML and CSS <img src="https://i.imgur.com/ABWOS3C.png" alt="html logo" width="250" height="300"> <img src="https://i.imgur.com/SuYNsdd.png" alt="css logo" width="200" height=300> <!-- If we were building a home, html would be the bricks that provide the structure of the house, and css would be paint. HTML provides the structure of the website (here goes the title, here goes a paragraph, here goes an image), whereas CSS provides the aesthetics, make the title this big with this font, and make the image round with a red border. --> --- ### Week 7 Breakdown Monday - Web Design Principles - HTML Fundamentals Tuesday - CSS Fundamentals - Box Model and Positioning --- Wednesday - Flexible Box Model - Grid Layout - Media Queries --- Thursday - Interactivity - Design Spec - CSS Frameworks --- Friday - Netlify Deployment with Static Assets - Study day --- ## Web Design Principles --- ### Web Design Principles Learning Objectives - Select a palette of colors that follow basic color theory - Demonstrate a basic understanding of spacing and typography for readable interfaces - Demonstrate familiarity with standard navigation iconography and conventions - Be able to identify and label HTML elements in a low-res wireframe spec --- ### Tasks - Design Principles Reading (5 min) --- ### Web Design Principles Demo --- ### Tasks - Exercise: Design Principles (10 min) <!-- Design Principles Discussion (20 min) --> --- ## HTML Fundamentals --- ### HTML Fundamentals Learning Objectives - Appropriately structure an HTML page - Identify, utilize, and distinguish common semantic HTML tags --- - Compare and contrast similar semantic HTML tags - div vs. span vs. p - h1 vs. h2 vs. h3 - ol vs. ul - br vs. hr - link vs. a - head vs. header - head vs. body vs. footer --- ### Tasks - Basics of HTML (6 min) - SOLO Walkthrough: Semantic HTML (30 min) <!-- Semantic HTML Discussion (10 min) --> --- ### Tasks - Wireframes Reading (4 min) --- ### HTML Fundamentals Demo --- ### Tasks - Exercise: Wireframes (20 min) Image link: https://appacademy-open-assets.s3-us-west-1.amazonaws.com/Modular-Curriculum/content/css/practice-wireframe.png <!-- Wireframes Discussion (10 min) --> --- ## Tasks - HTML from Wireframes Long Practice (2hrs) Image link: https://appacademy-open-assets.s3-us-west-1.amazonaws.com/Modular-Curriculum/content/css/html-practice-wireframe.png <!-- No EOD. We'll review the project's solution tomorrow morning -->