Use WordPress to create a one-page site

[digitalchild]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan):
• Content title: Use WordPress to create a one-page site
• Topic description: Use WordPress to create a one-pager (basically, using this or recreating this). See also this workshop.
• Audience (User, Developer, Designer, Contributor, etc.): User
• Experience Level (Beginner, Intermediate, Advanced, Any): Advanced

Learning Objectives

Related Resources and Other Notes

Automation Code

[digitalchild]

//lessons

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [x] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[westnz]

https://github.com/WordPress/Learn/assets/89751452/72a8e2be-2961-4756-b796-bab5f9931027

[ironnysh]

Tutorial/Lessons Review Checklist

• [x] Learning outcomes/objectives are clear.
• [ ] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

This is an excellent tutorial, @westnz! 💫

I have two comments:

Links: I wouldn't call the links in the Navigation block labels:

1. These are standard links that just happen to point to a section on the same page. To differentiate them from external links, maybe they can be called “in-page links”?
2. Labels are specific HTML elements that are usually associated with forms.

It could be useful to clarify that the URL should either be one word (no spaces) or separated with hyphens/underscores (- or _). It's only mentioned later, when you get to the HTML anchor part.

Smooth scrolling: from an a11y perspective, it's good practice to wrap this functionality in a prefers-reduced-motion media query. This respects the user's preferences and only kicks in when they haven't explicitly disabled the option on their device. Here's the snippet:

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[westnz]

Very helpful feedback @ironnysh 🥳

It could be useful to clarify that the URL should either be one word (no spaces) or separated with hyphens/underscores (- or _). It's only mentioned later, when you get to the HTML anchor part.

Could you elaborate what you meant here?

[Soir7]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed: [+] Learning outcomes/objectives are clear. [+] Technical concepts introduced in the content are accurate. [+] The speed of demonstrations are easy to follow. [+] The narration audio matches what is shown visually. [+] Spelling and grammar are correct. [+] Sound quality is consistent throughout the video. [+] Brand Usage Guidelines and Promotional Guidelines are being followed. [o] Media assets are all in the public domain (CC0). - How may I verify following images are in public domain? Am I to find in cc.org link?

Leave an additional comment below with feedback. You can also share what you liked about this Tutorials in in progress

Hi @westnz! Nice flow - beautifully methodical and concise. Love your positive, encouraging, and upbeat tone.

Some comments:

1 - If this video is meant to appeal to the most elementary level, please define 'sticky' menu. 2 - Comment added @ 3.08 about bookmarks & ids. Consider placing this descriptive info. to precede the actual tasks. 3 - I understand it can be challenging to decide which/how many definitions/explanations to add during video. Where/when applicable, consider supplementing video with glossary/definitions list.
4 - Not sure how to specifically how to check if 3 media assets (guy @ laptop/Bilbao/head-shot are in public domain. Following resource seems vast: https://creativecommons.org/share-your-work/public-domain/cc0.

Thank you.

[TinaCollier]

Hey @westnz Long time no see!

I watched your video lesson, and you knocked it out of the park with this tutorial. You addressed all four Learning objectives:

• [x] Create a front page template
• [x] Create a fixed header
• [x] Add labels and anchors
• [x] Implement smooth scrolling

You did a great job explaining how to create the template and all of the parts, what they do, and how to edit them. You also did well in explaining how HTML anchors work and why and how they have to be linked.

Regarding smooth scrolling, I like that you showed what the site would act like without the smooth-scrolling code snippet. This really brings attention to how different the behavior of the page is without that additional CSS.

Overall, this was an easily digestible lesson for a newbie. Thanks for sharing!

Best, Tina

[westnz]

Thank you @TinaCollier

[ironnysh]

It could be useful to clarify that the URL should either be one word (no spaces) or separated with hyphens/underscores (- or _). It's only mentioned later, when you get to the HTML anchor part.

Could you elaborate what you meant here?

At 2:16, you demonstrate how to link to the “My work” section by typing #mywork as one word. People who don't know HTML may not know that URLs should be lowercase and without spaces. It wasn't mentioned until 3:24.

[westnz]

//published