<?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" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Qoom Tutorials]]></title><description><![CDATA[Qoom Tutorials]]></description><link>https://tutorials.qoom.io/</link><image><url>https://tutorials.qoom.io/favicon.png</url><title>Qoom Tutorials</title><link>https://tutorials.qoom.io/</link></image><generator>Ghost 4.32</generator><lastBuildDate>Fri, 06 Mar 2026 10:09:15 GMT</lastBuildDate><atom:link href="https://tutorials.qoom.io/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Start here for a quick overview of everything you need to know]]></title><description><![CDATA[We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.]]></description><link>https://tutorials.qoom.io/welcome/</link><guid isPermaLink="false">61bdfb667d90d81a5c8aec35</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:59 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/welcome-to-ghost.png" alt="Start here for a quick overview of everything you need to know"><p><strong>Hey there</strong>, welcome to your new home on the web! </p><p>Unlike social networks, this one is all yours. Publish your work on a custom domain, invite your audience to subscribe, send them new content by email newsletter, and offer premium subscriptions to generate sustainable recurring revenue to fund your work. </p><p>Ghost is an independent, open source app, which means you can customize absolutely everything. Inside the admin area, you&apos;ll find straightforward controls for changing themes, colors, navigation, logos and settings &#x2014; so you can set your site up just how you like it. No technical knowledge required.</p><p>If you&apos;re feeling a little more adventurous, there&apos;s really no limit to what&apos;s possible. With just a little bit of HTML and CSS you can modify or build your very own theme from scratch, or connect to Zapier to explore advanced integrations. Advanced developers can go even further and build entirely custom workflows using the Ghost API.</p><p>This level of customization means that Ghost grows with you. It&apos;s easy to get started, but there&apos;s always another level of what&apos;s possible. So, you won&apos;t find yourself outgrowing the app in a few months time and wishing you&apos;d chosen something more powerful!</p><hr><p>For now, you&apos;re probably just wondering what to do first. To help get you going as quickly as possible, we&apos;ve populated your site with starter content (like this post!) covering all the key concepts and features of the product.</p><p>You&apos;ll find an outline of all the different topics below, with links to each section so you can explore the parts that interest you most.</p><p>Once you&apos;re ready to begin publishing and want to clear out these starter posts, you can delete the &quot;Ghost&quot; staff user. Deleting an author will automatically remove all of their posts, leaving you with a clean blank canvas.</p><h2 id="your-guide-to-ghost">Your guide to Ghost</h2><ul><li><a href="https://tutorials.qoom.io/design/">Customizing your brand and site settings</a></li><li><a href="https://tutorials.qoom.io/write/">Writing &amp; managing content, an advanced guide for creators</a></li><li><a href="https://tutorials.qoom.io/portal/">Building your audience with subscriber signups</a></li><li><a href="https://tutorials.qoom.io/sell/">Selling premium memberships with recurring revenue</a></li><li><a href="https://tutorials.qoom.io/grow/">How to grow your business around an audience</a></li><li><a href="https://tutorials.qoom.io/integrations/">Setting up custom integrations and apps</a></li></ul><p>If you get through all those and you&apos;re hungry for more, you can find an extensive library of content for creators over on <a href="https://ghost.org/blog/">the Ghost blog</a>.</p><hr><h2 id="getting-help">Getting help</h2><p>If you need help, <a href="https://ghost.org/pricing/">Ghost(Pro)</a> customers can always reach our full-time support team by clicking on the <em>Ghost(Pro)</em> link inside their admin panel.</p><p>If you&apos;re a developer working with the codebase in a self-managed install, check out our <a href="https://forum.ghost.org">developer community forum</a> to chat with other users.</p><p>Have fun!</p>]]></content:encoded></item><item><title><![CDATA[Customizing your brand and design settings]]></title><description><![CDATA[How to tweak a few settings in Ghost to transform your site from a generic template to a custom brand with style and personality.]]></description><link>https://tutorials.qoom.io/design/</link><guid isPermaLink="false">61bdfb667d90d81a5c8aec33</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:58 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/publishing-options.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/publishing-options.png" alt="Customizing your brand and design settings"><p>As discussed in the <a href="https://tutorials.qoom.io/welcome/">introduction</a> post, one of the best things about Ghost is just how much you can customize to turn your site into something unique. Everything about your layout and design can be changed, so you&apos;re not stuck with yet another clone of a social network profile.</p><p>How far you want to go with customization is completely up to you, there&apos;s no right or wrong approach! The majority of people use one of Ghost&apos;s built-in themes to get started, and then progress to something more bespoke later on as their site grows. </p><p>The best way to get started is with Ghost&apos;s branding settings, where you can set up colors, images and logos to fit with your brand.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.ghost.org/v4.0.0/images/brandsettings.png" class="kg-image" alt="Customizing your brand and design settings" loading="lazy" width="3456" height="2338"><figcaption>Ghost Admin &#x2192; Settings &#x2192; Branding</figcaption></figure><p>Any Ghost theme that&apos;s up to date and compatible with Ghost 4.0 and higher will reflect your branding settings in the preview window, so you can see what your site will look like as you experiment with different options.</p><p>When selecting an accent color, try to choose something which will contrast well with white text. Many themes will use your accent color as the background for buttons, headers and navigational elements. Vibrant colors with a darker hue tend to work best, as a general rule.</p><h2 id="installing-ghost-themes">Installing Ghost themes</h2><p>By default, new sites are created with Ghost&apos;s friendly publication theme, called Casper. Everything in Casper is optimized to work for the most common types of blog, newsletter and publication that people create with Ghost &#x2014; so it&apos;s a perfect place to start.</p><p>However, there are hundreds of different themes available to install, so you can pick out a look and feel that suits you best.</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.ghost.org/v4.0.0/images/themesettings.png" class="kg-image" alt="Customizing your brand and design settings" loading="lazy" width="3208" height="1618"><figcaption>Ghost Admin &#x2192; Settings &#x2192; Theme</figcaption></figure><p>Inside Ghost&apos;s theme settings you&apos;ll find 4 more official themes that can be directly installed and activated. Each theme is suited to slightly different use-cases.</p><ul><li><strong>Casper</strong> <em>(default)</em> &#x2014; Made for all sorts of blogs and newsletters</li><li><strong>Edition</strong> &#x2014; A beautiful minimal template for newsletter authors</li><li><strong>Alto</strong> &#x2014; A slick news/magazine style design for creators</li><li><strong>London</strong> &#x2014; A light photography theme with a bold grid</li><li><strong>Ease</strong> &#x2014; A library theme for organizing large content archives</li></ul><p>And if none of those feel quite right, head on over to the <a href="https://ghost.org/themes/">Ghost Marketplace</a>, where you&apos;ll find a huge variety of both free and premium themes.</p><h2 id="building-something-custom">Building something custom</h2><p>Finally, if you want something completely bespoke for your site, you can always build a custom theme from scratch and upload it to your site.</p><p>Ghost&apos;s theming template files are very easy to work with, and can be picked up in the space of a few hours by anyone who has just a little bit of knowledge of HTML and CSS. Templates from other platforms can also be ported to Ghost with relatively little effort.</p><p>If you want to take a quick look at the theme syntax to see what it&apos;s like, you can <a href="https://github.com/tryghost/casper/">browse through the files of the default Casper theme</a>. We&apos;ve added tons of inline code comments to make it easy to learn, and the structure is very readable.</p><figure class="kg-card kg-code-card"><pre><code class="language-handlebars">{{#post}}
&lt;article class=&quot;article {{post_class}}&quot;&gt;

    &lt;h1&gt;{{title}}&lt;/h1&gt;
    
    {{#if feature_image}}
    	&lt;img src=&quot;{{feature_image}}&quot; alt=&quot;Feature image&quot; /&gt;
    {{/if}}
    
    {{content}}

&lt;/article&gt;
{{/post}}</code></pre><figcaption>A snippet from a post template</figcaption></figure><p>See? Not that scary! But still completely optional. </p><p>If you&apos;re interested in creating your own Ghost theme, check out our extensive <a href="https://ghost.org/docs/themes/">theme documentation</a> for a full guide to all the different template variables and helpers which are available.</p>]]></content:encoded></item><item><title><![CDATA[Writing and managing content in Ghost, an advanced guide]]></title><description><![CDATA[A full overview of all the features built into the Ghost editor, including powerful workflow automations to speed up your creative process.]]></description><link>https://tutorials.qoom.io/write/</link><guid isPermaLink="false">61bdfb667d90d81a5c8aec31</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:57 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/writing-posts-with-ghost.png" alt="Writing and managing content in Ghost, an advanced guide"><p>Ghost comes with a best-in-class editor which does its very best to get out of the way, and let you focus on your content. Don&apos;t let its minimal looks fool you, though, beneath the surface lies a powerful editing toolset designed to accommodate the extensive needs of modern creators.</p><p>For many, the base canvas of the Ghost editor will feel familiar. You can start writing as you would expect, highlight content to access the toolbar you would expect, and generally use all of the keyboard shortcuts you would expect.</p><p>Our main focus in building the Ghost editor is to try and make as many things that you hope/expect might work: actually work. </p><ul><li>You can copy and paste raw content from web pages, and Ghost will do its best to correctly preserve the formatting. </li><li>Pasting an image from your clipboard will upload inline.</li><li>Pasting a social media URL will automatically create an embed.</li><li>Highlight a word in the editor and paste a URL from your clipboard on top: Ghost will turn it into a link.</li><li>You can also paste (or write!) Markdown and Ghost will usually be able to auto-convert it into fully editable, formatted content.</li></ul><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.ghost.org/v4.0.0/images/editor.png" class="kg-image" alt="Writing and managing content in Ghost, an advanced guide" loading="lazy" width="3182" height="1500"><figcaption>The Ghost editor. Also available in dark-mode, for late night writing sessions.</figcaption></figure><p>The goal, as much as possible, is for things to work so that you don&apos;t have to <em>think</em> so much about the editor. You won&apos;t find any disastrous &quot;block builders&quot; here, where you have to open 6 submenus and choose from 18 different but identical alignment options. That&apos;s not what Ghost is about.</p><p>What you will find though, is dynamic cards which allow you to embed rich media into your posts and create beautifully laid out stories.</p><h2 id="using-cards">Using cards</h2><p>You can insert dynamic cards inside post content using the <code>+</code> button, which appears on new lines, or by typing <code>/</code> on a new line to trigger the card menu. Many of the choices are simple and intuitive, like bookmark cards, which allow you to create rich links with embedded structured data:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://opensubscriptionplatforms.com/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Open Subscription Platforms</div><div class="kg-bookmark-description">A shared movement for independent subscription data.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://opensubscriptionplatforms.com/images/favicon.png" alt="Writing and managing content in Ghost, an advanced guide"><span class="kg-bookmark-author">Open Subscription Platforms</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://opensubscriptionplatforms.com/images/osp-card.png" alt="Writing and managing content in Ghost, an advanced guide"></div></a></figure><p>or embed cards which make it easy to insert content you want to share with your audience, from external services:</p><figure class="kg-card kg-embed-card"><iframe width="200" height="113" src="https://www.youtube.com/embed/hmH3XMlms8E?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></figure><p>But, dig a little deeper, and you&apos;ll also find more advanced cards, like one that only shows up in email newsletters (great for personalized introductions) and a comprehensive set of specialized cards for different types of images and galleries.</p><blockquote>Once you &#xA0;start mixing text and image cards creatively, the whole narrative of the story changes. Suddenly, you&apos;re working in a new format.</blockquote><figure class="kg-card kg-image-card kg-width-full"><img src="https://static.ghost.org/v4.0.0/images/andreas-selter-xSMqGH7gi6o-unsplash.jpg" class="kg-image" alt="Writing and managing content in Ghost, an advanced guide" loading="lazy" width="6000" height="4000"></figure><p>As it turns out, sometimes pictures and a thousand words go together really well. Telling people a great story often has much more impact if they can feel, even for a moment, as though they were right there with you.</p><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://static.ghost.org/v4.0.0/images/andreas-selter-e4yK8QQlZa0-unsplash.jpg" width="4572" height="3048" loading="lazy" alt="Writing and managing content in Ghost, an advanced guide"></div><div class="kg-gallery-image"><img src="https://static.ghost.org/v4.0.0/images/steve-carter-Ixp4YhCKZkI-unsplash.jpg" width="4032" height="2268" loading="lazy" alt="Writing and managing content in Ghost, an advanced guide"></div></div></div></figure><figure class="kg-card kg-image-card kg-width-wide"><img src="https://static.ghost.org/v4.0.0/images/lukasz-szmigiel-jFCViYFYcus-unsplash.jpg" class="kg-image" alt="Writing and managing content in Ghost, an advanced guide" loading="lazy" width="2560" height="1705"></figure><figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://static.ghost.org/v4.0.0/images/jd-mason-hPiEFq6-Eto-unsplash.jpg" width="5184" height="3888" loading="lazy" alt="Writing and managing content in Ghost, an advanced guide"></div><div class="kg-gallery-image"><img src="https://static.ghost.org/v4.0.0/images/jp-valery-OBpOP9GVH9U-unsplash.jpg" width="5472" height="3648" loading="lazy" alt="Writing and managing content in Ghost, an advanced guide"></div></div></div><figcaption>Peaceful places</figcaption></figure><p>Galleries and image cards can be combined in so many different ways &#x2014; the only limit is your imagination.</p><h2 id="build-workflows-with-snippets">Build workflows with snippets</h2><p>One of the most powerful features of the Ghost editor is the ability to create and re-use content snippets. If you&apos;ve ever used an email client with a concept of <em>saved replies</em> then this will be immediately intuitive.</p><p>To create a snippet, select a piece of content in the editor that you&apos;d like to re-use in future, then click on the snippet icon in the toolbar. Give your snippet a name, and you&apos;re all done. Now your snippet will be available from within the card menu, or you can search for it directly using the <code>/</code> command.</p><p>This works really well for saving images you might want to use often, like a company logo or team photo, links to resources you find yourself often linking to, or introductions and passages that you want to remember.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://static.ghost.org/v4.0.0/images/createsnippet.png" class="kg-image" alt="Writing and managing content in Ghost, an advanced guide" loading="lazy" width="2282" height="1272"></figure><p>You can even build entire post templates or outlines to create a quick, re-usable workflow for publishing over time. Or build custom design elements for your post with an HTML card, and use a snippet to insert it.</p><p>Once you get a few useful snippets set up, it&apos;s difficult to go back to the old way of diving through media libraries and trawling for that one thing you know you used somewhere that one time.</p><hr><h2 id="publishing-and-newsletters-the-easy-way">Publishing and newsletters the easy way</h2><p>When you&apos;re ready to publish, Ghost makes it as simple as possible to deliver your new post to all your existing members. Just hit the <em>Preview</em> link and you&apos;ll get a chance to see what your content looks like on Web, Mobile, Email and Social.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://static.ghost.org/v4.0.0/images/preview.png" class="kg-image" alt="Writing and managing content in Ghost, an advanced guide" loading="lazy" width="3166" height="2224"></figure><p>You can send yourself a test newsletter to make sure everything looks good in your email client, and then hit the <em>Publish</em> button to decide who to deliver it to.</p><p>Ghost comes with a streamlined, optimized email newsletter template that has settings built-in for you to customize the colors and typography. We&apos;ve spent countless hours refining the template to make sure it works great across all email clients, and performs well for email deliverability.</p><p>So, you don&apos;t need to fight the awful process of building a custom email template from scratch. It&apos;s all done already!</p><hr><p>The Ghost editor is powerful enough to do whatever you want it to do. With a little exploration, you&apos;ll be up and running in no time.</p>]]></content:encoded></item><item><title><![CDATA[Building your audience with subscriber signups]]></title><description><![CDATA[How Ghost allows you to turn anonymous readers into an audience of active subscribers, so you know what's working and what isn't.]]></description><link>https://tutorials.qoom.io/portal/</link><guid isPermaLink="false">61bdfb667d90d81a5c8aec2f</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:56 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/creating-a-custom-theme.png" alt="Building your audience with subscriber signups"><p>What sets Ghost apart from other products is that you can publish content and grow your audience using the same platform. Rather than just endlessly posting and hoping someone is listening, you can track real signups against your work and have them subscribe to be notified of future posts. The feature that makes all this possible is called <em>Portal</em>.</p><p>Portal is an embedded interface for your audience to sign up to your site. It works on every Ghost site, with every theme, and for any type of publisher. </p><p>You can customize the design, content and settings of Portal to suit your site, whether you just want people to sign up to your newsletter &#x2014; or you&apos;re running a full premium publication with user sign-ins and private content.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://static.ghost.org/v4.0.0/images/portalsettings.png" class="kg-image" alt="Building your audience with subscriber signups" loading="lazy" width="2924" height="1810"></figure><p>Once people sign up to your site, they&apos;ll receive an email confirmation with a link to click. The link acts as an automatic sign-in, so subscribers will be automatically signed-in to your site when they click on it. There are a couple of interesting angles to this:</p><p>Because subscribers are automatically able to sign in and out of your site as registered members: You can (optionally) restrict access to posts and pages depending on whether people are signed-in or not. So if you want to publish some posts for free, but keep some really great stuff for members-only, this can be a great draw to encourage people to sign up!</p><p>Ghost members sign in using email authentication links, so there are no passwords for people to set or forget. You can turn any list of email subscribers into a database of registered members who can sign in to your site. Like magic.</p><p>Portal makes all of this possible, and it appears by default as a floating button in the bottom-right corner of your site. When people are logged out, clicking it will open a sign-up/sign-in window. When members are logged in, clicking the Portal button will open the account menu where they can edit their name, email, and subscription settings.</p><p>The floating Portal button is completely optional. If you prefer, you can add manual links to your content, navigation, or theme to trigger it instead.</p><p>Like this! <a href="#/portal">Sign up here</a></p><hr><p>As you start to grow your registered audience, you&apos;ll be able to get a sense of who you&apos;re publishing <em>for</em> and where those people are coming <em>from</em>. Best of all: You&apos;ll have a straightforward, reliable way to connect with people who enjoy your work.</p><p>Social networks go in and out of fashion all the time. Email addresses are timeless.</p><p>Growing your audience is valuable no matter what type of site you run, but if your content <em>is</em> your business, then you might also be interested in <a href="https://tutorials.qoom.io/sell/">setting up premium subscriptions</a>.</p>]]></content:encoded></item><item><title><![CDATA[Selling premium memberships with recurring revenue]]></title><description><![CDATA[<p>For creators and aspiring entrepreneurs looking to generate a sustainable recurring revenue stream from their creative work, Ghost has built-in payments allowing you to create a subscription commerce business.</p><p>Connect your <a href="https://stripe.com">Stripe</a> account to Ghost, and you&apos;ll be able to quickly and easily create monthly and yearly premium</p>]]></description><link>https://tutorials.qoom.io/sell/</link><guid isPermaLink="false">61bdfb667d90d81a5c8aec2d</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:55 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/organizing-your-content.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/organizing-your-content.png" alt="Selling premium memberships with recurring revenue"><p>For creators and aspiring entrepreneurs looking to generate a sustainable recurring revenue stream from their creative work, Ghost has built-in payments allowing you to create a subscription commerce business.</p><p>Connect your <a href="https://stripe.com">Stripe</a> account to Ghost, and you&apos;ll be able to quickly and easily create monthly and yearly premium plans for members to subscribe to, as well as complimentary plans for friends and family.</p><p>Ghost takes <strong>0% payment fees</strong>, so everything you make is yours to keep!</p><p>Using subscriptions, you can build an independent media business like <a href="https://stratechery.com">Stratechery</a>, <a href="https://www.theinformation.com">The Information</a>, or <a href="https://thebrowser.com">The Browser</a>.</p><p>The creator economy is just getting started, and Ghost allows you to build something based on technology that you own and control.</p><figure class="kg-card kg-image-card kg-card-hascaption"><a href="https://thebrowser.com"><img src="https://static.ghost.org/v4.0.0/images/thebrowser.jpg" class="kg-image" alt="Selling premium memberships with recurring revenue" loading="lazy" width="1600" height="2000"></a><figcaption>The Browser has over 10,000 paying subscribers</figcaption></figure><p>Most successful subscription businesses publish a mix of free and paid posts to attract a new audience, and upsell the most loyal members to a premium offering. You can also mix different access levels within the same post, showing a free preview to logged out members and then, right when you&apos;re ready for a cliffhanger, that&apos;s a good time to...</p>]]></content:encoded></item><item><title><![CDATA[How to grow your business around an audience]]></title><description><![CDATA[A guide to collaborating with other staff users to publish, and some resources to help you with the next steps of growing your business]]></description><link>https://tutorials.qoom.io/grow/</link><guid isPermaLink="false">61bdfb657d90d81a5c8aec2b</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:54 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/admin-settings.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/admin-settings.png" alt="How to grow your business around an audience"><p>As you grow, you&apos;ll probably want to start inviting team members and collaborators to your site. Ghost has a number of different user roles for your team:</p><p><strong>Contributors</strong><br>This is the base user level in Ghost. Contributors can create and edit their own draft posts, but they are unable to edit drafts of others or publish posts. Contributors are <strong>untrusted</strong> users with the most basic access to your publication.</p><p><strong>Authors</strong><br>Authors are the 2nd user level in Ghost. Authors can write, edit and publish their own posts. Authors are <strong>trusted</strong> users. If you don&apos;t trust users to be allowed to publish their own posts, they should be set as Contributors.</p><p><strong>Editors</strong><br>Editors are the 3rd user level in Ghost. Editors can do everything that an Author can do, but they can also edit and publish the posts of others - as well as their own. Editors can also invite new Contributors &amp; Authors to the site.</p><p><strong>Administrators</strong><br>The top user level in Ghost is Administrator. Again, administrators can do everything that Authors and Editors can do, but they can also edit all site settings and data, not just content. Additionally, administrators have full access to invite, manage or remove any other user of the site.<br><br><strong>The Owner</strong><br>There is only ever one owner of a Ghost site. The owner is a special user which has all the same permissions as an Administrator, but with two exceptions: The Owner can never be deleted. And in some circumstances the owner will have access to additional special settings if applicable. For example: billing details, if using <a href="https://ghost.org/pricing/"><strong>Ghost(Pro)</strong></a>.</p><blockquote><em>Ask all of your users to fill out their user profiles, including bio and social links. These will populate rich structured data for posts and generally create more opportunities for themes to fully populate their design.</em></blockquote><hr><p>If you&apos;re looking for insights, tips and reference materials to expand your content business, here&apos;s 5 top resources to get you started:</p><ul><li><a href="https://ghost.org/blog/how-to-create-a-newsletter/"><strong>How to create a premium newsletter (+ some case studies)</strong></a><strong> </strong> <br>Learn how others run successful paid email newsletter products</li><li><strong><a href="https://ghost.org/blog/membership-sites/">The ultimate guide to membership websites for creators</a></strong><br>Tips to help you build, launch and grow your new membership business</li><li><strong><a href="https://newsletterguide.org/">The Newsletter Guide</a></strong><br>A 201 guide for taking your newsletters to the next level</li><li><a href="https://ghost.org/blog/find-your-niche-creator-economy/"><strong>The proven way to find your niche, explained</strong></a><br>Find the overlap and find a monetizable niche that gets noticed</li><li><strong><a href="https://ghost.org/blog/newsletter-referral-programs/">Should you launch a referral program? </a></strong><br>Strategies for building a sustainable referral growth machine</li></ul>]]></content:encoded></item><item><title><![CDATA[Setting up apps and custom integrations]]></title><description><![CDATA[Work with all your favorite apps and tools or create your own custom integrations using the Ghost API.]]></description><link>https://tutorials.qoom.io/integrations/</link><guid isPermaLink="false">61bdfb657d90d81a5c8aec29</guid><category><![CDATA[Getting Started]]></category><dc:creator><![CDATA[Ghost]]></dc:creator><pubDate>Sat, 18 Dec 2021 15:16:53 GMT</pubDate><media:content url="https://static.ghost.org/v4.0.0/images/app-integrations.png" medium="image"/><content:encoded><![CDATA[<img src="https://static.ghost.org/v4.0.0/images/app-integrations.png" alt="Setting up apps and custom integrations"><p>It&apos;s possible to extend your Ghost site and connect it with hundreds of the most popular apps and tools using integrations. </p><p>Whether you need to automatically publish new posts on social media, connect your favorite analytics tool, sync your community or embed forms into your content &#x2014; our <a href="https://ghost.org/integrations/">integrations library</a> has got it all covered with hundreds of integration tutorials.</p><p>Many integrations are as simple as inserting an embed by pasting a link, or copying a snippet of code directly from an app and pasting it into Ghost. Our integration tutorials are used by creators of all kinds to get apps and integrations up and running in no time &#x2014; no technical knowledge required.</p><figure class="kg-card kg-image-card kg-width-full"><img src="https://static.ghost.org/v4.0.0/images/integrations-icons.png" class="kg-image" alt="Setting up apps and custom integrations" loading="lazy"></figure><h2 id="zapier">Zapier</h2><p>Zapier is a no-code tool that allows you to build powerful automations, and our official integration allows you to connect your Ghost site to more than 1,000 external services.</p><blockquote><strong>Example</strong>: When someone new subscribes to a newsletter on a Ghost site (Trigger) then the contact information is automatically pushed into MailChimp (Action).</blockquote><p><strong>Here&apos;s a few of the most popular automation templates:</strong> </p><!--kg-card-begin: markdown--><script src="https://zapier.com/apps/embed/widget.js?services=Ghost,-shortcm,-hubspot,-sendpulse,-noticeable,-aweber,-icontact,-facebook-pages,-github,-medium,-slack,-mailchimp,-activecampaign,-twitter,-discourse&amp;container,-convertkit,-drip,-airtable=true&amp;limit=5"></script>
<!--kg-card-end: markdown--><h2 id="custom-integrations">Custom integrations</h2><p>For more advanced automation, it&apos;s possible to create custom Ghost integrations with dedicated API keys from the Integrations page within Ghost Admin. </p><figure class="kg-card kg-image-card"><img src="https://static.ghost.org/v4.0.0/images/iawriter-integration.png" class="kg-image" alt="Setting up apps and custom integrations" loading="lazy" width="2244" height="936"></figure><p>These custom integrations allow you to use the Ghost API without needing to write code, and create powerful workflows such as sending content from your favorite desktop editor into Ghost as a new draft.</p>]]></content:encoded></item><item><title><![CDATA[Part 1: What Is Website Development?]]></title><description><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#overview">About this project</a></li>
<li><a href="#account">Create a Qoom account</a></li>
<li><a href="#html">What</a></li></ol>]]></description><link>https://tutorials.qoom.io/what-is-website-development-coding-your-project-a-journal/</link><guid isPermaLink="false">61bdfcdc7d90d81a5c8aedc6</guid><category><![CDATA[Your First Website Development]]></category><dc:creator><![CDATA[Alexandria Balde]]></dc:creator><pubDate>Fri, 25 Jun 2021 01:10:00 GMT</pubDate><content:encoded><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#overview">About this project</a></li>
<li><a href="#account">Create a Qoom account</a></li>
<li><a href="#html">What is HTML?</a></li>
<li><a href="#css">What is CSS?</a></li>
<li><a href="#next">Next Steps</a></li>
</ol>
<!--kg-card-end: markdown--><hr><!--kg-card-begin: html--><h2 id="overview">About the project</h2><!--kg-card-end: html--><figure class="kg-card kg-image-card kg-card-hascaption"><a href="https://app.qoom.io/~/projects/my-first-website"><img src="https://tutorials.qoom.io/content/images/2021/06/screenshot-your-first-website.png" class="kg-image" alt loading="lazy" width="741" height="705" srcset="https://tutorials.qoom.io/content/images/size/w600/2021/06/screenshot-your-first-website.png 600w, https://tutorials.qoom.io/content/images/2021/06/screenshot-your-first-website.png 741w" sizes="(min-width: 720px) 720px"></a><figcaption>Screenshot of final product of the journal</figcaption></figure><p>This is a beginners guide to all things programming. This is where you can start your programming journey with website development in HTML and CSS, and as you follow our tutorial, you be more comfortable with:</p><ul><li><strong>file management and creation</strong></li><li><strong>code editors</strong></li><li><strong>programming languages </strong></li><li><strong>project cycle and ideation</strong></li><li><strong>and of course, coding!</strong></li></ul><p>And we will be focusing on the popular website development style and structure &#xA0;formatters: </p><ul><li><strong>HTML </strong></li><li><strong>CSS</strong></li></ul><hr><!--kg-card-begin: html--><h2 id="account">Create a Qoom account</h2><!--kg-card-end: html--><p>Get your coding environment started by signing up for Qoom! </p><ol><li>Go to <a href="https://www.qoom.io/">https://www.qoom.io</a></li><li>Click the <code>Sign Up</code> button</li><li>Head over to your Qoom Space</li></ol><p>There is where you&apos;ll write your first lines of code and be able to see the changes real-time! </p><hr><!--kg-card-begin: html--><h2 id="html">What is HTML?</h2><!--kg-card-end: html--><p>HTML stands for Hyper Text Markup Language. It is the standard of markup languages that are used for creating web pages. </p><p>Programming libraries like <a href="https://reactjs.org/">React</a> are based off of HTML actions using JavaScript, and that spawns concise frameworks like <a href="https://www.gatsbyjs.com/">Gatsby</a> and <a href="https://nextjs.org/">Next.js</a>.</p><!--kg-card-begin: markdown--><p>In this tutorial, we will be learning how to write code in HTML by creating <strong>semantic elements</strong> to describe the content. For example, if we wanted to create a paragraph, we would enclose the paragraph content the opening paragraph tag, <code>&lt;p&gt;</code>, and closed with <code>&lt;/p&gt;</code>:</p>
<pre><code>&lt;p&gt;Hello World!&lt;/p&gt;
</code></pre>
<p>And on the page we would see:</p>
<p>Hello World!</p>
<!--kg-card-end: markdown--><!--kg-card-begin: markdown--><p>There are other elements such as <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;div&gt;</code> for division, and <code>&lt;nav&gt;</code> for navigation. We will be exploring some of the most common elements in our tutorial!</p>
<!--kg-card-end: markdown--><hr><!--kg-card-begin: html--><h2 id="css">What is CSS?</h2><!--kg-card-end: html--><p>CSS stands for Cascading Style Sheets, and it is a way style your content! With CSS, you can customize the background, font, positions, coloring, sizing, etc., </p><!--kg-card-begin: markdown--><p>The &quot;cascading&quot; in CSS means that it works with a system of parents and children. So, if a parent element contains a certain style, the children elements will also have that style. For example, if you had a paragraph within a <code>&lt;div&gt;</code> tag, and styled the division to have blue font, then the paragraph will also have blue font.</p>
<!--kg-card-end: markdown--><!--kg-card-begin: markdown--><p>There are a couple ways to implement CSS to your HTML document.</p>
<ul>
<li><strong>inline</strong> with the <code>style</code> attribute inside the element.</li>
<li><strong>internal</strong> with a <code>&lt;style&gt;</code> tag inside the <code>&lt;head&gt;</code> section.</li>
<li><strong>external</strong> with linking to a separate CSS file by inputting a <code>&lt;link&gt;</code> tag to it.</li>
</ul>
<p>For this tutorial, we will focus on <strong>external styling</strong>.</p>
<!--kg-card-end: markdown--><p>It is written using syntax like curly brackets <code>{}</code> to write in the styles for different classes <code>.</code> and IDs <code>#</code>. An example of CSS like this: </p><!--kg-card-begin: markdown--><pre><code>#myDiv {
    background-color: white;
}
</code></pre>
<!--kg-card-end: markdown--><p>There we are styling the ID called &quot;myDiv&quot; to have a background color of white!</p><hr><!--kg-card-begin: html--><h2 id="next">Next Steps</h2><!--kg-card-end: html--><p>Now that you are all caught up in the languages of website development, get started on your first website page by following Part 2 of this tutorial here!</p><p><em><a href="https://tutorials.qoom.io/your-first-website-development-project-part-2-creating-the-layout">tutorials.qoom.io/your-first-website-development-project-part-2-creating-the-layout</a></em></p>]]></content:encoded></item><item><title><![CDATA[Part 2: Creating the Layout]]></title><description><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#layout">Creating the layout of the website with HTML</a></li></ol>]]></description><link>https://tutorials.qoom.io/your-first-website-development-project-part-2-creating-the-layout/</link><guid isPermaLink="false">61bdfcdc7d90d81a5c8aedc8</guid><category><![CDATA[Your First Website Development]]></category><dc:creator><![CDATA[Alexandria Balde]]></dc:creator><pubDate>Fri, 25 Jun 2021 01:08:18 GMT</pubDate><content:encoded><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#layout">Creating the layout of the website with HTML</a></li>
<li><a href="#customize">Customizing the layout with CSS</a></li>
<li><a href="#nav">HTML/CSS: Coding the navigation</a></li>
<li><a href="#next">Next Steps</a></li>
</ol>
<!--kg-card-end: markdown--><!--kg-card-begin: html--><h2 id="layout">Creating the layout of the website with HTML</h2><!--kg-card-end: html--><p>Now that we have <em><a href="https://tutorials.qoom.io/what-is-website-development-coding-your-project-a-journal">introduced HTML and CSS</a> </em>in our previous workshop<em>, </em>we can begin coding your first project!</p><p>Our first step to creating your journal web page is to create the HTML skeleton. Have you noticed that most websites have the same layout? </p><ul><li>navigation bar with the logo, title, and links to other pages</li><li>main section with the focus and content of the page</li><li>and a footer with copyright and attributions</li></ul><p>The journal will follow that format. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://tutorials.qoom.io/content/images/2021/06/layout.jpg" class="kg-image" alt loading="lazy" width="963" height="912" srcset="https://tutorials.qoom.io/content/images/size/w600/2021/06/layout.jpg 600w, https://tutorials.qoom.io/content/images/2021/06/layout.jpg 963w" sizes="(min-width: 720px) 720px"><figcaption>Screenshot of the layout of the journal website</figcaption></figure><p>So head over to <a href="Qoom.io">Qoom.io</a> and log in to your account. Then click over to your coding space and create your first project with <code>New Project</code>! </p><p>To code the navigation, main section, and the footer put those elements after the <code>&lt;body&gt;</code> tag in your <code>index.html</code> file.</p><!--kg-card-begin: markdown--><pre><code>&lt;body&gt;
    &lt;nav&gt;&lt;/nav&gt;
    &lt;main&gt;&lt;/main&gt;
    &lt;footer&gt;&lt;/footer&gt;
