Code.org is a block based programming tool. We will use something similar to build our course project. Go to the Code.org website and work through the first two exercises

Now we have started to think about the idea of MVP, how can we use this to help us build working software?

In software development, we start with the smallest, simplest thing we can build that works. Then we incrementally improve it. This is iteration.

You all built a personal home page in Intro to Digital, and last week you shipped it. Now let’s iterate on your websites.

For the majority of this course, we will use a custom application called CYF Blocks. It uses the same visual programming editor, Block.ly, as Code.org, but you will use it to create JavaScript for real websites you can show others.

Recap - user stories

Can you remember the structure of a typical user story?

As a [who], I can [what] so that [why]

Defining the Minimum Viable Product

Come back into the main room, now we have a long list of user stories, how do we decide what to do first? Where do we start? As always with software development, we start with the simplest thing possible. Let’s define the MVP.

What’s the minimum set of user stories we could implement for this product to be useful? Another way to say this is: “What is the minimum viable product?

Now come back into one group.

For trainees

In this section, you have a set of questions/tasks to orient you towards what is coming next in the course.

Pair up with a new person. In pairs, complete the following tasks:

1. Using the curriculum website, locate the setup page and the prep page for sprint 1 of the upcoming Induction module.
2. List the things you need to install ( if anything ) for the upcoming module.
3. Check you can find the backlog page for the Induction sprint. Double check you’ve copied all the issues from the backlog over to your Course Planner.
4. Double check you’ve copied all the issues from the backlog over to your Course Planner.
5. Identify all the issues with 🔑 icon that are marked as Priority. What does the Priority icon 🔑 mean?
6. When ⏰ should you start the prep work for the upcoming Induction module?
7. Experiment with your project planner: can you filter by Size, Week 1, Tech ed, PD etc.?

For volunteers

1. Locate the classroom planning board for your region ( if one exists )
2. Locate the day-plan for the next module
3. Check the instructions and links on the Priority 🔑 issues for the upcoming week ( both Tech Ed and PD )
4. In the day-plan for the upcoming week identify the instructions for any workshops and visit the repository containing that readme. Check the instructions make sense.

Why are we doing this?

In class we will talk about Iteration and Blockers. Read over the day plan. What does iteration mean? What are Blockers? Write down your answers.

It’s good to code with a friend. You learn SO much. Programmers call this pair programming and many professional teams program in pairs for a part of each day. Mentors will demonstrate pairing now.

We call problems that stop our progress “blockers”. We talk through our blockers regularly and help each other get “unblocked” or “unstuck”.

Next, we will discuss the blockers and help each other get “unblocked”.

Today we will spend most of our time working together on our projects in timed bursts of 25 minutes. This is called the Pomodoro Technique, and it will help you manage your self study. On the 5 minute break, get up from your computer and move your body: stretch! This is hard work. We will develop and then ship our code repeatedly throughout the day. Each time we ship, we will ship something that works.

• Pick one of the CYF Blocks projects and ship it to your website
• Choose a way to improve upon the project to make it better suited to your website. Modify your CYF Blocks implementation then ship it!
• Get feedback from one of your peers: what new requirement would they like to add? Can you implement this in CYF Blocks? Ship it again!

How will you work together? Using the collaborative tools you have learned during this course:

You are part of a cohort

• together: identify your blockers
• in small groups: define your goals as user stories
• in pairs: iteratively improve your products

Websites don’t just stay the same forever - we make changes to them, and we want our users to be able to see and use our changes.

You just built some new feature for the website you shipped last week - let’s integrate those changes into your website, and push them to GitHub. Last week, we configured Netlify to automatically deploy a new version any time you push changes to GitHub. This means that when you push your changes to GitHub, your website should automatically update, and people can use your changes.

You will need:

• The folder with your website from last week (you can re-export it from CodePen if you’ve lost it)
• An account with GitHub and to be logged in
• The generated code from your CYF Blocks work - click the “Generated Code” tab to see it

