Test Yourself

Test yourself in the Front-End Developer track

By doing the assignment below, you can test your knowledge of the Front-End Developer track. Make sure you have studied all the materials suggested in this track.

The assignment consists of 10 tasks. Some of the tasks refer to the data you have to create in some of the previous tasks. So we recommend that you do the tasks in the suggested order.

The actual assignment may include one or more tasks similar to those below. However, you should bear in mind that the actual tasks may be different from the topics covered here and be a bit more complex.

Task 1

  1. Install a starter site of your choice.
  2. Change the appearance of the website:
    • Either by generating a new Bootstrap-based theme.
    • Or manually changing some significant visual elements (for example, fonts, colors, backgrounds, links)
  3. Apply the changes to the site.

Task 2

  1. Create a Razor function called “Test.Template.Footer”.
  2. Have the function output “<div> This website is powered by C1 CMS</div>
  3. Insert the function on a page.
  4. Save and preview the page

Task 3

  1. Create a Razor function called “Test.ShowImageAndLink”.
  2. Add two parameters to the function: one of which accepts CMS Pages and the other one - CMS Images as values.
  3. Have the function show the image from the first parameter.
  4. Have the function link the image to the page from the second parameter.

Task 4

  1. Install the Composite.News add-on.
  2. Add two or more news items with arbitrary data. (You will need to add the "News" page data type to a page.)
  3. Create a Razor function and get data from the "Composite.News.NewsItem" data type.
  4. Have the “Test.ShowNews” function output the news items as rows in a table (<table/>) using the values from the fields “Title”, “Date”, "Teaser".
  5. Insert the function on a page.
  6. Save and preview the page.

Task 5

  1. Create a Razor Page template called “Three Columns”.
  2. Add two more content placeholders called "Navigation" and “Aside” respectively.
  3. Create a page called “My Razor Page” based on the “Three Columns” template.

Task 6

  1. Add another language of your choice to the website.
  2. Translate and publish two or more pages into this language.
  3. Translate and publish a few items from the data type of your choice into this language.

Task 7

  1. For Visual Editor, create a style class named “strikethrough” for <span>.
  2. Have it put a line through selected text (strike the text through).
  3. Create a format based on this style class for an inline text.
  4. Add a button to the toolbar of Visual Editor.
  5. Apply the format to the inline text on the Home page.
  6. Make sure that it is visible in both Visual Editor and Preview.

Task 8

  1. For Visual Editor, create a format to wrap a block of text with <div>.
  2. Add a button to the toolbar and an item in the style selector of Visual Editor for it.
  3. Apply the format to a block of text on the home page.
  4. Make sure that <div> visible in Code View in Visual Editor and in the source view of a page opened in a browser.

Task 9

  1. For Visual Editor, create style a class named “hilite-yellow” for <div>.
  2. Have it change the background color of the block element (text) to yellow.
  3. Create a format ("Hilite-Yellow") to be used in the Block Selector.
  4. Create a page called "Highlights" and add a few paragraphs of text to it.
  5. Apply the "Hilite-Yellow" from the Block Selector to two or more paragraphs on the page.

Task 10

  1. Install the Composite.Community.Blog add-on (if not installed).
  2. Add a page called “My Blog” under the root page and based on the “Blog” page type.
  3. Clear the Menu Title in the Settings of the “My Blog” page (so that it would not appear in the top menu.)
  4. Add the “My Blog” page to the Top Links menu (it it is available on the website).
"Hilite-Yellow"