&lt;/body&gt;
</code></pre>
<!--kg-card-end: markdown--><p>Tabbing and spacing of elements inside other elements is not important for the code, but is a common way to visualize for you, as the programmer, the inheritance. </p><p>Congrats &#x1F389;! You have written your first line of code and completed the layout of the website!</p><hr><!--kg-card-begin: html--><h2 id="customize">Customizing the layout with CSS</h2><!--kg-card-end: html--><p>Remember that CSS requires different syntax compared to HTML, but do not worry we will walk through and explain each line . </p><p>First, we will write a <strong>CSS reset</strong>, which is setting the default style for all the elements.</p><!--kg-card-begin: markdown--><pre><code>@import url(&apos;https://fonts.googleapis.com/css2?family=Montserrat:wght@300&amp;display=swap&apos;);

* {
	padding: 0;
	margin: 0;
	font-family: &apos;Montserrat&apos;, sans-serif;
}
</code></pre>
<!--kg-card-end: markdown--><p>The <code>*</code> is the universal selector to select all of the elements. </p><p>And since <code>font-family</code> is calling &apos;Montserrat&apos;, we need a way to tell the computer where to get the font family from. So that is what the first line with <code>@import url...</code> is doing. </p><p>The property <code>padding</code> dictates how much space is between the content and it&apos;s borders - so think internal spacing. </p><p>And the <code>margin</code> property sets the spacing outside of an element or content - so think external spacing. </p><hr><!--kg-card-begin: html--><h2 id="nav"><code>HTML/CSS:</code> Coding the navigation</h2><!--kg-card-end: html--><p>First, we can code the navigation bar of the journal in HTML. We want to be able to let the user know what the title and the beginning context of this website. </p><p>So within the navigation element, let&apos;s put &quot;Journal&quot; as the title. </p><!--kg-card-begin: markdown--><pre><code>&lt;nav&gt;
    &lt;h1&gt;Journal&lt;/h1&gt;
