- Hello, everyone.
Welcome to the second video
in my Website Redesign series.
In the first one, in the last video,
which I'll link to on the playlist up there,
we went through the site map
like planning the website,
planning out exactly what templates I'm going to need
to design and build, what pages I'm gonna need,
and as part of that, in that video,
I mentioned that what I'm going
to be doing first is making an MVP
which stands for a minimum or minimal viable product.
I'm pretty sure that's what it stands for.
Basically, it just means it's the smallest possible version
of the project that will still get the job done.
And in my case, the job that needs
to be done is, with my website,
provide access to all of my content online.
I need to showcase my work
and also make it easy to contact me.
So that's what we're gonna be doing today,
is designing and building the MVP
of my website which, in my case,
is basically just gonna be a single page.
I'm gonna be walking you through
how I designed it and also building it live with you
in Webflow, well, not live,
because I'm gonna be editing this video,
but you know what I mean.
I actually kind of like
when people have just one-page websites.
I think it's kind of minimal and cool,
and it's just like a blurb about them,
and yeah, links off to their stuff.
So that's what I've decided to go with
for this MVP of my website.
I recorded my screen as I went through the design process,
but as you can see, as you watch it,
I pretty much already had an idea in mind
of exactly what I wanted to do.
I definitely did try out a few different versions
and explore a couple of different arrangement ideas
for this text, but for the most part,
the idea was pretty solid before I started.
I was originally thinking
about having it be a white page
with some white colored links or something
to bring some color accents in there,
but then I thought, "You know what?
"It's my website, and I really like pink and purple.
"So why not just have a pink and purple gradient
"as my background?"
I tried it with a photo, but it didn't really work,
and I decided it wasn't incredibly important
at this stage either.
So this is what I've ended up with as the page
that I'm going to be building today.
It's just a plain pink and purple gradient
in the background, a logo at the top,
and that logo is actually gonna be animated.
There's some very simple text
that just explains who I am and what I do
and links off to the relevant stuff.
For my work, for the Check Out My Work link,
I'm gonna be linking to my Drupal profile,
instead of a portfolio.
Then at the bottom, there's links to all of the socials
and the stuff and the places to find me.
So it'll serve that purpose of, yeah,
access to my content, access to contact me
and see my work but without too much design
and development work at this stage.
It'll be a good placeholder
while I work on the rest.
So what I'm gonna do now is start screen-recording
and building this in Webflow.
I'll be honest.
I have not really used Webflow all that much before.
In fact, I filmed a video of my first impressions,
and I've not used it much since then.
So it's gonna be a learning curve to go through,
but I'm excited to get stuck in and get to know it better.
And I think that a small project like this is a great place
to start, so let's dive in.
All right, so this is a new Webflow project,
and I know that to start it, I need to add a container.
And actually, first, I should style the body
with the gradient, shouldn't I?
So let's figure out how we do that.
(upbeat music)
Cool, that was pretty easy.
This is already looking better
than a plain white page (chuckles).
I went to a Webflow workshop
at Epicurrence that was hosted by Ran
who runs the channel Flux.
He went through an introduction to Webflow and using it,
and a lot of what he said, like,
it really clicked with me,
that this is not a website builder in the sense
that you're just dragging stuff around on the screen,
and it'll make the code for you.
You're still thinking about regular HTML
and CSS structure and how that, you know,
you'd put together if you were coding it by hand,
but it's just that this makes it a whole lot easier.
So with this container here,
instead of just dropping the logo straight in,
what I would generally do if I was building myself is put it
in a div block, so that's what I'm gonna do.
(upbeat music)
I'm gonna add a class to this div, 'cause I think
that was another one of the mistakes I made
when I was doing the first impressions,
is that I was kind of just building all over the place,
and I wasn't creating classes as I go,
which if I was coding by hand, I would be doing.
So I'm gonna call this one logo,
and then on logo, I'm going to add some margins at the top.
(upbeat music)
Okay, to start this H1, I would hope that I don't have
to add a class to it. and instead if I just style it,
it'll apply to all each ones on the page,
even though there's only gonna be one,
but yeah, I would assume that's how it works.
So that's what I'm just gonna go with.
I need to work out how to host my web font.
If I take advanced...
(Charli hums)
I think something else I need to come back to.
We'll just go with aerial for now,
but the font type used in my design is Averta,
which is a fave.
It's from the Designers Foundry,
and yeah, I use it in pretty much everything.
So I'm sure you've seen it before.
Let's test that theory here.
If I style this paragraph text
to be white,
when I add another paragraph, will it be white?
(upbeat music)
No.
There we go, got it, okay.
So if you want to style all of the thing on the page
and not accidentally create a random class for it, you have
to select it so that it's all paragraphs, all H1, I guess.
(upbeat music)
One thing you have to make sure of is
that you're dropping your block in the right place.
See how if I put it here at the outside of the container,
so I gotta make sure that there's a place to drop it.
Okay, so I want this guy to be pinned
to the bottom of the screen,
and I feel like I know how to do this in code.
So let's see if we can figure it out here.
Yeah, there we go, absolute,
and then, is this the one to put?
Maybe it's this one, zero.
There we go.
Cool.
That's not exactly what I want though, is it?
I feel like I'm gonna have to do some CSS research,
but anyway, let's keep adding stuff.
So for these guys here, I want them to be SVG's,
because I want to be able to change the hover state,
like change the color on hover.
I'm gonna make me go a dark purple, I think.
I was doing better research about it before
and come across this guy here.
So yes, I have to embed the SVG code,
rather than upload it as an image file.
Let's see how to go about doing that.
So I'm guessing I take an HTML block somehow.
Embed, there we go.
That's probably it.
Let's put it in here.
Now I use a tool called,
actually I can never remember if it's OMGSVG.
No, it's SVGOMG.
Okay, so this is a tool that I use
to compress SVG files.
Oh, what am i doing?
I can't like navigate my computer
and talk at the same time.
Okay, so I like using this,
because it just compresses them a little bit
and gets rid of things like the title, stuff like that.
So yes, and then I can just go to Markup actually,
and hopefully you just copy it straight from here.
Let's see, if I add this in...
(upbeat music)
Cool, there we go.
We've got it.
Wonder if I gonna label this thingy, though.
No, it doesn't seem to be, okay.
That's all right.
I do want to put a class on it, though,
because then I can just change the hover state
on that class, and hopefully, it should apply
to all of them, like logically thinking.
Let's call this Social Icon.
Makes sense, right?
(upbeat music)
Oh, hey, I just realized
that you can just use the Undo key in Webflow.
That's kind of nice.
I, you know, just did it out of habit,
and it worked (laughs).
All right, we'll solve that problem later.
I'm just gonna get all of my icons sitting
in this space, for now.
(upbeat music)
I'm wondering, see how the fill is embedded
in the code here?
I'm wondering if that, perhaps, shouldn't be like that.
I should instead just be doing that through the CSS,
but I guess we'll find out when I work
on our marketing website.
We use IcoMoon to generate an icon font.
So usually, for small SVGs and things like this,
I would just use that,
because then you just change the color of text,
and it changes the color of the icon,
because the icon is the font, if that makes sense.
All right, now all the pieces are in there.
I guess I should add the links as well,
'cause that's like something else that I need to style.
I know I had trouble with links, last time,
styling them, so let's see how we go.
All right, make this a link.
Here we go, and this, just like the paragraphs,
I think this was my problem, last time,
is I didn't select All Links to style.
So that's what we're gonna do.
So our links are going to be...
Why is it telling me that it is white
when it is actually purple?
I hope this does the hover for all links, too.
That would be ideal.
Okay, we have a rogue dot purple link,
and I don't know why it is doing that.
(keys clacking)
Okay, it looks like maybe this is a bug.
So what we're gonna do is...
Boom, that worked, cool.
Okay, this is where you get on our forums (laughs).
Right, so I'm gonna put a bottom border on all of my links.
I don't like doing it underlined,
because I feel like it sits too close to the text,
and I think yeah, I don't know.
A bottom border just looks a little bit more sleek.
So we're gonna have it solid.
It's gonna be one pixel.
And it's gonna be white.
I also really like adding a transition
on to links and things like that,
'cause I just think it eases in,
and it looks really nice.
So we're gonna transform the border color.
Yup, and we're also going to, can I add another one?
(upbeat music)
So you know, when I hover, like,
it does seem kind of cool.
Yeah, yeah, okay, for this content block,
how do I make sure I isolate to that?
I think I can go in here and go content.
There we go.
I put a percentage on the height,
but I think I'm gonna actually do it based
on the viewport,
'cause that way, when I shrink up the page, yeah,
that will change to, okay.
Should we do the easy thing first?
Should we figure out how
to make these things change color?
I don't know why I think that's easy.
I did have a tutorial about it.
So let's try and follow this here.
I guess the first thing to do is make this guy a link.
And I would guess that the best way to do that,
I'm probably gonna have to edit in this HTML file here.
(upbeat music)
Okay, so now that there's a link,
it, of course, has that underneath,
because we set that to go on all links,
so it's got an underline,
but I'm gonna set social icons
to have a bottom of none.
Ooh, ooh, no, that's what I need to do.
I think I need to go to a link within Social Icon.
Looks like this is gonna be another one of those things
that I'm adding to my to-solve-later list.
Ooh, interesting, let's try this.
Yeah, buddy, we got it.
So because I want the colors to go the same
as the link colors do, it's easy.
All that I'm dealing with is that border issue.
But that's okay.
We'll sort that out.
Now that that one's sorted, let's move on to this issue
of this footer thing not doing how I want.
I know I've coded this before.
I'm sure it's easy.
I've just forgotten how,
so anchor footer to bottom of page.
This is a tip for coding.
If there's something you want to do,
you can be pretty sure there's
like a Stack Overflow or a CodePen,
a CSS-Tricks or something that explains how to do it.
So you just gotta, like, type in the right thing
into Google basically.
(upbeat music)
Okay, I've gotten somewhere.
I forgot, silly me, that Webflow uses Flexbox,
which is a pretty great modern CSS framework.
I don't know if that's the right word,
and I'm sure all the code people will tell me I'm wrong
for it, but Flexbox is pretty great, because it helps you
with alignment and things.
How I did it was I found this tutorial
from one of the Webflow training videos,
I guess is the word I'm looking for,
which helped me do exactly what I was trying to do.
So there we go, that's great.
Just to walk you through it,
in case this is something you're having trouble with too,
here's what I did.
So first of all, my container has flex display on it now,
rather than being display blocks,
my flex set to vertical and set to a space between,
so that, like, the top thing will go at the top,
and the bottom thing will go at the bottom,
if that makes sense.
Then my content block, which is this thing
in the middle here with my text in it.
I've set it to expand, and that means that, say,
if I change it to this, which is the regular setting.
Expand means that it will fill in any extra space
in between like either side of this item.
So basically it adds space at the bottom and at the top
to push the other things out to the end, which is great.
So then if I shrink my page in,
like the footer is staying there,
and it won't overlap it anymore, either, which is ideal.
I also added, so I put all of my middle content stuff
into its own div, to nest it in there,
made that a bit shorter, 'cause I was worried
that my line length was a bit too long,
and then I put 20% of the view height margin
on this thing, just to like, yeah, be a bit more responsive,
so as you shrink the screen up,
the space shrinks a little bit too.
So not sort of the issue of these lines yet,
but what I have done, 'cause also remembering Flexbox,
is I've made my footer to be display flex as well,
and I've aligned the items to the center, see,
whereas before they were all hanging up top here.
So I mean, you couldn't really tell because of the lines,
I think, but yeah, it looks better if they're all aligned
with the center of the image.
So really happy that I figured that out.
Something cool about Webflow is that it's really easy
to do the responsive styles.
So I've just been clicking through here
and changing things as needed.
Here's an example.
In my main desktop view,
I have this content text block at 90% width, right,
because they didn't want it stretching all the way
to the end.
When I go into tablet view though,
and then further down, I want it to be back to 100%.
So I change it here, and it applies to all
of the breakpoints below it, as well.
So that's really handy.
This is all looking good.
Ooh, something, an issue here though,
I've made the heading smaller on mobile,
just because it was a little bit obnoxious,
and I think I'm gonna make the paragraph text smaller
as well, so let's remember to go to all paragraphs
and shrink this guy down.
Then if I go back up, you see the text gets bigger again.
It's so handy.
Yeah, solving this issue of targeting a link within a div,
so rather than all links on the page,
I know I could go through and just, like,
instead of having link styling across the board,
I could make all these a class,
like a text link class and apply it to all these links.
But I don't think I should have to do that.
There must be a way to target all links
within a certain div.
So yes, I have done what I always do when I get
to a point that I'm stuck and have asked for help,
reached out to Webflow on Twitter.
So I'm gonna wait now and see what they say.
Okay, I'm back.
I figured it out, and it's a few days later,
as you can probably tell by the fact
that my hair is a lot more purple
than it was in the last clip.
So it turns out that targeting a link or a heading
or whatever within another class is not yet a feature
of Webflow, but it was a pretty easy fix
to just add a few lines of custom code
in the project settings section
of, yeah, this Webflow project that I have.
So I just wrote a few lines in there
to take away the bottom border from the social icons
and also from the logo as well,
'cause I made that link to the home page.
Something else I did, without screen-recording it,
was set up some pages for the static things
that I have a linked on my old website,
so things like my portfolio review instructions,
things like the form to download my screen printing guide,
which is linked to from
what I think is my most popular video.
I didn't want those pages to be offline,
'cause I wanted people to still have that information
and be able to access it,
so I just made a really simple basic page
that house that information,
and yeah, takes over that URL
so that it doesn't go to a 404 error.
And with that said, this version of my website is now live,
which is really exciting.
I'm happy to finally have it out there,
and it feels like that first step
towards tackling this huge project that I have in mind.
I hope you enjoyed seeing the coding process of it.
As I suspected, it was a really good, simple little project
to get back into using Webflow and just get used to it
and how it works, learn some things as well.
So if you're wanting to learn Webflow yourself,
perhaps making yourself a single-page site
could be a really good place to start.
I've put a link in the description
to where you can try Webflow out.
It's free to just get in there and have a play.
You have to pay if you want to host the project
or export the code, but yeah, if you just want
to get started using it and seeing what you think,
then you can dive in.
If you did enjoy the second video
in my Website Redesign series,
then please give it a thumbs up
and let me know down below in the comments
what your favorite part of this video is.
If there was, I don't know,
a particular thing you learned in it
or maybe something I did wrong
that you think I need to learn,
maybe you can share that down below in the comments.
Next up in the series,
we'll be tackling the bigger website project,
and I'll be starting to wireframe out the pages
that I planned that I need, in my sitemap video,
the first video in the series.
So stay tuned for that.
I think it should be a good one.
I'll be taking you through my thought process
when I'm in those initial stages of designing a web page,
and in this case, designing multiple web pages
and how elements might transfer across them.
So look forward to that,
and I will see you in the next video, bye.
(upbeat music)