Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a No-Code Web App with Softr!
You have completed Build a No-Code Web App with Softr!
Preview
In this video, you’ll learn how to transform a basic template into a personalized, functional web application without coding experience. You’ll learn how to apply a unique color palette and customize individual blocks. You'll also learn how to add multiple conditionals for advanced user access control and see the simple process of publishing your app.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Alright, it's finally time to start
to style this app and make it unique.
0:00
To get a color palette, I went to
colorfy.com, generated a dark mode color
0:05
palette, and saved my favorite results
in a simple notes file.
0:10
This is a technique
I saw in Softr's own tutorials,
0:14
so I'd recommend doing the same
once you find a palette you .
0:17
Then, you can copy
and paste the color values from there.
0:21
I'll link some helpful sites
in the teacher's notes below that provide
0:24
great color palettes for free.
0:27
Hopefully, in a future update,
software will streamline this process,
0:30
but for now, this method works just fine.
0:34
Since styling is highly subjective,
I'll show the basics
0:37
of applying styles to a few sections
so that you understand how to do it,
0:40
but this is going to differ in your app,
of course,
0:45
but you'll see that the process
is repetitive and pretty straightforward.
0:47
I'll start
with the theme settings on the left,
0:52
adjusting the font family and weights
for headings and body
0:54
text.
0:57
Then, for the colors,
1:02
I'll apply my new accent color
from my notes file, change the text color
1:04
to white, and apply
my darkest color to the background.
1:08
I'm using the darkest here
as it will apply to some blocks the header
1:12
to create some contrast
between that and the rest of the page.
1:16
The other blocks will need
their own customization.
1:20
Now this generated logo isn't readable,
1:23
so I'll replace it with text
and an icon instead.
1:26
This is found in the Settings menu
under the General Settings,
1:29
but they've provided a handy link here
from the Header Blocks
1:33
editor too.
1:35
Much better.
1:49
Next, I'll adjust the hero sections,
1:51
changing the background
colors and button font colors.
1:53
There are many styles available
for buttons that you can adjust,
1:58
but I rather what it has by default here.
2:01
I also noticed
2:13
that this Join
Now button links to the login page,
2:14
but I want it to direct users
to the sign up page instead.
2:17
so I'll change that here.
2:20
For the logged in hero block, I'll
2:23
just change the background color.
2:25
For the member section,
I'll change the background color,
2:29
change the font colors to white,
and increase the heading
2:32
text size.
2:35
Clicking the paintbrush
2:49
next to Item
Fields lets me customize the member cards.
2:50
In here, I'll adjust their background
color to a lighter gray, set the border
2:54
color to my primary accent color
and change the text colors and sizes
2:59
Since the black text is hard
to see with this gray background
3:04
I going to make all the text white
3:08
I don't want an
3:25
edit button here, so I'm going to delete
it, add a new button,
3:26
label it as view and have it open
the members
3:29
detail page instead.
3:32
Lastly,
there's this See More button at the bottom
3:42
that I'll style to look the same
as the rest.
3:45
Accent color as the background, gray font,
and no border.
3:48
Perfect.
3:52
Now on to the footer.
3:54
the header, I'm
going to give this the darkest gray
3:56
in my palette.
3:58
I'll add a white text color
4:05
to all these links,
4:06
change the color of this divider line,
4:13
and also the copyright text.
4:23
and also the copyright text.
4:25
This default logo
4:28
doesn't quite match my theme anymore,
so I'm just going to delete it.
4:29
But this is where you can add your own
personal logo, just the header above.
4:33
Let's check it out in the preview.
4:40
I really
4:47
that mobile
layouts are already built into this app,
4:47
these member cards
switching to a single column grid.
4:50
That's really helpful.
4:54
Whoops, I must have forgotten
5:00
to change the page visibility for this,
but at least we can see that
5:01
the permission denied page works
and is already styled up.
5:05
I'll be addressing this issue shortly.
5:09
Now I'll tackle the all courses page.
5:13
The theme background color affected
this block more than the others,
5:16
kind of the header.
5:19
So, just the members section,
I'll go through and adjust the styles.
5:21
This is pretty much identical
to what I did
5:26
in the members block on the homepage,
so I'll skip a bit.
5:28
And this is what I ended up with.
5:33
Not bad.
5:35
Let me pause here momentarily.
5:36
With my particular app and content,
I could have easily duplicated
5:38
this grid list block on the page
and adjust the visibility and filtering
5:42
to have one viewable to paid members
and the other to free members.
5:47
But I wanted to show how easy it is
to duplicate a page,
5:51
just in case
your app needs similarly styled pages
5:55
but showcasing different content,
services, or merchandise.
5:58
So I'll go to this page in the Pages tab,
6:02
click the ellipsis, and select duplicate
6:05
I change the name URL and visibility
6:13
so that only admin and free members
can view it.
6:17
Now, inside this page, in the source tab,
6:24
I'll add a conditional filter
on the courses being displayed.
6:28
makes this very easy to do.
6:32
First, we select the field
from our dataset, so if,
6:35
the course's access level,
6:41
is, and then we provide
what value we want, in
6:43
my case, free.
6:47
These conditionals
won't show in our workspace,
6:53
so I'll preview the page
to make sure it's working.
6:55
And it It is!
7:00
I'm only getting free courses
on this page now.
7:01
Fantastic!
7:04
I'll head back to the home page
7:07
to edit the header block.
7:08
I'll change this current button
to say All Courses
7:14
and change its visibility
to Admin and Paid Members.
7:17
Then, I'll add a new button
7:33
for a page and select
the Free Courses page.
7:34
This will be visible
7:43
to admins and free members.
7:44
Let's check the preview and make sure
7:48
all user types are seeing
the correct buttons in the header.
7:50
Non logged in users
will only see the sign in button.
7:54
Good.
7:57
Bob is a free
8:00
member and
they can only see the Free Courses button
8:01
and that's working correctly.
8:04
Charlie is a paid member
8:13
and they see the All Courses button
and that's working too.
8:14
And finally, good old
8:21
Joe Smith is my admin
and they see all of them.
8:22
Awesome!
8:26
As I said though, in my case,
8:27
duplicating the block on the same page
would have been the way to go,
8:29
but now you can see how easy it is
to style one page and duplicate it
8:33
to save yourself time,
8:37
and we got more practice
in with conditionals and visibilities.
8:38
Now comes the tedious part,
8:43
going through every other page
and updating the styles.
8:45
I recommend taking notes on font sizes,
padding, and border settings to maintain
8:49
consistency across your app
8:53
and to prevent you from having to go back
and forth between pages
8:55
if you forget a certain
setting that you've used.
8:59
Before I wrap up the
9:02
styles, let's look at adding
multiple conditionals.
9:03
Currently on the account settings page,
I have an edit button
9:07
that lets users update their details
9:11
However since these pages
are publicly visible to any logged in user
9:14
I want the button to appear only
if the user is editing their own account
9:19
or if they an admin
So in the actions tab, on the edit button,
9:23
and in the visibility
settings, we'll address this.
9:28
Keep in mind,
this feature will eventually require
9:31
a pro membership
after your free trial has expired.
9:34
I'll enable this on specific records
9:38
only option and add my first condition.
9:40
if the user ID of the user
being displayed on the page
9:44
is equal to the logged in
user's ID, show the button.
9:49
Also, I'm
9:54
keeping conditionals under an any option,
which means if either of these conditions
9:55
are true, do the action,
or in this case, show the button.
10:00
You could also select all and require
10:04
all conditions you provide to be true.
10:07
For the second condition, I'll simply put,
if the logged in user's membership
10:10
is admin, show the button.
10:15
And there we go.
10:20
Okay, I've gone through and applied styles
10:23
to all the other pages, and I'm feeling
pretty happy with what I have.
10:25
Now comes the best part,
publishing this app so that it's live.
10:29
The process is incredibly simple.
10:34
Just click Publish up top here,
and then in the drop-down,
10:37
click Publish again.
10:40
And that's it.
10:44
Now we have a Softr subdomain here
10:48
that we can copy and share with anyone
to come visit and use the site.
10:50
Any future changes to your app
just require clicking
10:54
Publish again, and now the button
will read Publish Updates.
10:57
Click that, and they'll go live instantly.
11:01
And here it is.
11:04
This is the live version of the app.
11:05
I'll test signing up with my real email.
11:08
I got a verification code
11:16
in the email, copied it,
and I'm pasting it here.
11:18
Now I can provide my name
11:23
and set up a password.
11:24
Just that, I'm in.
11:33
Because of the functions
I added to the ID columns and membership
11:35
column in my Google Sheets documents,
my account was created successfully
11:39
and I'm automatically set up
as a free member.
11:44
My account is now visible
11:48
in Softr's dashboard,
11:49
and it's recorded
11:55
in my Google Sheets document.
11:56
And there you have it.
11:59
We started with nothing
but a Google Sheets document,
12:00
which could have been pre-generated
for you, and built
12:04
a fully functional live web application.
12:07
I hope this workshop showed you
just how easy it is
12:11
to create an app or website
without any coding experience.
12:14
That's it for me.
12:18
I hope you enjoyed this and have fun
building the apps of your dreams.
12:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up