&lt;/nav&gt;
</code></pre>
<!--kg-card-end: markdown--><p>As you are getting familiar with HTML, you were probably able to guess that the &quot;Journal&quot; title goes in between the navigation tags. </p><p><code>&lt;h1&gt;</code> is the HTML tag for a header, which is just a default large text. </p><p>Next, we will style the navigation. </p><!--kg-card-begin: markdown--><pre><code>nav {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background: #274f87;
	color: white;
	font-size: 30px;
}
</code></pre>
<!--kg-card-end: markdown--><p>Let&apos;s break down this declaration block! </p><p>We already know what padding is, and the <code>px</code> after the 20 value is shorthand for <code>pixel</code>. And pixels are a unit to measure the screen, so we want the content inside the nav bar to be 20 pixels away from the border. &#xA0;</p><p>And the value for the <code>background</code> property is a hexadecimal (hex) value! Basically, a way to measure color.</p><p>The <code>color</code> property is for the color of the font, or text within the element. </p><hr><!--kg-card-begin: html--><h2 id="next">Next Steps</h2><!--kg-card-end: html--><p>And here is what your html file should like:</p><!--kg-card-begin: markdown--><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
      &lt;script type=&quot;module&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav&gt;
      &lt;h1&gt;Journal&lt;/h1&gt;
    &lt;/nav&gt;
    &lt;main&gt;
    &lt;/main&gt;
    &lt;footer&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<!--kg-card-end: markdown--><p>And here is what your CSS file should look like:</p><!--kg-card-begin: markdown--><pre><code>@import url(&apos;https://fonts.googleapis.com/css2?family=Montserrat:wght@300&amp;display=swap&apos;);

* {
    padding: 0;
    margin: 0;
    font-family: &apos;Montserrat&apos;, sans-serif;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background: #274f87;
    color: white;
    font-size: 30px;
}
</code></pre>
<!--kg-card-end: markdown--><p></p><p>Now that we have the layout of the website, in the next tutorial we will cover the footer and writing the journal entries. Follow our next tutorial here!</p><p><em><a href="https://tutorials.qoom.io/your-first-website-development-project-part-3">tutorials.qoom.io/your-first-website-development-project-part-3</a></em></p>]]></content:encoded></item><item><title><![CDATA[Part 3: Coding the Content]]></title><description><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#back">How we got started</a></li>
<li><a href="#footer">HTML/CSS: Making the</a></li></ol>]]></description><link>https://tutorials.qoom.io/your-first-website-development-project-part-3/</link><guid isPermaLink="false">61bdfcdc7d90d81a5c8aedc7</guid><category><![CDATA[Your First Website Development]]></category><dc:creator><![CDATA[Alexandria Balde]]></dc:creator><pubDate>Fri, 25 Jun 2021 01:05:00 GMT</pubDate><content:encoded><![CDATA[<h2 id="what-you-will-get-from-this-workshop">What you will get from this workshop</h2><ol><li>A thorough introduction into the world of website development with HTML and CSS</li><li>Learn how to code your first website, a journal!</li><li>A list of resources to help you in your programming journey</li></ol><h2 id="tutorial-content">Tutorial Content</h2><!--kg-card-begin: markdown--><ol>
<li><a href="#back">How we got started</a></li>
<li><a href="#footer">HTML/CSS: Making the footer</a></li>
<li><a href="#entries">HTML/CSS: Writing your journal entries</a></li>
<li><a href="#resources">Continuing on your coding journey</a></li>
</ol>
<!--kg-card-end: markdown--><hr><!--kg-card-begin: html--><h2 id="back">How we got started</h2><!--kg-card-end: html--><p>We began this tutorial <a href="https://tutorials.qoom.io/what-is-website-development-coding-your-project-a-journal">introducing HTML and CSS in Part 1</a>. And then we coded the <a href="https://tutorials.qoom.io/your-first-website-development-project-part-2-creating-the-layout">layout and styling with HTML and CSS in Part 2</a>. &#xA0;</p><p>Now that we have the website all situated, we can start making look like a real journal with journal entries!</p><hr><!--kg-card-begin: html--><h2 id="footer"><code>HTML/CSS:</code> Making the footer</h2><!--kg-card-end: html--><p>Next let&apos;s deal with the bottom of the web page with positioning for the footer element.</p><p>All we need to add to the footer is an attribution and claim to let the user know who/what owns the webpage. In this example, we will put Qoom! </p><!--kg-card-begin: markdown--><pre><code>&lt;footer&gt;
    &lt;p&gt;Qoom 2021&lt;/p&gt;
