Open edX Studio: How to edit the Course Details Page in HTML
Note: In order to complete this tutorial you need to know how to use the Files&Uploads page in Studio. We suggest you first read this short tutorial on How to Use the Files&Uploads Database before continuing with this tutorial below.
When you have created a new course in Studio, one of the first things you want to do is to edit the course schedule and Course Details page otherwise known as the “course marketing page” or “course About page” of the course that is publicly visible to prospective learners browsing your Open edX site. Editing this public page is also done on the Schedule & Details page of the course in Studio.
Why is the Course Details page in HTML and not plain text?
The course marketing page is edited in HTML because people tend to want to have as much freedom as possible to customise the course marketing page. That’s why HTML is chosen because you can add all sorts of content via HTML. If you don’t know HTML, then this Open edX tutorial is the perfect place to start! Don’t worry HTML is very easy and it’s written in English so if you can read this tutorial, you can definitely learn to read HTML by the end of this tutorial.
What is the Course Details page?
The Course Details page is the publicly visible page you use to share information about your course. Learners can view this course in your Open edX site and read all about the course before deciding to enrol in the course or not. There is a button on the marketing page that allows learners to enrol into the course. For this reason it’s important to have a good-looking and well-written marketing page in order to convince the learner to take that final step to enrol into your course.
Where do the learners find this publicly visible Course Details page?
By default, Open edX platforms show all the courses on the home page in rows of four (4). Here is an example of what courses look like on UENSCO’s Open edX platform named UNESCO Open Learning:
When a learner clicks on any course, they will be redirected to the Course Details page of that course. The Course Details pages always looks similar to the following screenshot (note that the Course Teams of this UNESCO Open Learning course have already edited it with their own custom paragraphs and images):
To edit the Course Details page, you need to learn some basic HTML. Let’s go ahead and learn some basic HMTL very quickly in a couple of minutes!
HTML is the main language of the world wide web, it is used to create the structure of every single web page on the Internet. It is the first thing to learn if you want to become a web developer and if you are an online course developer or educator you will benefit greatly from learning HTML. In fact, learning HTML will greatly improve your job prospects too.
As mentioned before, HTML forms the structure of your web page. You create one or more sections, then you add content inside those sections.
Note: HTML is written inside an opening and closing chevron tags which look like this: < > </ >
You create a section like this (note the forward slash indicating the end of the section: <section> </section>
Now that you have a Section, you can add a Heading like this (note the ‘h’ that stands for heading): <h1> </h1>.
Now that you have a Heading, let’s add a Paragraph like this (note the ‘p’ that stands for paragraph): <p> </p>
You can add any text you like inside the Heading and Paragraph HTML tags. Your HTML code might look like this:
<section>
<h1>About This Course</h1>
<p>This course is a basic introduction to mathematics!</p>
</section>
Let’s add an image above our paragraph in the above code. Can you guess how we do that?
Adding an Image in HTML is easy, you use the following chevron tags to represent the image tags and also the source of the image which is the URL of any image on the Internet (note there is no closing tag for images: <img src=” “>
So, your HTML code would now look like this:
<section>
<h1>About This Course<h1>
<img src=”https://abconlinecourses.com/wp-content/uploads/2021/02/ned-bachelder-fans.jpg“>
<p>This course is a basic introduction to mathematics!</p>
</section>
In a live website the above code will display like the following image (note how none of the HTML tags get displayed by the web browser):
Now that you understand HTML, let’s go ahead and navigate to the course Schedule & Details page.
Note: If you already know how to navigate to the Schedule & Details page of the course, you can go directly to Step 4 below.
Step 1: Navigate to the course Outline from inside Studio.
In order to access the Schedule & Details page, you first need to sign into Studio. From the Studio Home where all your courses are listed, click the course name of the course you want to enter. In the below image the course name is indicated as “Demonstration Course”, just click that to go inside the course to the course Outline.
Image: A screenshot of the Open edX Studio Home page.
When you click the course name, you will immediately be taken to the course Outline, as shown in the below image.
Image: A screenshot of the course Outline in Studio.
Step 2: From the course Outline, open the Settings dropdown menu.
In order to access the Schedule & Details page from the course Outline, first click Settings to display the settings menu, as shown in the below image.
Image: A screenshot of the Settings menu in Studio, with the Schedule & Details page link highlighted in blue.
Step 3: Navigate to the Schedule & Details page from the Settings menu.
Click the first menu option under Settings as per the above image. You will be taken to the Schedule & Details page as depicted in the below image.
Step 4: Scroll down to the section named Introducing Your Course
On the Schedule & Details page, scroll down the page about halfway until you reach the area named Introducing Your Course, as shown in the below image, where you can see the template HTML that the Open edX system provides for you to edit. They also colour code it all so it’s easy to read. It really is so convenient and easy to customise this marketing page, just give it a try!
Image: A screenshot of the Introducing Your Course area on the Schedule & Details page in Studio.
Step 5: Using your knowledge of HTML, go ahead and change the black colour text to anything you like.
Open edX provides the HTML template for your course marketing page (as shown in the above image). All you have to do is to replace the black colour text with any text you like. For example, the first HTML section is as follows:
<section class=“about“>
<h2>About This Course</h2>
<p>Include your long course description here. The long course description should contain 150-400 words.</p><p>This is paragraph 2 of the long course description. Add more paragraphs as needed. Make sure to enclose them in paragraph tags.</p>
</section>
So, you could change the text to anything you like and the result could look like this for example:
<section class=“about“>
<h2>Course Introduction</h2>
<p>This course is about the history edX!</p><p>In this course you will learn the history of edX since its founding in 2012. You will learn how to register for a course on edX and successfully complete the problem sets (tests) that are made available in edX courses!</p>
</section>
Step 6: Now go ahead and add photos of the instructors.
When you are done editing the black coloured text, you can add also add photos of your instructors. The Section of the HTML code that relates to the instructors looks like this:
<section class=“course-staff”>
<h2>Course Staff</h2>
<article class=“teacher”>
<div class=“teacher-image”>
<img src=“/static/images/pl-faculty.png” align=“left” style=“margin:0 20 px 0”>
</div><h3>Staff Member #1</h3>
<p>Biography of instructor/staff member #1</p>
</article>
</section>
Remember, at the start of this tutorial you learned about the HTML image tag which looks like this:
<img src=” “>
All you need to do is to get copy/paste the URL of the image you want to use. You can grab any URL that is already available on the Internet, or you can use the handy Files&Uploads database that is included inside each Open edX course in Studio.
Note: This tutorial does not cover how to use the Files&Uploads database, but you can view our tutorial How to Use the Files&Uploads Database.
When you have your image URL copied, just paste the image URL between the double quotation marks:
<img src=”paste-the-image-url-here“>
Step 7: Now go ahead and save your changes.
Click anywhere on the screen and an orange coloured Save Changes button will pop up on the screen asking you if you would like to save the progress, as shown in the below image. Don’t forget to click the Save Changes button to save the changes.
Image: A screenshot of the Save Changes button in Open edX Studio.
When you click Save Changes, the page will automatically scroll up to the top of the page and displays a green check mark next to the message Your Changes Have Been Saved, as per the below image.
Image: A screenshot of the green tick and the message Your Changes Have Been Saved.
If you see the message Your Changes Have Been Saved, you are done editing the Course Details page HTML.