diploma in mobile app development · diploma in mobile app development ... what is front-end...
TRANSCRIPT
Lesson 3
Intro to HTML & CSS
MAD Educator: Tadhg Deeney
Diploma in Mobile App DevelopmentPart I
@ShawMobileApp
• Any questions? - Our support team are here to help
• Chat box - Comment and ask us questions
Webinar Interaction
Check your email or members area now
Mobile App Development Competition
Win a Shaw Academy Lifetime Membership
Shaw Academy Lifetime MembershipUltimate Mobile App Development+
Winner will be announced LIVE during Lesson 6
Week 1 Recap
• Introduction to Mobile App Development
• What is MAD?
• Getting Started with Web Technologies
• Advertising & Designing Your App
• The Best Strategy for Your Idea
• Starting Your App
• Summary
• Course Interaction
• Q & A
MOBILE APP DEVELOPMENT TOOL KIT
ONLY €19.99
Webinar Slides for every lesson
Bonus Videos
Summary Notes for every lesson
Exclusive Starter Pack
INCLUDED:
Enhance your learning experience!
Lesson 3
• Week 1 Recap
• Front-End Development
• Introduction to HTML
• Introduction to CSS
• Building Your UI
• Summary
• Course Interaction
• Q & A
What is Front-End Development?
The practice of producingHTML, CSS and JavaScript.
Interaction with the App Directly
User ExperienceThe Client’s Advocate
User InterfaceHuman-Machine Interaction
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?
The Web Technologies
Mobile Web AppsHTML, CSS & JS
ProsCurrent, Evolving LanguagesNot limited to one OSRun on any device’s browserFix Bugs in Real TimeDev Cycle is Fast
ConsCannot use cool hardware featuresRoll your own Payment System
Intro to HTML5
Text Documents on another Computer
HTML TagsTags tell your browser about the
structure of the document
Opening & Closing TagsAngle brackets describe the content
Slash signals a closing bracket
Hyper Text Mark-Up Language
<h1>Hi There!</h1><p>Welcome to MAD Lesson 3.</p><p>I am excited!</p>
<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
<ul><li>Design</li><li>Develop</li><li>Test</li>
</ul>
Intro to HTML5
Inline tags can appear in the line
Tag AttributesA named value that is
inserted to the open tag
HTML LayoutHead
Contains information about the page
BodyContains content you want to display
Hyper Text Mark-Up Language
<p>I am <em>excited!</em></p>
<a href=“http://www.google.com”>Google</a>
<!DOCTYPE HTML><html>
<head><!-- Info about the page -->
</head><body>
<!-- Content User can see --></body>
</html>
Question Time
What HTML5 Tags do
you know?
#ShawMAD
HTML5 creates interesting new opportunities for Mobile Web Apps
Intro to CSS3
Defines the visual presentation
Style RulesUse Selectors to control Properties
Selector = bodyProperty = color
Value = red
Cascading Style Sheets
body {color: red;background-color: #808080;font-size: 12px;font-style: italic;font-weight: bold;font-family: Arial;
}
Intro to CSS3
Being SpecificOnly style certain elements
contained within an existing tag.
Create Custom SelectorsAdd id or class attributes to your HTML document
Add .className for ClassAdd #idName for IDs
Link your CSS to the HTML
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” />
What are we Making?
HTML Layout
Header Here
Content
Footer Here
index.html
User Needs
To input tasksTo see tasks clearlyTo add tasks to listTo remove tasks
Requirements
Input valueTask List AreaAdd ButtonRemove Button
Front-End Development
Intro to HTML
Intro to CSS
Building YOUR UI
Congratulations you have just taken the next step
o Attend all of the lessons live to ask Questions in
real time and benefit the most
o We’re here to help, so contact us anytime!
Summary
Design YOUR App
Tell us Your Experiences from creating a Paper Prototype
Stay tuned for another Challenge on Thursday!
www.youtube.com/c/shawacademyMobileAppDevelopment @shawacademy @ShawMobileApp
• 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
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).
www.facebook.com/shawacademy @shawacademy @ShawMobileApp
QUESTION TIME See you back for Lesson 4 Coding Functionality