&lt;/footer&gt;
</code></pre>
<!--kg-card-end: markdown--><p>Now we can style the footer. </p><!--kg-card-begin: markdown--><pre><code>footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0c0c34;
    color: white;
    text-align: center;
}
</code></pre>
<!--kg-card-end: markdown--><p>In the previous article, we covered <code>background-color</code>, <code>color</code>, and <code>text-align</code>. Now with the footer we can introduce another feature of <strong>CSS: positioning</strong>!</p><p>Positioning an element can be broken up into: </p><ul><li><strong>static</strong> is the default position setting with the elements rendering in the order within the document </li><li><strong>initial</strong> sets the element to its default position. So this would be used if you wanted to specify a child to have static positioning instead of its parent that has different positioning</li><li><strong>inherit</strong> does the opposite and sets the child&apos;s positioning value to have the same as its parent&apos;s</li><li><strong>fixed</strong> is the value that is relative to the user&apos;s screen and not the webpage itself. For example, whether viewing the element on a phone or computer, the position of the element will be relative to that. </li><li><strong>absolute</strong> allows the element to only be in relation to its nearest position ancestor/parent element; however, without a parent element, the positioning of the element acts as fixed to the browser and indifferent to the positioning of any other item</li><li><strong>relative</strong> positioning scales with the other elements on the page, so it is the opposite of absolute positioning</li><li><strong>sticky</strong> is like if an element is in fixed position, but also scrolling of the webpage is taken into account</li></ul><p>So with a fixed position (<code>position: fixed;</code>) that is zero pixels away from the left of the page (<code>left: 0;</code>) and zero pixels away from the bottom of the page (<code>bottom: 0;</code>), the footer stays fixed to the bottom of the web page.</p><hr><!--kg-card-begin: html--><h2 id="entries"><code>HTML/CSS:</code> Writing your journal entries</h2><!--kg-card-end: html--><p>Now we can get the <em>most </em>fun part: coding your journal entries! Here is where you can personalize your journal the most and tell the world who you are!</p><p>Let&apos;s begin by making the elements that will house your journal entries. </p><!--kg-card-begin: markdown--><pre><code>&lt;main&gt;
    &lt;div class=&quot;entries&quot;&gt;
        &lt;h1&gt;Title - Date&lt;/h1&gt;
        &lt;p&gt;this is a paragraph&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;entries&quot;&gt;
        &lt;h1&gt;Title 2 - Date&lt;/h1&gt;
        &lt;p&gt;this is a paragraph&lt;/p&gt;
    &lt;/div&gt;
