web2

articles on cell phones in the classroom

Please read these 3 articles.

• Patrick Lagace / La Presse
• Ed Week article on student reactions
• the POV of 4 scholars
• and a bonus article from Boston University

Can someone find me an article supporting cell-phone use in the class?

Would you like restrictions on cell-phone use in class?

If we did a Capyskill regarding cell-phone use, what would it look like?

Questionnaire

Consent Form & Questionnaire.

CSS Grid primer

We use CSS Grid in order to achieve mobile-first, responsive and semantic web design. Here are some excellent sources for learning more about grid:

• intro article: CSS Tricks Getting Started with CSS Grid
• reference: CSS Tricks complete CSS grid guide
• video tutorial: Kevin Powell: Learn CSS Grid the Easy Way
• UPDATED link! video tutorial: Web Dev Simplified: CSS Grid in 20 Minutes
• interactive article: Josh Comeau: Interactive Guide to CSS Grid
• bonus video tutorial: 3 responsive grids from Fireship

Let's look as a few examples:

• Maya's portfolio
• Patrick's portfolio
• grads 2024 virtual vernissage

4. Personal Project

due: presentations Tuesday, May 21.

Final Wednesday, May 22.

Create a website on a topic or subject of your choice. You can work individually or in a small group.Your project should meet the following requirements:

• communicate effectively
• being mobile-first and responsive
• use semantic HTML
• use what we have learned in the class including CSS Grid, animation, javascript and notions from a CMS like templating
• be built using either:
  • html, css & js
  • or headless Wordpress, with html, css & js
• use CSS Grid for layout
• CSS animations
• js where needed

deliverables:

• Figma (or similar) document including:
  • project description
  • project plan (dates & activities)
  • moodboard
  • layouts
  • site plan / structure
  • pseudo code (if needed)
• feedback from others:
  • initial plan
  • moodboard & layouts (template mockups?)
  • after project presentation
• Capyskills improvement plan in a cloud document you can share (Figma? Teams? other?) including:
  • competency you are working on
  • SMART goals for improvement:
    • specific
    • measurable
    • achievable
    • relevant
    • timely
  • evidence of achieving your goals
  • confirmation from mentor, Avery or myself

evaluation

• Content and Creativity (30%)
• Design and Process (30%)
• Technical and Management (30%)
• SPLI (10%)
  • student proficiency in the language of instruction

some dont's!

I usually don't like putting "dont's" since often people will do exactly what you told them not to do. People are strange

• don't use <div> use <main>, <aside>, <nav>, <footer> and <section>, <article> and other elements that describe the type of information it contains.
• don't put js in your HTML ie. onclick=function();
• don't copy code or follow tutorials without confirming that it follows good coding practices.
• don't use display: flex; (CSS Grid is superior (in almost all cases))
• in js, avoid repeating code, just changing 1 or 2 things. Use loops.

headless Wordpress

With headless wordpress we use Wordpress to "post" content, but create our own html, css & js pages to connect to our Wordpress database (via REST API) and display our content.

WTF is a REST API? Well it stands for Representational Stage of Transfer, Application Programming Interface. But that's NOT helpful.

Essentially we can fetch content through the application using URLs or endpoints like wp/wp-json/wp/v2/posts. Check out what is returned from the API here.

Copy & paste it into JSON Lint to read it more easily

Read this REST API reference from Wordpress. Seriously. Read it.

Now you can check out the Wordpress REST API Handbook

Now check out the headless Wordpress video tutorial and this page and try some endpoints on your own WP.

And here is part 2 of the headless Wordpress video tutorial: adding a nav

added May 6 here is how we can do headless for a SPA