The SuperHi Editor

- [Rik] So throughout this course we started with some wire frames that look like this, we kinda planned out our website and then we designed our website in Figma, we basically used the brand and the mood to kind of inform this decision, now the issue that we got is Figma isn't a website builder it's basically design tool so how do we go about making a website based on these designs? Well what we're gonna do is we're gonna start to code this up.

Now there's a few ways of you can do this. We can actually use things like Atom which is a code editor, things like Sublime Text if you've used these stuff before, you're very welcome to keep using it. If you've never coded before, we're gonna use something called the SuperHi Editor. Now you can get this, just sign up for an account at superhi.com and then you can login at editor.superhi.com or, you can download the SuperHi Editor Mac app or Windows app and get started here.

Now I've currently signed in with my SuperHi username and what I can do here is set up a new project and unsurprisingly this project is gonna be called Aria Oslo, so Aria Oslo and we're gonna create this project. Now what this will do on the SuperHi Editor is it will give us a place to actually add the code to, now this is written design tool so pages in here, index.html is our first page that we look at, then we have some stylesheets in here we'll talk a bit about that later.

Over here, I can view my website currently just says hi there. You can edit your content in index.html, and I've got this next tab which is publish and under here, I've got settings as well so I've got a few different options here. But what the SuperHi Editor will give me is a URL. Now if I click this and go here, I can go to aria-oslo.superhi.com and this is on the web instantly and it means that we can change things and they update on this URL too so let's just try this thing out.

So what does the content say? You can edit your content in index.html, so if I go about to my code section which is up here, I've got this weird red text, this might be in a different color if we have it changed the layout or change the color scheme for instance, but this is basically a html tag, it informs the browser what is going on here. Now I've used it doesn't see this hsc the middle bit hi there, you can edit your content in index.html which is this.

Now what we wanna do is just update this. So I'm just gonna quickly change hi there from Aria Oslo and my one down here, you can edit your content in index.html, I'm not touching the any of the red bits at the moment just the text part of this. And in here what I'm just gonna say is artist in Portland, Oregon there we go. Now the SuperHi Editor will save this automatically, if I click back into preview, we'll see here Aria Oslo, artist in Portland, if I go back here, I've got a project URL, if I click there again, this will automatically update too and I can send this to her and say, "hey this is your holding page right now, "you can take a look at this URL "and see what is going on." Now what I can also do is I can publish this changes so if I wanna freeze things in time, there we go we're gonna freeze it in time.

Now if I refresh the page, it'll stay published, but if I'd make any changes Aria Oslo maybe goes to my name, Rik Lomas. The final version of this doesn't change. However, I do have a preview version which has changed and I can get the preview or the draft URL down here. So I've got my different URL, very slightly different up here with two different bits of content. So if I do wanna freeze things in time but still edit them later on, all I need to do is go and publish that.

Now I can go and send this URL to people and be like, "hey check out my new website." It's not quite ready yet, I wanna add a little bit more style and a bit more content in here before you actually get anything done. So next, what we're gonna talk about is the content of this website. How do we go from something that looks like this, into something that looks a little bit more like that.