&lt;/main&gt;
</code></pre>
<!--kg-card-end: markdown--><p>So within the main element, we created a system for each of the journal entries. </p><ul><li><code>&lt;div&gt;</code> A division element which is the most common element as it is used to define a section of the web page</li><li><code>&lt;header&gt;</code> A header element that will have the title of your journal entry and the date</li><li><code>&lt;p&gt;</code> And the paragraph element acts as where you will write your journal entries. Instead of &quot;this is a paragraph&quot; you can actually fill in whatever words, emojis, or characters you want as long as it is within the tags and has to carrots. </li></ul><p>And the <code>class=&quot;entries&quot;</code> that is within the div tag is an attribute! Attributes like classes and IDs are a way to identify elements in both HTML and CSS. It is common practice for websites to have attributes to specify the importance of certain elements, as we did when we specified that the div acts a section for the entries. And do not worry, as you continue on your website development journey, you&apos;ll become more comfortable using those attributes. </p><p>Now let&apos;s add some styling to the elements!</p><p>We want to have the title and paragraphs to be a certain space away from the edges of the page and other elements, so let&apos;s use <code>margin</code> to define the spacing. </p><!--kg-card-begin: markdown--><pre><code>.entries h1 {
    margin: 12px 0 12px 18px;
}

.entries p {
    margin: 0 12px 0 30px;
}
</code></pre>
<!--kg-card-end: markdown--><p>In CSS, we style classes by adding the period (<code>.</code>) in front of the classes name and a hashtag (<code>#</code>) in front of ID names. </p><p>So, we are specifying the header and paragraph elements within the element that has an <code>entries</code> class to have certain styling.</p><p>And the having four values for within the one margin property is a <strong>shorthand </strong>for styling the different sides of the element. From left to right, the 4 values tell the margin spacing for top, right, bottom, and left of the element!</p><hr><!--kg-card-begin: html--><h2 id="resources">Continuing on your coding journey</h2><!--kg-card-end: html--><p>Congrats! You have just completed your first website and published out into the world! With your Qoom account, can you simply copy-and-paste the URL to share with your friends and family, and you can publish it to GitHub and Discord!</p><p>Demo the journal here!<br><a href="https://app.qoom.io/~/projects/my-first-website">https://app.qoom.io/~/projects/my-first-website</a></p><p>You can access source code here.<br><a href="https://app.qoom.io/~/edit/projects/my-first-website">https://app.qoom.io/~/edit/projects/my-first-website</a></p><p>Here is the what the final HTML file should look like:</p><!--kg-card-begin: markdown--><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
        &lt;script type=&quot;module&quot; src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;nav&gt;
            &lt;h1&gt;Journal&lt;/h1&gt;
        &lt;/nav&gt;
        &lt;main&gt;
        &lt;div class=&quot;entries&quot;&gt;
            &lt;h1&gt;Title - Date&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porm lacinia
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;entries&quot;&gt;
            &lt;h1&gt;Title 2 - Date&lt;/h1&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;/main&gt;
        &lt;footer&gt;
            &lt;p&gt;Qoom 2021&lt;/p&gt;
        &lt;/footer&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<!--kg-card-end: markdown--><p>And here is what the CSS file should look like: </p><!--kg-card-begin: markdown--><pre><code>@import url(&apos;https://fonts.googleapis.com/css2?family=Montserrat:wght@300&amp;display=swap&apos;);

* {
    padding: 0;
    margin: 0;
    font-family: &apos;Montserrat&apos;, sans-serif;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background: #274f87;
    color: white;
    font-size: 30px;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0c0c34;
    color: white;
    text-align: center;
}

.entries h1 {
    margin: 12px 0 12px 18px;
}

.entries p {
    margin: 0 12px 0 30px;
}
</code></pre>
<!--kg-card-end: markdown--><p></p><p>Here are some resources that are Qoom-approved for progressing in web dev journey!</p><ul><li><a href="https://www.qoom.io/tutorials">Qoom Tutorials</a>! With a tag system and brief summary of each tutorial, it is easy to find help for what you want to code next!</li><li>Try out this <a href="https://www.w3schools.com/html/html_intro.asp">HTML Introduction with W3Schools</a> to get a deeper dive into HTML.</li><li>And this <a href="https://www.w3schools.com/html/html5_semantic_elements.asp">HTML Semantic Elements with W3Schools</a> article will provide more context on the element system of HTML.</li><li>Check out <a href="https://www.w3schools.com/cssref/pr_class_position.asp">CSS Position with W3Schools</a> to learn more about positioning.</li><li>If you are wondering how to get the &quot;fake words&quot; in the screenshots, you can checkout a Lorem Ipsum generator like this <a href="https://loremipsum.io/generator/?n=5&amp;t=p">one by Wasai</a> or this <a href="https://www.websiteplanet.com/webtools/lorem-ipsum">one by websiteplanet</a> that generates illegible text that looks like English words! </li><li>If you want to have more practice with color picking and coding that in HTML, check out this <a href="https://www.w3schools.com/colors/colors_picker.asp">color wheel by W3Schools</a>!</li><li>And if you want a more advanced tutorial on website development, try <a href="https://app.qoom.io/projects/homepage/guide.md">coding your own homepage</a>!</li></ul>]]></content:encoded></item></channel></rss>