Feature Request : Making a change in the order between two parts of a lesson

[epic-quester]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Feature Request: brief description of feature request format, e.g. Feature Request: Add a dark mode to the website
• Would you like to work on this issue?

Description of the Feature Request

when going to the lesson mentioned below :
URL : https://www.theodinproject.com/lessons/foundations-html-boilerplate
PATH : foundations/html_css/html-foundations/html-boilerplate.md
I think it's better to show the following code

before talking about the head element, because when someone first sees the code, he'll not understand what it means, but if after seeing the code he finds explanations of each part of the code, it will be easier to understand.
But in the lesson mentioned above, the meta element and the title elements (https://github.com/TheOdinProject/curriculum/blob/main/foundations/html_css/html-foundations/html-boilerplate.md#meta-element) were shown before the code snippet, which will confuse some of the new learners.
I suggest you show the code snippet about the head element and then explain the elements used in it.

Acceptance criteria

none

Additional Comments

I hope you take my suggestion into consideration.

[KevinMulhern]

Thanks for the suggestion @epic-quester. This does sound like a good idea, we'd ask learners to add it to their index file first to give a bit of context, and then explain each element.

[vamsijv]

@KevinMulhern I would like to work on this item. I'm new to this and I will refer to the https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md before getting started. Can you please confirm if I can take this up?

[KevinMulhern]

It's all yours @vamsijv

[epic-quester]

Thanks for the suggestion @epic-quester. This does sound like a good idea, we'd ask learners to add it to their index file first to give a bit of context, and then explain each element.

I'm glad that my suggestion would help future learners.

[vamsijv]

It's all yours @vamsijv

I've made changes locally in the file (...html-boilerplate.md) so that the code snippet mentioned in the issue description appears above the Meta and Title sections in the webpage. https://www.theodinproject.com/lessons/foundations-html-boilerplate

However I'm yet to figure out how to test my changes locally like how to access the above page to see if it reflects my changes. Any suggestions would help speed up the process though. Thank you!

[vamsijv]

I was able to see the preview of the html-boilerplate.md file from vscode and it appears as below.
Hope this is good and I can raise PR now @KevinMulhern

[KevinMulhern]

Hey @vamsijv, you can use our preview tool to view how content will look on our site. Just paste your local markdown into it.

Back in our index.html file, let’s add a element with a element and a title within it. The element goes within the element and should always be the first element under the opening tag:

This text at the end of that section isn't as user friendly as it was before. We'll want to have it beside the example so it's easier to reference when learners are entering it into their editor. We'll need to move that up, before and code example and update the content to make sense in the flow of the content.

Basically, we want to ask the user to enter it first, and then explain what each element is.

[vamsijv]

@KevinMulhern Incorporated the changes locally. Here is the preview of it.
https://www.theodinproject.com/lessons/preview?uuid=6415b101-4819-4e78-a08f-ff8f06fc337c

[KevinMulhern]

Looks good to me @vamsijv! I think it's ready for a PR 😎

[vamsijv]

Looks good to me @vamsijv! I think it's ready for a PR 😎

@KevinMulhern. PR#28686 is ready for approval. Could you review and have it approved and merged please? Thanks