RVU

The Cooperage
5 Copper Row
London
SE1 2LH

👋 Welcome to your coding journey!

Wrapping up Day 1

Complete the Day 1 Workshop sheet

Complete the Day 1 Workshop sheet

This concise worksheet provides a systematic approach to website development. It starts by identifying the project's purpose and setting precise goals. Next, it helps outline your target audience, defining who would benefit from your website. The focus then shifts to the website's design, integrating wireframes and your unique branding elements. Finally, it offers a practical guide for managing weekly tasks, ensuring efficient progress towards your website development goals.

  1. Grab the printout worksheet and begin filling in the right-hand side with all your creative ideas.
  2. Once you're finished, make sure to keep the worksheet in a safe place.
  3. Remember, you'll need to refer back to these ideas tomorrow, so ensure it's easily accessible!
Use Excalidraw below when prompted by the lecturer.

Starting day 2

First up, Github

First up, Github

You're making a great decision by choosing to learn how to code. As part of your course, you'll need to set up a GitHub account. Why, you ask? Well, GitHub is an essential tool used by millions of developers around the globe. It's where you'll store your code projects, collaborate with other learners, and even contribute to open-source projects later on.

Here's a simple, step-by-step guide to help you sign up for GitHub:

  1. Start the sign-up process: Click on the green 'Sign up' button located at the top-right corner of the page.
  2. Enter your details: You'll be directed to a new page. Here, you need to fill in your preferred username, email address, and a secure password.
  3. Enter your details: You'll be directed to a new page. Here, you need to fill in your preferred username, email address, and a secure password. 'Complete the security check: To confirm that you're not a robot, you'll be asked to complete a short task.
  4. Click that you have understood and are ready to go to github!

Here's a YouTube video to help you if you are a visual learner!

Secondly, signing up for CodeSandbox with your GitHub Account

Secondly, signing up for CodeSandbox with your GitHub Account

CodeSandbox is an online code editor where you can create and share projects directly from your browser. It's especially great for web development, and supports a variety of different languages and frameworks. Here's a step-by-step guide on how to sign up for CodeSandbox using your new GitHub account:

  1. Visit the CodeSandbox website: Open your browser and start the sign-up process.
  2. Click on the 'Sign In' button located at the top-right corner of the page.
  3. Choose GitHub as your sign-in method: You'll see different options for signing in. Click on the 'Continue with GitHub' button.
  4. Authorize CodeSandbox: If you're already logged into GitHub, you'll be asked to authorize CodeSandbox to access your GitHub account. Click 'Authorize CodeSandbox' to proceed. If you're not logged in, you'll be prompted to log into GitHub first.
And lastly, cloning the CodeF starter template

And lastly, cloning the CodeF starter template

We're excited to introduce our development template that combines Astro and Tailwind CSS. Astro's innovative approach minimizes JavaScript, delivering swift, efficient websites. Tailwind CSS complements this by providing a utility-first framework for creating visually compelling, custom UIs with ease. This fusion simplifies your workflow, resulting in an enhanced performance and user experience. It's the perfect starting point for your web projects, let's push the boundaries of web development together!

  1. Navigate to the CodeSandbox window below these steps.
  2. Click the green expand button to enter the development area.
  3. Click on the 'Fork' button located in the upper right corner of the sandbox environment.
  4. CodeSandbox will then create a new copy (fork) of the sandbox in your account.
  5. Rename the new sandbox if you want, by clicking on the title.
  6. Start making your changes in the newly forked sandbox.

In this lesson, we'll be using CodeSandbox as our playground to explore HTML, CSS, and JavaScript, similar to how one experiments with Lego bricks. By mixing, matching, and reassembling these 'code bricks', we'll create interactive web projects. This playful approach allows us to understand the basics of web development while having fun, instilling a sense of creativity and exploration, just like building with Lego!

HTML

HTML

HTML (HyperText Markup Language): Imagine you're building a LEGO castle. The HTML is like the grey LEGO bricks that you use to construct the castle's walls, the towers, and the main gate. It gives the basic shape and structure to your castle.

CodeSandbox.io/elated-williamson-ynfx5k
CSS

CSS

CSS (Cascading Style Sheets): CSS is like the instructions that tell you to put the biggest tower in the middle, the walls on the sides, and how to build a bridge at the front. It might tell you to put some green bricks at the bottom to make it look like the castle is on a grassy hill. CSS is the part that makes your castle pretty and colorful. It decides where each part of your castle goes, what color the bricks are, and how big or small they should be.

CodeSandbox.io/day-1-css-forked-vh2hhs
JavaScript

JavaScript

Now, imagine you've got some magic LEGO bricks. These magic bricks can open the castle gate when you shout 'Open Sesame!', or make the castle guards march up and down the walls. JavaScript is like these magic bricks. It makes your castle do things. With JavaScript, you can make parts of your webpage move, respond to clicks or typing, or change in any way you can imagine.

CodeSandbox.io/day-1-javascript-forked-dnwn7r