Exercise 1 - Basic HTML
Exercise 2 - Inline CSS
Exercise 3 - CSS classes
Exercise 4 - Create a new basic page in NationBuilder
- Log into your nation and click the "Website" link in the top navigation menu.
- Select the "+ New page" link in the top-left
- 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
- Navigate to the "Content" tab (you might be redirected there by default) and click the code button "<>"
- Copy the code from Exercise 2 and paste it into the editor.
- Click "Save". You just coded your first webpage! You can review it by following the URL towards the top of the page.
- 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
- On your new basic page, navigate to the "Template" tab
- Click the "Create a custom template" button
- Choose one of the code snippets from the list on this page: www.codenation.com/snippets
- Copy the code for your chosen snippet and paste it at the very bottom of the custom page template you created in step 2
- 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!
- 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
- Open the NationBuilder control panel and click the "website" link in the sidebar
- Navigate to the "Theme" section of your website and click the "New custom theme" button on the right-hand side
- 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
- Once your new theme has been created, navigate to "Theme" > "Current custom theme" > "Templates"
- Click the "theme.scss" link to open that file, which is where the base styles are configured
- At the top of this code you will see hex-color values assigned to the following variables:
- 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!
- 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!
- Challenge 2: Customise your site using the Candidate theme docs. See what is possible with the full theme here