Step by step

Step One : Integrate the code locally

1. Open up VSCode (which you should already have installed).
2. In VSCode, open up the folder where your website is saved (File > Open Folder and choose the unzipped folder).
3. Now your IDE shows your code just like Codepen did. Take a look.
4. By default, VSCode doesn’t show you how the code renders (i.e. what the page looks like), only the HTML iteslf. But VSCode has extensions which can help with this! Install the Live Preview extension. After it’s installed, right-click on your code and click the “Show Preview” menu item. Now you can also view the rendered view right in your browser. Take a look! In the future you will find more VSCode extensions which are useful too - feel free to experiment with them!
5. Try changing your HTML in some way. Make sure you see the change reflected in the preview.
6. If one doesn’t already exist, create a new file called script.js (File > New File) in the same directory as your index.html.
7. From CYF Blocks, click the “Generated Code” tab to see the JavaScript you created by putting together your blocks. Copy it all, and paste in in your new script.js file, and save the file.
8. In your index.html page, add the following HTML, just before your the end of your body tag (before the </body>):

   <script src="script.js" type="text/javascript"></script>
   

9. If the code you wrote needs elements from your CYF Blocks page, in CYF Blocks switch back to the “Static HTML” tab and copy that into your index.html wherever it makes sense. (You may not need to do this if you were already using elements and IDs that were already in your page).
10. Test it out! Use your website locally and make sure it works as you expect. Fix anything that doesn’t work.

Step Two : GitHub

1. Go to the same page as you used last week to upload your website (https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME/upload).
2. Find the directory your website is in locally on your computer, and drag any new or changed files (probably index.html and script.js) into the page.
3. Press “Commit changes”.
4. Netlify should automatically deploy a new version with your changes - wait a minute then open up the netlify website you set up last week.
5. 🎉 Congratulations! You shipped it! Your website has new features!

Now we will ship some code, because we expect you to ship very often at The Docs

You’re going to be working on and developing your own projects over the Fundamentals course, so let’s begin with your Personal Home Page. In Intro to Digital (ITD) you built a Personal Home Page to complete the course. Now we’ll ship it to become a “real” website. When developers talk about shipping or deployment they mean turning the version that they’re developing into something that users can access.

You will need:

• Your personal home page on Codepen
• An account with GitHub and to be logged in
• An account with Netlify, so sign up now using the “Sign up with GitHub” option if you have not done so already

Step by step

Step One : Codepen

Find your landing page on Codepen and click Export > Export as zip

Step Two : GitHub

1. Create a new repo by going to repo.new or by clicking the + icon in the top navigation
2. Leave the Repository Template as “No template”
3. Type in a name for your project. It can be anything, but ‘personal-home-page’ is probably a good choice
4. Leave the rest of the options as the defaults
5. Click “Create repository”. Once it’s created it will take you to your new repo
6. Now click the link to upload an existing file, which takes you to https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME/upload
7. Find your downloaded zip file on your computer, unzip it and drag the folder on to your GitHub web interface.

Step Three: Netlify

1. Log in to Netlify and follow this workshop to deploy your site.

2. 🎉 Congratulations! You shipped it!

To understand this course, we must understand these goals:

• I am part of a cohort :man_and_woman_holding_hands::skin-tone-4:
• Start as we mean to go on 🧰
• Break down problems 🧩
• Ship it! :boat:

Goals

I am part of a cohort :man_and_woman_holding_hands::skin-tone-4:

The key outcome of Fundamentals is that trainees and mentors start getting to know each other and build the sense of togetherness and mutual support that will carry us through the programme.

Start as we mean to go on 🧰

Fundamentals sets the tone for the rest of The Docs. That means we set our expectations of The Docs sessions clearly: no missing coursework, 100% attendance, no slides, no lectures. This applies to everybody and we should all hold each other to these standards.

This is our opportunity to coach ourselves into the “right” behaviours from the start.

“Practice doesn’t make perfect, practice makes permanent”

