Exercises

Exercise 1 - Basic HTML
Exercise 2 - Inline CSS
Exercise 3 - CSS classes
Exercise 4 - Create a new basic page in NationBuilder
  1. Log into your nation and click the "Website" link in the top navigation menu.
  2. Select the "+ New page" link in the top-left
  3. Give your new page a name and a slug, then choose "Basic" as the "Type of page" and click the "Create page" button at the bottom
  4. Navigate to the "Content" tab (you might be redirected there by default) and click the code button "<>"
  5. Copy the code from Exercise 2 and paste it into the editor.
  6. Click "Save". You just coded your first webpage! You can review it by following the URL towards the top of the page.
  7. Challenge: Add new HTML tags and CSS styles in the editor then open the live link in a new tab to review the final product.
Exercise 5 - Create a custom page template and add an extra snippet
  1. On your new basic page, navigate to the "Template" tab
  2. Click the "Create a custom template" button
  3. Choose one of the code snippets from the list on this page: www.codenation.com/snippets
  4. Copy the code for your chosen snippet and paste it at the very bottom of the custom page template you created in step 2
  5. Click the "Save and publish changes" button at the bottom of the page. You can now review the live page to see the extra section you added at the bottom!
  6. Challenge: Add some custom styles to the code using your new knowledge of CSS.
Exercise 6 - Create a custom theme and edit the primary colours
  1. Open the NationBuilder control panel and click the "website" link in the sidebar
  2. Navigate to the "Theme" section of your website and click the "New custom theme" button on the right-hand side
  3. Complete the form
    • Type a name for your theme
    • Enter your own name as the creator
    • Choose the "Clone your current theme" option
    • Select the checkbox labelled "Switch site to your new site theme immediately"
    • Click the "Create theme" button
  4. Once your new theme has been created, navigate to "Theme" > "Current custom theme" > "Templates"
  5. Click the "theme.scss" link to open that file, which is where the base styles are configured
  6. At the top of this code you will see hex-color values assigned to the following variables:
    • $primary
    • $secondary
    • $tertiary
  7. Your task is to customise those hex-colour values as you please
    • Use your team's new brand colours if they have been selected, otherwise test a few options
    • Make sure to main the same format (i.e. the variable name and hex-colour separated by a colon, with a semi-colon at the end of each line)
    • Click the "Save and publish changes" button at the bottom of the page. You can now review the live site and enjoy your handiwork!
  8. Challenge 1: Return to "Theme" > "Current custom theme" > "Templates", open one of the HTML files (e.g. layout.html or _footer.html) and use your new HTML knowledge to experiment with some changes to those files!
  9. Challenge 2: Customise your site using the Candidate theme docs. See what is possible with the full theme here