More Related Content
Similar to Girls Can Code East Brunswick Workshop Slides
Girls Can Code East Brunswick Workshop Slides
- 2. About Kayla Hi! Myname is Kayla. I’m currently a rising junior and full-time student at Stanford Online High School living in East Brunswick. I've had a passion for programming from a very young age, ever since I got my first lego robotics kit. I have experience with Python, C++, Java, HTML/CSS, Javascript, jQuery, and Arduino. I also lead the Girls Can Code Club that I started at my school in 2015. When I'm not studying or programming, you'll probably find me at the rink skating, outside taking photos, or reading! You can contact me at kaylamyhome@yahoo.com
- 3. About Chelsea Hi! Myname is Chelsea. I am a rising junior at J.P. Stevens High School and am an active member of Robotics and Odyssey of the Mind. I have a background in electrical and mechanical engineering and have been learning how to program on my own for the past year. I have experience in JavaScript, HTML/CSS, and Arduino/Raspberry Pi. My other hobbies include reading, taking pictures, and traveling. You can contact me at chelseavcheng@gmail.com
- 4. Introduce Yourself! Age? Name? Favorite Candy? Microsoftor Apple? Programming Experience? Anything else you'd like to share!
- 5. Our Goals ThisWeek HTML CSS Make a Website Customize & Publish
- 6. C Login/Sign Up @https://www.codecademy.com/ online interactiveplatform that offers free coding classes in 11 different programming languages
- 9. HTML (Hypertext Markup Language) Astandardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. HTML (Hypertext Markup Language) A standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure.
- 10. HTML (Hypertext Markup Language) Astandardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. HTML ● How to use Head, Body, Title Header/Header Size tags ● How to insert Images, Links, Linked Images and Lists ● How to Style (font, color, background, bold, underline, italicize) Main Learning Objectives
- 11. Let’s Get Started! withHTML </>
- 15. Summary ● <!DOCTYPE html> ●Head ○ <head> </head> ● Title ○ <title> </title> ● Body ○ <body> </body> ● Header ○ <h1> <h2> <h3> <h4> ● Paragraphs ○ <p> </p> ● Photo ○ <img src=”website link”> ● Links ○ <a href = "website link"> ● Linked Images HTML Basic I
- 19. Summary HTML Basic II ●Ordered Lists ○ <ol> </ol> ● Unordered Lists ○ <ul> </ul> ● List Items ● Nesting ● Comments ○ <!--comment --> ● Font Size ○ style="font-size: 10px" ● Font Color ○ style="color:violet" ● Font Family ○ style="font-family: Arial" ● Background Color ○ style="background-color: red"> ● Aligning ○ style="text-align: center" ○ center/left/right ● Bold ○ <strong> </strong> ● Italicized ○ <em> </em>
- 20. Summary HTML Basic III ●Tables ○ <table> </table> ● Table Row ○ <tr> </tr> ● Table Data ○ <td> </td> ● Table Column ○ Multiple <td> </td> ● Table Body ○ <tbody> </tbody> ● Border ○ border="1px" ● Table Head <thead> <tr><th> ● Table Title ○ <th colspan ="5"> </th> ● Style Table ○ style="border-collapse:collapse;" ○ style="padding:5px; ○ style="border-bottom:1px solid black; ● Divide Screen ○ <div> </div> ○ style="width:50px; height:50px; background-color:blue" ● Divide Text ○ <span> <span> ○ style="font-family: Arial"
- 22.
- 23.
- 24. <thead> <th colspan =“3”> </th> </thead>
- 25. <tbody> <tr> <td> <img src =“ ”/> </td> </tr> </tbody>
- 26. <tbody> <tr> <td> <a href =“ “ > <img src = “ ”/> </a> </td> </tr> </tbody>
- 28. HTML (Hypertext Markup Language) Astandardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. CSS (Cascading Style Sheet) Language used to describe the appearance and formatting of your HTML.
- 29. HTML (Hypertext Markup Language) Astandardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML): 1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over 2. You can apply similar appearance and formatting to several HTML pages from a single CSS file
- 31. Let’s Get Started! withCSS { }
- 35. Summary CSS: An Overview ●Linking ○ <link type="text/css" rel="stylesheet" href="stylesheet.css"/> ● Self Closing Tags Exceptions ○ link ○ img ● Syntax ○ selector { property: value; } ● Hexadecimal Colors ○ http://www.quackit.com/css/c ss_color_codes.cfm ● Backup Values ○ selector { property: choice1, choice2; }
- 36. Summary CSS: Selectors ● UniversalSelector * ● Multiple Selectors ○ selector1 selector2 selector3 { property: choice1, choice2;} ○ selector1 > selector2 ● Class and ID Selectors ○ id=”...” ■ #idname ○ class=”...” ■ .classname ● Pseudo Selector selector: pseudo-class_selector { property: value; } ○ link/visited/hover ○ first-child / nth-child(n) ■ *nth child not nth type
- 38. Summary CSS: Positioning ● Display ○block/inline-block/inline/none ● Avoids overlapping with other elements ○ Float ■ left/right ○ Clear ■ left/right/both ● Absolute Positioning ○ Position relative to parent ● Relative Positioning ○ Position relative to itself ● Fixed Positioning ○ Stays fixed to window despite scrolling
- 39. Let’s Get Started! withCustomizing & Publishing Your Website
- 40.
- 41.
- 42. Step 1: Goto http://net2ftp.com/ Step 2: Enter Server, Username, and password from previous doc Step 3: Go to site Step 4: Go to site > wwwroot Step 5: Delete Hosting Start File Step 6: Create New File Step 7: Name your file index.html & main.css
- 43. Let’s Get Started! with Makinga Website
- 44.