Diploma in Mobile App Development Part I

Size: px

Start display at page:

Download "Diploma in Mobile App Development Part I"

Patrick Hall
5 years ago
Views:

1 Diploma in Mobile App Development Part I Lesson 3 Intro to HTML & CSS MAD Educator: Tadhg

2 Webinar Interaction Any questions? - Our support team are here to help Chat box - Comment and ask us questions

3 Mobile App Development Competition Win a Shaw Academy Lifetime Membership Check your or members area now Ultimate Mobile App Development+ Shaw Academy Lifetime Membership Winner will be announced LIVE during Lesson 6

4 Introduction to Mobile App Development What is MAD? Getting Started with Web Technologies Week 1 Recap Advertising & Designing Your App The Best Strategy for Your Idea Starting Your App Summary Course Interaction Q & A

5 MOBILE APP DEVELOPMENT TOOL KIT INCLUDED: Exclusive Starter Pack Webinar Slides for every lesson Summary Notes for every lesson ONLY Bonus Videos Enhance your learning experience!

6 Week 1 Recap Front-End Development Introduction to HTML Lesson 3 Introduction to CSS Building Your UI Summary Course Interaction Q & A

8 What is Front-End Development? The practice of producing HTML, CSS and JavaScript. Interaction with the App Directly User Experience The Client s Advocate User Interface Human-Machine Interaction

9 What is Front-End Development? A Mix of Programming and Layout that powers the visuals and interactions of the web Who are your Users? What is happening? When will they interact? Where are they? Why will they use your app?

10 The Web Technologies Mobile Web Apps HTML, CSS & JS Pros Current, Evolving Languages Not limited to one OS Run on any device s browser Fix Bugs in Real Time Dev Cycle is Fast Cons Cannot use cool hardware features Roll your own Payment System

11 Intro to HTML5 Hyper Text Mark-Up Language <h1>hi There!</h1> <p>welcome to MAD Lesson 3.</p> <p>i am excited!</p> <ul> </ul> <li>design</li> <li>develop</li> <li>test</li> Text Documents on another Computer HTML Tags Tags tell your browser about the structure of the document Opening & Closing Tags Angle brackets describe the content Slash signals a closing bracket <h1> - Heading Tag that displays text in Bold (h1 h6) <p> - Paragraph Tag that contains the text on one line <ul> - Unordered List bullet points <li> - List Item displays the content on that line

12 Intro to HTML5 Inline tags can appear in the line Tag Attributes A named value that is inserted to the open tag HTML Layout Head Contains information about the page Body Contains content you want to display Hyper Text Mark-Up Language <p>i am <em>excited!</em></p> <a href= >Google</a> <!DOCTYPE HTML> <html> <head>  </head> <body>  </body> </html>

13 Question Time What HTML5 Tags do you know? HTML5 creates interesting new opportunities for Mobile Web Apps #ShawMAD

14 Intro to CSS3 Cascading Style Sheets Defines the visual presentation Style Rules Use Selectors to control Properties Selector = body Property = color Value = red body { color: red; background-color: #808080; font-size: 12px; font-style: italic; font-weight: bold; font-family: Arial; }

15 Cascading Style Sheets p a {font-style: italic;}.loud {font-style: bold;} #highlight {background-color:_;} style.css css/style.css <link rel= stylesheet href= type= text/css /> Intro to CSS3 Being Specific Only style certain elements contained within an existing tag. Create Custom Selectors Add id or class attributes to your HTML document Add.className for Class Add #idname for IDs Link your CSS to the HTML

16 What are we Making?

17 HTML Layout index.html User Needs Header Here Requirements To input tasks To see tasks clearly To add tasks to list To remove tasks Content Input value Task List Area Add Button Remove Button Footer Here

18 Front-End Development Intro to HTML Summary Intro to CSS Building YOUR UI Congratulations you have just taken the next step o o Attend all of the lessons live to ask Questions in real time and benefit the most We re here to help, so contact us anytime!

19 Design YOUR App Tell us Your Experiences from creating a Paper Prototype Stay tuned for another Challenge on

20 The next session is Coding Functionality Introduction to JavaScript Variables & Functions Starting Arrays Control App Behaviour Your Next Lesson Lesson 4 Attend all of the lessons LIVE and your knowledge will grow Shaw Academy Lifetime Membership Prize during Lesson 6

21 Student Feedback We strive for continuous improvement After the lesson we will ask you to rate the lesson on a scale of 1 (lowest) to 5 (highest).

22 QUESTION TIME See you back for Lesson 4 Coding Functionality

Diploma in Web Development Part I

Diploma in Web Development Part I Lesson 1 The Web Development Full Stack Presented by: Julian Quirke Web Development Educator Lesson 1 About us Course Agenda Member Area & Community Course Engagement