Girl Scouts Website Designer Badge Seminar - Presentation Slides
•Télécharger en tant que PPT, PDF•
0 j'aime•1,050 vues
Have you ever wondered how website designers create dazzling websites? This is your chance to dive into the wonderful world of web design. Come learn the basics of HTML and CSS. You'll even get to do a little coding! By the end of the session, you'll launch a customized website about the topic of your choice!
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Girl Scouts Website Designer Badge Seminar - Presentation Slides
Similaire à Girl Scouts Website Designer Badge Seminar - Presentation Slides (20)
Plus de Lauren Hayward Schaefer
Plus de Lauren Hayward Schaefer (20)
Dernier
Dernier (20)
Girl Scouts Website Designer Badge Seminar - Presentation Slides
- 1. Website Designer Badge Seminar NOVEMBER 14, 2015
- 2. Jump Ahead Since the registration confirmation e-mail sometimes takes a few minutes to arrive… Navigate to http://ibm.biz/gs-bluemix and sign up If you don’t have access to an e-mail account here, ask for help
- 3. About Me Earned my Gold Award in 2002 Bachelor and Master Degrees in Computer Science from North Carolina State University Software Engineer for IBM Code Developer outreach Travel!
- 4. Introductions What’s your name? Do you have any experience building websites? Why did you decide to attend today?
- 5. Agenda 10:15 – 12:00 Learn the basics of building websites and build your site blueprint 12:00 – 12:30 Bagged lunch 12:30 – 2:45 Build your own website 2:45 – 3:00 Prepare for launch party 3:00 – 3:30 Launch party (leaders and guardians are invited!)
- 6. 1. FIND A WORTHWHILE SUBJECT FOR YOUR WEBSITE OR BLOG
- 7. Pick a subject and gather content Your Scouting adventures Girl Scout Gold Award Place where you volunteer Extracurricular group Hobby
- 8. 2. BE THE HOST WITH THE MOST
- 9. Try on your own If you don’t have access to an e-mail account here, let me know and I will provide you with an account 2.1 Register for IBM Bluemix 2.2 Deploy your website Extra time? Explore public > index.html and make some changes. See how the page updates.
- 10. Intro to HTML HTML: Hyper Text Markup Language HTML documents have tags <html> </html>
- 11. Example
- 12. Important things to remember The index page will be displayed by default. HTML ignores spaces and new lines. You must use <br> to create a new line. If you open a tag, be sure to close it. Images and line breaks are the exception to this rule.
- 13. Try together 2.3 Update the heading 2.4 Update the title 2.5 Add a paragraph
- 14. Try on your own 2.6 Create a new webpage 2.7 Create links 2.8 Add an image 2.9 Embed an Instagram picture Extra time? Explore w3schools’ HTML(5) Tutorial: http://www.w3schools.com/html/
- 15. Intro to CSS CSS: Cascading Style Sheets Tells how things should be displayed (size, color, alignment, etc)
- 16. Example
- 17. Important things to remember Create a link between your html page and stylesheet In the stylesheet, put a period before class names. Do not put a period before html elements. For example: .special-paragraph { color: pink } h1 { color: pink; } See the complete list of CSS properties you can set: http://www.w3schools.com/cssref/
- 18. Try together 2.10 Style your heading
- 19. Try on your own 2.11 Style your paragraphs 2.12 Create a navigation bar using Bootstrap 2.14 Update the navigation bar’s styling 2.15 Explore Bootstrap Extra time? Explore w3schools’ CSS tutorial: http://www.w3schools.com/css/
- 20. 3. BUILD A BLUEPRINT
- 21. What is a blueprint? A site blueprint is a sketch that shows how users will navigate your site and a high level overview of what content will be on each page Why build a blueprint? Save time Get feedback Easily make changes Blueprints do not Focus on colors or fonts Provide an exact view of what your site will look
- 22. From blueprint to blog
- 23. Try on your own Step 3: Build a blueprint Don’t be afraid to cross things out, cut and rearrange, sketch a few ideas and pick the best one
- 24. 4. CREATE MUST-SEE CONTENT
- 25. Option 1: Create a blog using WordPress
- 26. Option 2: Create a website from scratch ?
- 27. Start building Don’t be afraid to ask for help or for feedback—collaboration is good! When you have your website url, tell Lauren so she can open it on the projector for the launch party
- 28. 5. GO LIVE—THEN DRIVE!
- 29. Launch party! Show off your hard work to friends and family. Consider answering the following questions: How did you choose the topic for your website? What tools and technology did you use to build your website? What was the biggest challenge you faced while building your website? How did you overcome it? What is your favorite part about your website? What did you learn while building your website?
Notes de l'éditeur
- Instructor prep: 1. Have a forked copy of https://hub.jazz.net/project/lhayward/Node%20with%20Bootstrap%20Instructional%20Example/overview open 2. Have a forked copy of https://hub.jazz.net/project/lhayward/Node%20with%20Bootstrap/overview open 3. Have https://color.adobe.com/ open
- Demo creating this webpage (building it tag by tag) using a forked copy of https://hub.jazz.net/project/lhayward/Node%20with%20Bootstrap%20Instructional%20Example/overview &lt;!DOCTYPE html&gt; HTML, head, body, h1, h2, h3, p, ul, ol, br, Complete version is in example.html
- Similar to Microsoft Word’s styles. You can have multiple headings throughout your document. If you want to change the size or color of all of the headings, you update the style. You make one change instead of 20.
- Demo updating the webpage continuing with the html example Complete version is in example2.html and styleexample.css Create style.css in stylesheets directory Add link to stylesheet in heading: &lt;link rel=&apos;stylesheet&apos; href=&apos;/stylesheets/style.css&apos; /&gt; Add style for h1: color: pink Add style for p: color: #22ADFF; note that it updated both paragraphs Add a size rule: size: 2rem; em (relative to the font-size of the element), root em Add a class for one of the paragraphs: .special-paragraph: color: blue;
- Before you begin building your website, you’ll want to have a plan. Why? Coding is time consuming! You can spend a lot of time building a website that is not easy to navigate or focuses on the wrong content. If you begin by creating a blueprint, you can easily sketch out ideas, get feedback from others, and sketch new ideas without wasting a lot of time coding. In this section, you’ll focus on creating a high level blueprint through sketching. When you create a blueprint, think about the content you want to display, any features your site should have, and how users will interact with and navigate your website. Don’t focus on colors or details yet; sketch in black and white. You can sketch on plain paper, graph paper, a markerboard (be sure to take a picture of your sketch so you don’t lose it!), sticky notes, or even the back of a napkin. As you work, feel free to cut sections of your sketch so you can rearrange elements on the page or the flow of your site. When you’re satisfied with your sketch, share it with a friend. Ask them for honest feedback. Would they be able to find the information they want on your website? Is there something you can change to make it easier for users to navigate? Is there a type of content missing they would find really valuable?
- Depending on time, stop the group early and pair participants up for a blueprint review
- WordPress is a content management system that is best known for creating blogs. WordPress provides you with templates and tools to easily create a blog. WordPress handles writing all of the HTML and CSS for you. This is a great option if you want to quickly create a blog. If you’d like to work directly with the code for your website, choose option 4.2. Two themes displayed here, but there are several to choose from and you can customize them.
- Want to create a website that is completely your own? Do it! You can start working from the code you wrote earlier, or you can begin fresh by forking the Node with Bootstrap project as you did earlier in Step 2. You can create your own custom stylesheets, leverage the Bootstrap stylesheets, or do a combination of the two. For example, you might want to use a Bootstrap navbar to quickly create a nice looking navigation bar and then create the rest of your site from scratch.