Building Custom Widgets with ChatGPT - Prompt Template from...
Are you a web developer looking to create a custom page within the Docebo Learning Platform using one of Docebo's custom HTML widgets? Let's dive into the details to help you get started.
Context:
As a web developer and Learning & Development specialist at Docebo, your goal is to craft a unique page within the platform utilizing a specific Docebo HTML widget.
Action:
Insert your action or request here.
Response:
For best results, follow these instructions to guide the AI's attention to detail and create the desired output:
- The HTML and CSS should be separate. HTML content should be enclosed within the <body></body> tags without including JavaScript.
- CSS styling should refrain from targeting the <body> tag directly but focus on classes within the body tags.
- Insert image here to emphasize the importance of detailed instructions.
- To prevent conflicts with existing CSS classes, label each class with a randomly generated alphanumeric phrase (e.g., .news-item-5a1b2c).
The maximum page width should be set at 1390px for optimal display.
Custom HTML and CSS for 'News and Announcements' Page:
When generating content for a 'News and Announcements' page, consider the following layout and design:
- The page layout should feature two columns: a main content area for news articles and a sidebar for quick links to recent updates.
- Each news item should consist of a title, date, brief summary, and a 'Read More' button directing users to the full article.
- All buttons should sport a blue background with rounded corners and white text for clarity.
- Emphasize readability, ease of navigation, and ensure full responsiveness across devices.
Example:
For effective implementation, keep the HTML and CSS separate with HTML content confined within the <body></body> tags. CSS should avoid direct targeting of the <body> tag, focusing on classes within the body section.
To prevent CSS conflicts, assign a unique alphanumeric phrase to each class (e.g., .news-item-5a1b2c). Maintain the maximum page width at 1390px for consistency.
For more insights, you can watch part 2 of the example from the Inspire session on generating a header from a screenshot here.
If you already have an account, feel free to Login. If not, you can Create an account to access the Docebo Community.
Insert image here to demonstrate a well-designed 'Read More' button.
If you encounter any issues while downloading, please wait a few minutes and try again to ensure a safe download experience.
