Today’s goals:
- Finish first round of “how do you do that?”
- Play CSS- 20 questions matching
- Begin talking about mobile design
Microsoft Office available to you for free for home use!
As part of the Medford Public Schools Microsoft volume license, staff and students (over the age of 13) are able to download office to up to 5 home/mobile devices, and/or use cloud-based office products (Office 365). For more information and to download office to your home devices, staff and students can use the following link:
Enter a valid Medford school email address and you will be directed to the location to download.
Today’s featured website:
- https://whoishiring.io/– Resource for finding tech jobs. Also see job trends for any job from Indeed.com.
How do you do that?
- Everyone has found an example of something cool, unique, or puzzling from a website. We’ll see if one of us already knows how to do it and can help you out!
- What we’ve talked about so far: the CSS cursor property, using JavaScript to create a game, and Parallax, a cool scrolling effect that is popular in web design.
- We’re going to use Firefox to view these sites so we can use the developer tools to check out the code.
CSS review game
- Step 1- copy this code into Notepad++ and start a new page (cssflashcards.html)
- Step 2- launch page in browser and begin playing!
- Important: “cards” don’t stay in place after you refresh page and you won’t know if you’re right until we review it; you’re not prevented from dragging the wrong answer.
- JavaScript and HTML5 make the drag and drop function possible. The cards are from http://codecards.io/
Mobile design
- Questions to explore in pairs with your table-mate:
- What is mobile design?
- Why is it important?
- Make a list of as many devices as you can that would access a website (types of devices and names, like MacBook Pro or Windows Phone).
- What is responsive design?
- Is www.medfordpublicschools.org responsive? How about www.medfordma.org?
- What are some ways (i.e. tools, methods or frameworks) to make a website “mobile-friendly” (i.e. be responsive or look good on a variety of different screen sizes)?
- What does responsive design look like?
- Let’s check out some examples here and here
- Quick test for responsiveness of site- let’s check some (school site, city site, popular ones you like). Let’s also try this.
- What happens when you adjust the screen size?
- What do some of these sites look like on a phone? On a tablet? What differences do you notice?