Break down problems 🧩

“Prolific programmers do not write a lot of code, instead they solve a lot of problems”

We frame the fundamental skill and day-to-day activity of software developers, which is problem solving. It is not following step by step instructions, but creating those instructions.

Fundamentals is the right place to begin (start as we mean to go on).

Ship it! :boat:

The major satisfaction of software development is to bring an idea to reality. We should experience that satisfaction and develop that habit. By shipping early, we can share with our peers and can iterate and improve.

The Docs is not a great fit for everyone, and not everyone who graduates Fundamentals will join our Software Development Course. But everyone who participates in Fundamentals should come out with a tangible product: a real website deployed online.

How Goals Help

Each week has suggested schedules, team exercises, and challenges, but understanding these goals liberates mentors and trainees to experiment and innovate with their cohort.

:man_and_woman_holding_hands::skin-tone-4: 🧰: 🧩 :boat: talk to each other and have proven to be useful mantras for understanding what this course should be:

• Should we upload the result of our week 1 work to Netlify?
  • Yes, we should ship it.
  • Yes, we should start as we mean to go on
• Should we ask trainees to figure out how to improve on each other’s week 1 work as part of a three week project?
  • Yes, because I am part of a cohort.
  • Yes because we should practice breaking down problems.
  • Yes because we should start as we mean to go on.

Structure

3 week repetition of a common pattern, each week with its special focus:

• Week 1: Requirements, Iteration, Delivery
• Week 2: Requirements, Iteration, Delivery
• Week 3: Requirements, Iteration, Delivery

Requirements

Requirements covers requirements gathering, discussing assumptions, breaking down problems into solvable pieces. In practice, we will play some games involving communication and problem solving, discuss how software teams gather requirements, identify and resolve conflicting requirements, write user stories, etc. and come up with some first requirements for our first project (that will span the three weeks).

Iteration

Iteration covers coming up with solutions, and then iterating on those solutions (as opposed to solving everything in a single step), along with some introduction into computational thinking - what a software solution looks like. In practice, we will play some more games, provide feedback and iterate on the state of our project so far in order to come up with new requirements, prioritising so as to pick the most important new features first. We will also do some CSS and block-based programming to allow us to provide software solutions to some of the feedback we have received.

Delivery

Delivery covers implementing a concrete solution and putting it somewhere visible where it can be examined and iterated upon. In practice we will deliver multiple iterations to Netlify and will finish week 3 having coded some DOM modifying code using a block-based editor (e.g. displaying a list of products with an “add to cart” button and display the resulting shopping cart), and copy-paste the resulting code into our project.

GitHub is for developers. It’s how you will work on code with other developers and where you will build a portfolio of work to show employers. You should already have a GitHub account from the application process. If you don’t, make one now.

• I have made a GitHub account.
• I have used my real name.
• I have not put my birth year in my user name.

When prospective employers are looking at your GitHub portfolio, you need them to know who you are: not your online identity, but the name you put on your job application. Don’t use cute handles on your GitHub, even though some mentors do. They are not applying for entry level developer roles.

Reflection on Fundamentals

We have worked together over these weeks exploring some of what it means to be a software developer. If you have met the criteria you will now be invited to join the Software Development Course. Let’s think together about what software developers really do.

Mentors will now lead a reflection and then we will do our last retro!

At The Docs, the curriculum maps out what you will learn together over the course. It defines your weekly work, the preparation you must do before class and what you will do together on class days. Use this time to go through the activities and learn how to navigate the curriculum interface.

Resources

Preparation

• Facilitator: Review the How to use the curriculum presentation before class.
• Facilitator: Ensure everyone can access the Miro board presentation.
• Facilitator: Split the class into groups of no more than 4.
• Facilitator: Make sure every group has access to a laptop.
• Facilitator: Make sure every group has access to a piece of paper and pen

Introduction

The facilitator will use the Miro board presentation to guide trainees and volunteers through a discussion about how we use the curriculum.