In this post, I’ll show you how to make a webpage project with your students using Adobe Spark Post. Adobe Spark Post is one of my favorite creativity platforms because it’s really easy to use and the end products that students create with Adobe end up looking incredibly clean and professional.
How Would You Use a Webpage Project?
I always like to cap off the year with a final showcase where students show off all the different cool projects that they did throughout the year. An Adobe Spark webpage is a perfect platform for students to do that because it allows them to present a consolidated summary of what they’ve learned in a creative way.
You might also use webpage projects to have students:
- Make an argument
- Present research
- Present a collection of their work
- Create a newsletter/blog
In the example webpage projects below, I had students choose what they believe were the top three achievements in human history up to this point.
On their webpages, students included an image to represent the achievement, as well as some text to explain why they chose that achievement. Then beneath the final argument that they made, they included some of their best projects from the year that showed the different achievements of all the civilizations we studied. You’ll notice that students included images of their projects, links to their projects on other websites, as well as embedded video projects.
Preparing Students to Make Webpage Projects
Before we look at how to make a webpage in Adobe Spark, let’s look at how I prepared them to make their pages.
First I pushed out a Google Slide to them that had a list of all the different projects that we had created throughout the school year. If you’re doing a research project, this might look more like directions about what students need to go learn.
I had students go to different websites where they had already created projects and either screenshot images of those projects or download copies of them, so that they could put them up on their website.
Then, students created a folder on their desktop where they could put all the different images and screenshots of their final projects in order to upload them into Adobe.
The only new piece of this showcase project was for students to make an argument about what they believe the top three achievements of the ancient civilizations were. So here I gave them a graphic organizer, where they could look over all the projects that they had already created and come up with their top three arguments.
Lastly, I made my own demo webpage, just to give my students an idea of what their final projects could look like.
How to Create Webpages in Adobe Spark Post
In order to create a webpage, you’ll first need to log in to Adobe Spark Post, and then go up to the blue ‘Create a Project’ button.
From the drop down menu, select ‘Web page.’
There you’ll see a very basic template and the first thing that students can do is enter a title for their project.
Below the title you’ll see an ‘Add’ button where students can add an image that will become the header background of their website.
Next, on the top right under ‘Themes,’ you’ll see that there are some different options for the website theme that will change the overall appearance of your site.
When you scroll underneath the title, you’ll see that there are a bunch of different options for the type of content you can upload.
I’ll start by creating a Glideshow, which allows you to upload multiple images at the same time.
Here, you can select images that you want to appear as full page backgrounds on your page.
After adding images to the Glideshow, you can back up to the top of those images and select ‘Add Text’ in order to make sure that this section of the webpage is labeled.
Next, if you scroll down to the first image in the Glideshow, you can add text to indicate what the background image shows.
Here you might want to provide students with some sentence starters to support students with their explanations.
After including images and text to argue what they believed were the three most important achievements, I had students start adding different projects that they created throughout the year.
Here, you could start with a text header for the section again, and then rather than the Glideshow, choose another format like ‘Split Layout’ to mix up the way it looks.
You’ll see when you get to Split Layout that students are able to add an image on one side, as well as text on the other. So here students can add a screenshot of one of the projects that they chose and then on the other side, write the title, as well as a short description of that project.
In addition to images and text, students can also directly embed media like video on their webpages.
Earlier in the year students made a video in Adobe Spark Post about the most important achievements of ancient India. Since it was already made in Adobe, students just needed to get the published link for their video and paste it in. You can also embed video links from YouTube or Vimeo, and once you’ve done so, the video will show up directly on the webpage.
When creating a webpage, students can also create hyperlinks that take viewers out to another app or web page. Rather than embed images of projects, an option would be to first copy the direct link to a project, like a digital book in Book Creator.
To create the hyperlink, students will need to choose ‘Add a Button’ and then paste the direct link. They can customize the button text, as well as how they want the button to be oriented on the webpage.
Lastly, you can also teach students different ways of bringing in images, such as creating an image that Fits to Screen.
With the ‘Fit to Screen’ option, you’ll see that the image glides in and that there’s also a caption on the side where students can include text to explain what the image is about.
When ready, students can click the ‘Preview’ button at the top of the page to see what their final webpage will look like before publishing it.
In order to share their webpage with others, they’ll need to get the published link. You can get that by clicking on the ‘Share’ button. Once they have the published site link, they can share it with you (and the rest of the class) in whatever way makes the most sense.
One idea would be to have all your students post their different websites onto a Padlet board so that everybody in the class is able to see each other’s pages in one place.
Conclusion & Resources
Adobe Spark Post is a user-friendly student creativity tool that you can use for free. In addition to webpages, you can also have students create graphic designs, and even videos, which you can learn more about by clicking here.
To apply for a free Adobe Spark Post education account, click here.
For additional time-saving tips using technology, check out this other post about Reducing Time Grading by Giving Real-Time Feedback.
And if you’re interested in learning more Gmail Tips for Teachers, be sure to check out this other video!
For additional strategies for how to use technology to personalize learning, increase engagement, foster creativity, and more, click here:
How to Use Education Technology: The Ultimate Guide
And to read more about why I believe technology must be a central part of public education today, click here:
Why Education Technology?: The Ultimate Guide
Interested in the software I use to create my videos? Check out the links below! Many of these products offer a free trial to start and just clicking on the link helps to support The New EdTech Classroom!
Screenflow is a dynamic, intuitive video editing software that I use to create all of my YouTube videos. They’re currently offering a free trial! Get more details here.
I use Adobe Spark Post to design all of my YouTube thumbnails, as well as all my social media graphics. More information here.
If you’re interested in creating a website, these are a couple of programs I personally use and highly recommend: Bluehost is a web host that offers a professional platform for your website. You can check them out here.
Elementor is a powerful tool that helps with clean visual design for your website as well as marketing to further your website’s influence. More details here.
