The first 10 people who complete this tutorial will receive a free .com domain name on us. See more details.
Welcome to our community! 🎉 Let’s take a moment to get a good overview of this first step.
Your task is posting an introduction to Mysticwarez homepage. This is an in-depth tutorial covering all the coding necessary to publish to our live website.
You don't need prior coding experience. We'll walk you through everything.
Steps:
Download this website's code
Create your post on the website (with HTML and Visual Studio Code)
Upload the updated site code at the end of this page
This tutorial will guide you through each step. Posting should take about 20 or 40 minutes, depending on your speed. Taking breaks is OK.
If you get stuck, don't tear your hair out—ask for a helping hand on the Discord or leave a reply on this page. We're very friendly!
Our philosophy is to learn as we go. So, let's get started.
02. Download the code
Fantastic, you're ready! We'll start by downloading the code you need from our code host.
The easiest way to do this is simply clicking the button below. It's a direct link to the latest version of our website code on Github, a popular code host.
If you prefer to do it manually, you can head to our Github page and click the big green "Code" button. Then click "Download ZIP" at the bottom of that dropdown.
Unzip the folder on your Desktop or Documents folder, whichever you prefer.
Hooray, you made it through! Let's now dive into creating your introduction post with HTML and Visual Studio Code.
03. Create your post
Now the real fun begins! 🎨 You've got the code, so it's time to start crafting your very own introduction post. Don't worry if you're new to HTML or JavaScript — I'll guide you through every step, and there's no pressure to get it perfect on the first try. Mistakes are just part of the learning process, and everything is safe here.
Meet Visual Studio Code
Download Visual Studio Code by heading to code.visualstudio.com. This powerful editor allows you to work directly from your browser. It works slightly differently from Microsoft Word or Google Docs. Because it's meant for code, it won't autoformat anything, keeping your code just as you intend it to be.
Finish the installation process for VS Code, and open the folder on your computer where you've stored the cloned Mysticwarez repository. If it asks you if you trust the author, say yes, as it's your own desktop.
Also, I recommend hiding all the gizmos and widgets on Visual Studio Code that you won't be using yet, just to keep a distraction-free environment.
Right-click every icon or label that you see, and un-checkmark it. Except for the most top-left button named Explorer.
Here's a handy GIF guide.
Fire up the site
Let's install an extension to give this code folder a URL of sorts on your computer. Right-click the Explorer button in the top-left and check the Extensions tab back. Click on it and search for "Live Preview" by Microsoft. Click the Install button and refresh, if the button changes to prompt you to.
Hide the Extensions tab again by right-clicking it and un-checkmarking it.
Navigate back to the Explorer. If there are open folders, collapse them (by clicking the triangle on the left-hand side) to get a clearer view.
Find the index.html that's almost last in the list of files. This means it's not in any folder inside the project folder—it's at the "root" folder. Right-click that index.html and select Show Preview from the list.
You'll notice a new panel opened up, with a mini-browser and the URL http://127.0.0.1:3000/index.html
127.0.0.1 is your computer's name for itself. It's "home." 3000 is a port number—it's like a room that your computer is reserving for your website.
If this mini-browser is getting in the way, copy the URL and paste it into your full browser, whether Chrome, Safari, or Edge. It'll work the same. Then you can click the X in the mini-browser tab to go back to the full code view.
Copy the first intro post as a base
There is a posts folder. Find the welcome folder in the posts folder.
Copy the entire welcome folder by right-clicking the folder and selecting "Copy." Then click the posts folder again. Right-click posts and click Paste from the options. Rename this copied folder to welcome-your-username-here, replacing your-username-here with your actual username.
Clear out existing images by navigating into the images folder inside your new welcome-your-username-here folder and deleting the images there. This will ensure you start with a clean slate for your own images.
Craft the preview of your intro post
Open the post.html file in your new welcome-your-username-here folder. This is where you'll write a short version of your introduction post for the homepage list of posts.
Let's be fearless, and take a close look at this code, line by line.
<article class="post-card">
<div class="post-content">
<h2>Welcome 🤗 to the digital coven for tech witches! 🌟🔮✨</h2>
<img src="/posts/welcome-${yourUsername}/images/cover.jpg" alt="Welcome to Mysticwarez" class="cover-image">
<p>Hello kindred souls! My name is [Your Name], and I'm excited to join Mysticwarez. This is my introduction post.</p>
Line 1: HTML is text. We use "tags" to describe the job of the text inside. A tag looks like this: less than angle bracket (<) then the tag name and then greater than angle bracket (>). Every tag we open with this code, we eventually have to close, to keep everything neat. We'll cover that later.
In this line, we're saying we want to create an "article" that has one class (or type) — post-card. We can use classes to make specific types of articles look differently from each other. Let's move on.
🧪 Experimentation is OK
Curious about the job of each part of the code? Try changing something. See what happens. Don't worry about breaking things! You always have the undo button.
Line 2: A <div> tag is short for a "divider" tag. It's a way to contain code and keep it separate from other code that's not related to it. This divider or <div> is for containing the post content, as you can see by the post-content class.
Line 3: This <h2> tag stands for heading level 2. You may recognize this pattern from editing documents or essays. If not, just know the level 2 heading comes after the level 1 heading (the page title) and the less important level 3 heading.
This is where you add your greeting, or introduction title! Go ahead and edit the text inside <h2> and </h2>
Line 4: The <img> tag is for including an image in your article. src="urlhere" denotes the image source, which is contained inside the double quotes. Add an image to your images folder and call it something simple like me.jpg or me.png. * Note JPG and PNG work best on the web! If you have another format, try using CloudConvert.com to convert it to either of these formats.
alt="alternative text here" denotes the text that describes the image for people using screen readers to browse the web. This includes people with vision impairment. Fill this in, again staying within the double quotes, and paint a rich picture of your photo with words—try to not use double quotes in your alternative text, as that'll be confusing for the HTML.
Line 5-6: You're doing great so far! Next, a paragraph tag looks like this: <p>Paragraph text</p>. Use as many paragraphs as you need, stacked on top of each other to create your first "Hello world!" to our community.
Feel free to mix in images.
👋🏼 Tips for a friendly introduction
Share your name, where you're from, and what you're excited about. Maybe you're a student, a professional, or a hobbyist. What are you hoping to learn from Mysticwarez? What are you hoping to contribute? Be authentic, be yourself!
Line 7 is an "anchor tag": <a>. This will create a link to another page. In this case, it has the class of button, and it's HTTP reference (href) is /posts/welcome-your-username-here/#replies. Edit the folder name between /posts/ and /#replies.
Line 8 is closing that div we opened earlier with </div>
Line 9 is closing that article we opened earlier with </article>
Now, let's go back to the homepage and see how your post looks. But alas, it's not there! That's ok. Let's learn how to add it to the list of posts to display.
04. List your new post
Now that you've crafted your introduction post, it's time to add it to the list of posts on the homepage.
Find the file called "load-community-posts.js" inside the scripts folder. Click on it.
💭 Understanding load-community-posts.js
This JavaScript file is what we call a "blackbox" — it works in the background to handle listing posts on the homepage. For now, you don't need to worry about how it works internally. Think of it like you think of a washing machine. It just works, even if you don't know the underlying technology.
All we're gonna do is add your new welcome-your-username-here folder to the top of the list.
Find the line that says const posts = [ and add a new line right below it. Inside the square brackets, add the following line:
'welcome-your-username-here',
Mind the single quotes and comma, but no worries on mistakes! You can always try again. Save the file by pressing CTRL + S on Windows or CMD + S on Mac.
Now let's go back to the homepage... your post is there!
05. Publish your post
Awesome, you've accomplished so much! Now that you've created your introduction post, it's time to publish it to the live site. This way, everyone can see your beautiful work!
Zip up the complete mysticwarez project code with your new post included, by right-clicking the folder on your Desktop or Documents folder and selecting Create Archive. (It may be called something else on your computer.)
Upload the zip using the form below.
Wonderful! 😄 If the form disappeared, you did it!
You'll also receive an email confirmation.
Soon, you'll get an email with personalized code feedback. And when everything's clear, your intro will be published within an hour or so!
Congratulations! 🎉 Thank you for being a part of Mysticwarez. We can't wait to see what you create next. (Another day is OK — you've already accomplished a lot today!)
