1

Twocode/WebcoursesforjournalistsDepartmentofJournalism,UniversityofFloridaInstructor:MindyMcAdams,mmcadams@jou.ufl.eduIntrotoWebAppsWeek1

Introductiontothecourse. DifferentiatingWebdesignanddevelopment. Tools,technologiesandoutcomes.

Week2 RolesofHTML,CSS,JavaScript.Webbrowsers,client/server,request/response. IntroductiontoHTML:structure,markup,images,links. Assignment1:AnHTMLpagewithheadings,paragraphsandtwoimages(HTMLonly)

Week3 HTMLpart2:Textmarkup,lists,links,images.Blockvs.inlineelements.DIVandSPAN. Assignment2:Arecipepagewithlinks,imagesandlists(HTMLonly)

Week4 IntroductiontoCSS:Overview,selectors,colors,backgrounds,DIVs,pseudo-classes. IntroductiontoGitHub. Assignment3:Apagewithheader,footer,article,asideandfigure,allwithdifferentbackgrounds,plusanexternalstylesheet(HTMLandCSS).PosttoGitHub.

Week5 CSSpart2:Margins,padding,borders,boxmodel,box-sizing,floatsandposition. Assignment4:TwoseparatepageswiththesameHTMLcontent,eachwiththreesections,eachpagestyleddifferently,plusanexternalstylesheetforeachpage(HTMLandCSS).PosttoGitHub.

Week6 Webfonts,includingGooglefonts.Emsandpercentages.Handlingtypography. AccessibilityandWebstandards. Introductiontoresponsivedesign. Assignment5:Typographyexercise(HTMLandCSS).Responsivedesignformobile.PosttoGitHub.

2

Week7 JavaScriptintroduction:Variables,numbersandstrings,Booleans,basicmath,if-statements,arrays,loops.Useofconsole.log()vs.tags. IntroductiontojsFiddle. Assignment6:WebpagewithJavaScriptalert,confirmandpromptdialogs(HTMLandJavaScript).PosttojsFiddle.

Week8 JavaScriptpart2:Functions(argumentsandreturns),scopeofvariables,moreif-statements,for-loopsandarrays.Definingproblems.Problembreakdowns.Pseudocode. Assignment7:PracticewithJavaScriptfunctions.PosttojsFiddle.

Week9 JavaScriptpart3:While-loops,do-while,loopswithinfunctions,functionswithinloops,combiningif-statementsandloops. IntroductiontoHighcharts. Assignment8:WorkwithHighcharts(HTMLandJavaScript).PosttoGitHub.

Week10 HTMLforms;designandlayoutforformsandquizzes;JavaScriptandforms. IntroductiontoBootstrap,aWebframework.Simplifiesthewholeprocessofmakingresponsivepages. Assignment9:CreateaquizformwithJavaScriptusingtheBootstrapframework.PosttoGitHub.

Week11 JavaScriptpart4:Theswitchstatement,Booleans,arrays,objects. IntroductiontojQueryandtheDOM. Assignment10:Setupyourownwebsite.Completeasmallprojectanduploadtheprojectfoldertoyourwebsite.

Week12 jQuerypart2:Interactiveimagedisplays,contentoverlays,accordionsandmenus. HTML5audioandvideoembeds,formats. Assignment11:BuildamusicsamplerappwithjQueryandaswitchstatement(HTML,CSSandJavaScript).PosttoyourwebsiteandtoGitHub.

Week13 Producinginteractivemaps. IntroductiontoLeaflet. Assignment12:CreateaninteractivemapwithLeaflet.Posttoyourownwebsite.

Week14 Projecttroubleshootingandworkshop.

3

Assignment:Postpart1ofProjecttoGitHub.Week15

Projecttroubleshootingandworkshop. Projectpresentations. Assignment:Postpart2ofProjecttoGitHub.

Week16 Projecttroubleshootingandworkshop. Projectpresentations. Assignment:Postpart3ofProjecttoGitHub.Finalprojectpostedtostudentsownwebsite.Fullcoursewebsite:https://introwebapps.wordpress.com/

AdvancedWebAppsPrerequisite:IntrotoWebAppsWeeks14

Webdatabases:SQLqueries,MySQL,PHP,Ajax(jQuery),databasesecurity,preparedstatementsinPHP. Twogradedassignments:Studentscreatelivedatabaseappsontheirownwebsites.

Week5 Introductiontothecommandline. IntroductiontoPython(aversatileprogramminglanguage).

Weeks68 WebscrapingwithPython. StudentscontinuetolearnPythonwhilealsolearningWebscraping. Gradedassignmentsincludeascrapingprojectofthestudentschoosing.

Weeks912 Webframeworks:Whyuseaframework? WebappswithPython:IntroductiontoFlask(aframework). GradedassignmentsincludeaworkingFlaskapp.

Weeks1315 Studentsindividualprojects.Mustincludetwoofthefollowing:Python,Webscraping,aSQLdatabase,aFlaskapp.ItmayalsoincludeWebforms,JavaScript,Bootstrapandadditionaltechnologies.Fullcoursewebsite:https://webappsplus.wordpress.com/