<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[NOS Workspace]]></title><description><![CDATA[NOS Workspace]]></description><link>https://nos-workspace.hashnode.dev</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1593680282896/kNC7E8IR4.png</url><title>NOS Workspace</title><link>https://nos-workspace.hashnode.dev</link></image><generator>RSS for Node</generator><lastBuildDate>Thu, 15 Oct 2026 12:07:21 GMT</lastBuildDate><atom:link href="https://nos-workspace.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[A portable HTML project brief: one file, a small-screen check, and a clear handoff]]></title><description><![CDATA[An HTML brief can look complete on your machine and still be awkward to hand off. Before choosing a sharing tool, make the document itself portable. Here is a small example you can copy, inspect, and ]]></description><link>https://nos-workspace.hashnode.dev/a-portable-html-project-brief-one-file-a-small-screen-check-and-a-clear-handoff</link><guid isPermaLink="true">https://nos-workspace.hashnode.dev/a-portable-html-project-brief-one-file-a-small-screen-check-and-a-clear-handoff</guid><category><![CDATA[HTML]]></category><dc:creator><![CDATA[NOS Workspace]]></dc:creator><pubDate>Fri, 09 Oct 2026 10:39:48 GMT</pubDate><content:encoded><![CDATA[<p>An HTML brief can look complete on your machine and still be awkward to hand off. Before choosing a sharing tool, make the document itself portable. Here is a small example you can copy, inspect, and change.</p>
<p>This is a fictional sample, not a customer project. We are the NOS Workspace team. The checks below also apply when you serve the file from ordinary static hosting.</p>
<h2>1. Start with one file and no external dependencies</h2>
<p>For a text-only brief, keep the styles in the document and use a system font. That removes the need to send a separate stylesheet, font file, image folder, or JavaScript bundle.</p>
<p>Save this as <code>brief.html</code> and open it in a browser:</p>
<pre><code class="language-html">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;title&gt;Sample project brief&lt;/title&gt;
&lt;style&gt;
body { margin: 0; background: #f4f5f7; color: #20242a; font: 18px/1.6 system-ui, sans-serif; }
main { max-width: 42rem; margin: 2rem auto; padding: 1.5rem; background: white; border-radius: 1rem; }
h1 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.2; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;
&lt;p&gt;Fictional sample - no client data&lt;/p&gt;
&lt;h1&gt;Sample project brief&lt;/h1&gt;
&lt;h2&gt;Scope&lt;/h2&gt;
&lt;p&gt;One project summary with a scope and a deadline.&lt;/p&gt;
&lt;h2&gt;Deadline&lt;/h2&gt;
&lt;p&gt;First draft: 16 October 2026&lt;/p&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>The scope and deadline are ordinary text inside semantic headings and paragraphs. They do not need a framework or a build step. There is also no form submission, analytics script, or external request in this example.</p>
<p>This is a starting point for a document, not a replacement for an application that needs authentication, a database, or server-side behavior.</p>
<h2>2. Keep the small-screen layout in the source</h2>
<p>A previewer should not be expected to repair the source layout. The example includes a viewport declaration and limits the content width while allowing it to shrink:</p>
<pre><code class="language-html">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
</code></pre>
<pre><code class="language-css">main { max-width: 42rem; padding: 1.5rem; }
h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
</code></pre>
<p>Check the actual longest heading and paragraph you intend to send. A short sample may fit when a real project name does not. Also check zoom and text wrapping; a phone-shaped preview is a useful check, but it is not a test on every phone.</p>
<p>We pasted the complete example into the NOS homepage editor on 9 October 2026 and checked its phone preview. The title, scope, and deadline rendered as text, with the paragraph wrapping inside the preview. That observation applies to this example; it does not establish that arbitrary imported HTML will behave the same way.</p>
<p>If you add an image later, revisit portability. For example:</p>
<pre><code class="language-html">&lt;img src="./images/mockup.png" alt="Sample mockup"&gt;
</code></pre>
<p>That path expects an <code>images</code> folder relative to the document. Pasting the HTML into another environment does not, by itself, upload that file. Keep dependent assets available where the page will actually be viewed, and check the result rather than assuming the original folder comes along.</p>
<h2>3. Separate checking a preview from publishing a link</h2>
<p>Use this quick handoff checklist:</p>
<ul>
<li>Confirm the scope and deadline against the source material.</li>
<li>Check headings and paragraphs at both a wide and narrow preview width.</li>
<li>Inspect any image, stylesheet, or script dependencies you added.</li>
<li>Decide whether the recipient needs a fixed snapshot or an evolving page.</li>
<li>Open the eventual sharing URL while signed out before sending it.</li>
</ul>
<p>For a fixed snapshot, make the version visible in the document:</p>
<pre><code class="language-html">&lt;p&gt;Revision 1 — fictional sample, 9 October 2026&lt;/p&gt;
</code></pre>
<p>For an evolving page, keep the recipient-facing address stable and make revisions deliberately. A stable address does not mean the document is frozen.</p>
<p>In <a href="https://nos-workspace.com/">NOS Workspace</a>, pasting HTML, editing visible text, and previewing can be tried from the homepage without signing in. Creating a saved sharing link is a separate step that requires an account. Shared-page readers do not need their own account. The current free plan includes three active sharing links.</p>
<p>Those distinctions matter during a test: seeing your file in a local preview is not proof that you have published a public URL. Test with fictional or nonsensitive material first.</p>
<p>References: <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">MDN's HTML document guide</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started">MDN's CSS guide</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp">MDN on clamp()</a>.</p>
<p>AI assisted with drafting. The sample was checked in the browser before publication.</p>
]]></content:encoded></item></channel></rss>