Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now that you know how to use static assets in your Spring application. Implementing a professional design that is simple, beautiful, and responsive is no small task. In this video, we'll address that issue.
Design Assets for Download
Download and extract resources.zip. Then, drag the extracted resources directory into src/main of your IntelliJ project.
*This will replace all the files you currently have stored in src/main/resources.
MaterializeCSS
MaterializeCSS is an implementation of Google's Material Design Principles. It contains CSS (and a few JS) components for responsive grids, menus, and buttons, among other UI widgets.
If you want to experiment with other CSS frameworks, you could check out Bootstrap or Foundation.
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
We've gone through a lot already and
have a functioning web application with
0:00
most of the components we'll need
to build something interesting.
0:04
What I'd like to do now
is give you a gift.
0:07
I know, you weren't expecting a gift and
you probably didn't get me anything.
0:10
But this, this is the gift of design.
0:15
Look.
0:19
You're gonna spend a lot of time coding
your best web apps a lot of time.
0:20
What better way is there to compliment
your fancy functioning application
0:25
then with the gorgeous design.
0:29
So in the teacher's note you'll
find a link to a zip file.
0:31
Go ahead, pause this video to download and
extract that ZIP file.
0:34
Come back here when you've finished, and
0:39
I'll show you how to incorporate
those assets into your project.
0:41
Okay, so I downloaded and
extracted the ZIP file, and
0:45
the resulting directory is currently
sitting in my downloads directory.
0:48
What I've given you are some directories
and files to completely replace what you
0:52
currently have in your
resources directory.
0:55
So in the extracted directory,
select both the static and
0:58
the templates directories and copy them.
1:01
I'll use Cmd+C to do that.
1:04
Then in IntelliJ, right click
the resources directory and choose Paste.
1:07
You'll be given a couple prompts, the
first confirming what you intend to copy,
1:13
OK, and
the second asking about overwriting.
1:18
Be sure to click Overwrite for all so
1:22
that the files I give you will
replace those we had created already.
1:25
Great, you now have all the assets you'll
need to use this beautiful design.
1:32
Let's take a look at
some of what I gave you.
1:37
First, open the home.html templates.
1:39
Let me collapse a couple of these.
1:42
So under templates,
I'm going to open home.html.
1:44
As you can see,
the mark up has grown substantially.
1:48
Let's take a look at just
a few things in here.
1:55
First, you see this reference to
a library called materialize/css.
1:58
It gives us all sorts of
design goodies for free.
2:03
It allows us to more quickly and reliably
build a responsive website, that is,
2:06
one that looks great on desktop and
mobile devices alike.
2:11
It also allows us to make what's
called an off canvas menu.
2:14
You know when you tap
an icon on your phone and
2:17
a menu slides in from the left or
the right, that's an off canvas menu, I've
2:19
linked to materialize/css in the teacher's
notes if you'd like to learn more.
2:23
Scrolling to the bottom of the file,
2:29
you'll see a reference to the jquery
JavaScript library, right here.
2:31
This is required for the materialized
JavaScript library listed just below it.
2:37
Again, we need materialized JavaScript for
that off-canvas menu.
2:42
And since it depends on jquery, we need
to include the jquery library, too.
2:48
There's also an app.js file referenced
here which is a very small js file I wrote
2:53
that activates that menu button on mobile
devices which toggles the off canvas menu.
2:57
As far as the html between
what I just showed you,
3:03
if we scroll up here,
we'll see a navigation menu.
3:06
In fact, we'll see one for
3:09
the desktop navigation menu as well as
another for the mobile navigation menu.
3:11
Also, if I scroll down just a bit you'll
see that I've got some mark up here for
3:17
a search bar.
3:22
Now, below the search bar you'll
also see some placeholder stuff
3:24
that we'll end up replacing as
we go throughout the course.
3:27
I encourage you to spend some time
going through some of the other details
3:31
both in home.html and
3:34
in app.css, especially if you're
interested in front end web development.
3:36
For now, let's stop and
rerun our bootRun task.
3:41
We'll stop it and rerun it.
3:46
So that we can see what this application
looks like, there's the spring logo and
3:50
I see finally that Tomcat
has started on port 8080
3:54
using my app config in
just over 2 seconds.
3:58
Switching to my browser,
4:02
I'm gonna navigate to the home
page of our application.
4:04
And there you have it, check that out.
4:08
We've got a nice navigation
menu here at the top, and
4:12
there's that search bar
I was referring to.
4:15
Also, an easy way to check for responsive
behavior in a desktop web browser
4:18
is to shrink the width of your window and
see how it responds.
4:22
So I'll shrink the width of this,
and there we go check that out.
4:25
I've got my hamburger icon I see here.
4:30
And when I click that, there it is.
4:33
There's that off canvas
menu I was referring to.
4:35
Look familiar?
4:38
Pretty cool stuff.
4:40
And there you have it,
the start to our beautiful looking,
4:42
snazzy functioning application.
4:45
Don't worry if at this point you don't
fully understand how this design works
4:48
using the HTML and CSS I provided.
4:51
We'll focus our work here on the Java
code necessary to store the GIF data and
4:54
supply it properly to
the Thymeleaf templates.
4:58
I'll be careful to minimize the HTML and
CSS pieces you'll need to write yourself
5:02
to incorporate our Java
objects into this design.
5:07
In order to develop effective web
apps that are well received and
5:11
used by many, it's critical that they
have a clean professional design.
5:14
That said,
learning to come up with that design, and
5:19
even incorporating somebody else's
beautiful design takes practice.
5:22
In the next stage,
5:27
we'll start adding the Java code to store
our animated GIF details into objects.
5:28
Which we can then hand off to our
timely templates for display.
5:33
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