Learn to structure web pages with HTML - the foundation of every website.

HTML (HyperText Markup Language) is the skeleton of every website. In this lesson, you'll learn how to structure content using HTML tags and build a recipe page that demonstrates key concepts.

Sample Project

What is HTML?

HTML uses "tags" to tell the browser how to display content. Tags are written inside angle brackets like <tag>. Most tags come in pairs - an opening tag and a closing tag.

For example: <h1>Hello World</h1> creates a large heading that says "Hello World".

Learn more: W3Schools HTML Tutorial | MDN HTML Documentation

Project: Build a Recipe Page

Let's create a complete recipe page that demonstrates all the key HTML elements. This project will include headings, paragraphs, lists, images, links, and different sections.

Start Your Project

Click to open Jippity's Home Page in a new tab.

In the big input box, type Create an HTML recipe page and press enter.

Add the Recipe Title and Description

Ask Jippity to create the basic structure with a title and description:

Create an HTML page with an h1 heading "My Favorite Recipe", an h2 subheading "Chocolate Chip Cookies", and a paragraph describing why you love this recipe

Click Insert This Code! and Run to see your page!

Add an Ingredients List (Unordered List)

Now let's add a list of ingredients using <ul> (unordered list) tags. This creates bulleted lists - perfect for ingredients!

Ask Jippity:

Add an h3 heading "Ingredients" and an unordered list with 5-7 cookie ingredients like flour, sugar, butter, eggs, chocolate chips

Learn more about lists: W3Schools Lists

Add Instructions (Ordered List)

Instructions should be in order, so we'll use <ol> (ordered list) tags. This creates numbered lists - perfect for step-by-step instructions!

Ask Jippity:

Add an h3 heading "Instructions" and an ordered list with 4-5 steps to make the cookies, like "Preheat oven to 375°F", "Mix dry ingredients", etc.

Add a Recipe Image

Let's add an image to make the page more appealing. You have two options:

Option 1: Use a free image from the web

Ask Jippity to add an image using this URL:

Add an image of chocolate chip cookies above the ingredients section using this URL: https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Chocolate_chip_cookies_stack.jpg/1920px-Chocolate_chip_cookies_stack.jpg

This image is from Wikimedia Commons and is free to use (CC0 license).

Option 2: Upload your own image

1. Find or take a photo of chocolate chip cookies (or any food you like!)
2. Click the purple Assets button on the top menu bar
3. Click Upload to upload your image from your computer
4. After uploading, click the image to add it to your project
5. Close the Asset Panel and ask Jippity: Add the image I just uploaded above the ingredients section

Learn more: W3Schools Images

Add Divs to Organize Content

<div> tags are containers that help organize your content into sections. They're essential for structuring and styling pages later.

Ask Jippity:

Wrap the ingredients section in a div with class "ingredients-section" and the instructions in a div with class "instructions-section"

Learn more: MDN div Element

Add Links to Related Recipes

Let's add some links using the <a> tag at the bottom of the page.

Ask Jippity:

Add an h3 heading "More Recipes" and add 3 links to other recipe websites or cooking resources

Add Extra Elements

Try adding these additional HTML elements to enhance your recipe page:

• <em> - Emphasize text (italics) for cooking tips
• <strong> - Bold text for important warnings like "Do not overbake!"
• <hr> - Horizontal line to separate sections
• <br> - Line break within paragraphs

Ask Jippity:

Add a horizontal line between the ingredients and instructions, and make the word "Preheat" bold in the first instruction

Understanding HTML Tags

Here's a reference of the HTML tags you've learned:

• <h1> to <h6> - Headings (h1 is largest, h6 is smallest)
• <p> - Paragraphs of text
• <ul> and <li> - Unordered (bulleted) lists
• <ol> and <li> - Ordered (numbered) lists
• <a href="url"> - Links to other pages
• <img src="url" alt="description"> - Images
• <div> - Container for grouping content
• <span> - Inline container for small bits of text
• <strong> - Bold/important text
• <em> - Emphasized/italic text
• <hr> - Horizontal divider line

Ideas for Further Exploration

• Add a table showing nutritional information using <table>, <tr>, and <td> tags
• Add multiple recipe images in a gallery
• Include cooking time and serving size using a description list (<dl>)
• Add a navigation menu with links to different recipe categories

Practice Challenge: Edit HTML Directly!

Now that you've built your recipe page with Jippity's help, it's time to practice editing HTML on your own! This will help you understand how HTML works and build your confidence as a web developer.

Step 1: Open your HTML file

Click on index.html in the file tree on the top menu of the editor. You'll see all the HTML code that makes your recipe page work!

Step 2: Try these challenges (without using the AI assistant):

1. Change the recipe name: Find the <h2> tag with "Chocolate Chip Cookies" and change it to a different cookie name like "Peanut Butter Cookies" or "Oatmeal Raisin Cookies"
2. Add a new ingredient: Look for the <ul> section with ingredients. Add a new <li> tag with an ingredient like "1 teaspoon vanilla extract"
3. Add a new step: Find the <ol> section with instructions. Add a new <li> with a step like "Let cookies cool on the baking sheet for 5 minutes"
4. Add a tip section: At the end of your page (before the closing </body> tag), add:
   <h3>Tips</h3>
<p>For chewier cookies, slightly underbake them!</p>
5. Add another link: In the "More Recipes" section, add a new link to your favorite cooking website using <a href="url">Website Name</a>
6. Make text bold: Find a word in your description and wrap it in <strong> tags to make it bold
7. Add a line break: Add <br> somewhere in a paragraph to create a line break

Step 3: Test your changes

After each change, click the Run button to see your updates! If something doesn't look right, check your HTML tags - did you remember to close them with </tag>?

Step 4: Advanced Challenge

Try adding a completely new section on your own:

• Add an <h3> heading called "Reviews"
• Add a <p> with a fake review like "These cookies are amazing! - Chef Bob"
• Wrap this section in a <div class="reviews-section"></div>

Remember: Making mistakes is part of learning! If something breaks, you can always ask Jippity for help, or use the undo button. The more you practice editing HTML directly, the more comfortable you'll become!

Reach out to us at [email protected] for feedback or questions.

Make your web pages beautiful with CSS - colors, fonts, layouts, and more!

CSS (Cascading Style Sheets) is what makes websites look good. While HTML provides structure, CSS adds color, spacing, fonts, and layout to create beautiful designs.

Sample Project

What is CSS?

CSS works by selecting HTML elements and applying styles to them. For example, you can make all headings blue, or give paragraphs a specific font size.

CSS is written in the format: selector { property: value; }

Learn more: W3Schools CSS Tutorial | MDN CSS Documentation

Project: Style a Profile Card

In this project, you'll style a profile card that demonstrates the CSS box model, borders, colors, and layout. You'll learn how padding, margins, and borders work together to create professional designs.

Start Your Project

Start with a basic HTML structure. Ask Jippity:

Create an HTML page with a div class "card" containing an h2 with a name, a paragraph with a job title, and another paragraph with a short bio

Add Basic Colors and Fonts

Let's start styling! We'll add colors and fonts to make it look better.

Ask Jippity:

Add CSS to give the body a light gray background. Make the card background white.

You can use color names (like "blue" or "red") or hex codes (like "#FF5733" for orange).

Learn more: W3Schools Colors

Add a Custom Font from the Asset Library

To use custom fonts in Jippity, you need to load them from the Asset Library and define them using @font-face.

First, open the Asset Library:

1. Click the purple Assets button on the top menu bar
2. Click Asset Library
3. Browse available fonts
4. Click the font to add it to your project
5. Close the Asset Panel

Now ask Jippity to load the font in your CSS (for example, if you chose Playwrite):

Add @font-face to load the Playwrite font using @asset("Playwrite"), then apply it to the body using font-family: 'Playwrite'

The CSS will look like this:

@font-face { font-family: 'Playwrite'; src: url(@asset("Playwrite")) format('truetype'); }

Learn more: W3Schools Custom Fonts | MDN @font-face

Understanding the Box Model

Every HTML element is a box! The CSS box model has four parts:

• Content - The text or image inside
• Padding - Space between content and border (inside)
• Border - A line around the padding
• Margin - Space outside the border

Learn more: W3Schools Box Model

Add Padding to Your Card

Padding adds space inside the card, making the content less cramped.

Ask Jippity:

Add 30 pixels of padding to the card class

See how the card looks better with breathing room inside?

Add a Border

Borders create visual boundaries around elements. Let's add a border to our card.

Ask Jippity:

Add a 2 pixel solid gray border to the card

Learn more: W3Schools Borders

Add Rounded Corners

The border-radius property creates rounded corners, making designs look modern and polished.

Ask Jippity:

Add a border radius of 10 pixels to the card to give it rounded corners

Add Margins to Center the Card

Margins add space outside elements. We'll use margins to center the card on the page.

Ask Jippity:

Give the card a width of 400 pixels, and use "margin: 50px auto" to center it horizontally and add space at the top

Add a Box Shadow

Shadows add depth and make elements appear to float above the page.

Ask Jippity:

Add a box shadow to the card: "0 4px 8px rgba(0,0,0,0.5)"

Learn more: W3Schools Box Shadow

Create Multiple Styled Sections

Now let's create different sections with different styling to see the box model in action.

Ask Jippity:

Add three div sections inside the card with classes "header", "content", and "footer". Give header a blue background with white text and 15px padding. Give footer a light gray background with 10px padding. Add 20px margin between sections.

Style Specific Elements with Classes

Classes let you style specific elements differently. The class selector uses a dot: .className

Ask Jippity:

Create a class called "highlight-box" with a yellow background, 2px solid orange border, 15px padding, and 10px margin. Apply it to one paragraph.

Learn more: W3Schools CSS Selectors

Add Hover Effects

Hover effects make your page interactive. Elements can change appearance when you mouse over them.

Ask Jippity:

Make the card grow slightly and increase the shadow when you hover over it. Use "transform: scale(1.02)" and a larger box shadow with a smooth transition.

Learn more: W3Schools Transitions

Advanced Layout with Flexbox

Flexbox is a powerful way to arrange elements in rows or columns.

Ask Jippity:

Create a div with class "skills-container" that uses flexbox to display 4 skill boxes in a row with spacing between them. Each skill box should have padding, borders, and background colors.

Learn more: W3Schools Flexbox

Common CSS Properties Reference

Here are essential CSS properties you've learned:

• color - Text color
• background-color - Background color
• font-size - Size of text (e.g., 16px, 1.2em)
• font-family - Font typeface (e.g., 'Playwrite', 'Arial', sans-serif)
• @font-face - Load custom fonts from Asset Library
• margin - Space outside an element
• padding - Space inside an element
• border - Border around an element
• border-radius - Rounded corners
• width and height - Size of an element
• box-shadow - Shadow effect
• display - How an element is displayed (block, inline, flex, grid)
• transform - Modify element appearance (scale, rotate, etc.)
• transition - Smooth animation between states

Ideas for Further Exploration

• Create a grid of multiple profile cards using CSS Grid
• Design a colorful button with hover and active states
• Build a navigation bar with styled links and hover effects
• Add a gradient background instead of solid colors
• Create an image gallery with different border styles and shadows
• Make your page responsive so it looks good on phones and tablets (media queries)
• Try styling the recipe page you made in the HTML section!

Reach out to us at [email protected] for feedback or questions.

Bring your web pages to life with JavaScript - the programming language of the web!

JavaScript (JS) makes websites interactive. While HTML provides structure and CSS adds style, JavaScript adds behavior - things happen when you click buttons, fill out forms, or interact with the page.

Sample Project

What is JavaScript?

JavaScript is a programming language that runs in your web browser. It can:

• Respond to user actions (clicks, key presses, mouse movements)
• Change the content of a page dynamically
• Validate forms and process data
• Store data in the browser (localStorage)
• Create animations and effects
• Load new content without refreshing the page

Learn more: W3Schools JavaScript Tutorial | MDN JavaScript Guide

How JavaScript Interacts with HTML

Think of building a website like building a house:

• HTML is the structure - the walls, floors, and rooms
• CSS is the decoration - the paint, furniture, and style
• JavaScript is the functionality - the electricity, plumbing, and appliances that make things work

Why can't we just use HTML? HTML is a markup language, not a programming language. This means HTML can only describe what content should appear on a page - it can't make decisions, do calculations, or respond to user actions.

What HTML Can't Do (But JavaScript Can!)

HTML has important limitations:

• No Logic: HTML can't make decisions like "if the user clicks this button, show a message"
• No Functions: HTML can't create reusable chunks of code that perform specific tasks
• No Calculations: HTML can't do math or process data
• No Memory: HTML can't remember information from one interaction to the next
• Static Content: HTML content is fixed - it can't change without reloading the entire page
• No Validation: HTML can't check if form inputs are correct before submitting

JavaScript solves all of these problems! It can read HTML content, modify it, and react to user interactions in real-time.

How They Work Together

JavaScript "talks to" HTML through something called the DOM (Document Object Model). The DOM is like a map of your HTML page that JavaScript can read and modify.

Here's what happens when you click a button:

1. HTML creates the button: <button>Click Me</button>
2. JavaScript listens for the click event
3. When clicked, JavaScript runs a function (a set of instructions)
4. The function can change HTML content, update styles, save data, or anything else you program it to do!

Example: In your upcoming trivia quiz, HTML creates the question text and answer buttons. But only JavaScript can check if your answer is correct, keep track of your score, and decide what to show next!

Project: Build a Trivia Quiz with High Scores

In this project, you'll build an interactive trivia quiz that demonstrates variables, conditional statements, functions, and most importantly - localStorage to save and display high scores even after closing the browser!

Start Your Project

Start a new project on Jippity. Ask Jippity:

Create an HTML page for a trivia quiz with a title, a container for questions, and a score display

Variables: Track the Score

Variables store information. We'll use a variable to keep track of the player's current score.

Ask Jippity:

Add JavaScript with a variable called "score" that starts at 0, and display it on the page

Learn more: W3Schools Variables

Create Quiz Questions

Let's add multiple choice quiz questions. We'll start with one question to understand the structure.

Ask Jippity:

Create a quiz question "What is the capital of France?" with 4 buttons for answers: Paris, London, Berlin, Madrid. Only Paris is correct.

Conditional Statements: Check Answers

JavaScript uses if/else statements to make decisions. When a player clicks an answer, we'll check if it's correct.

Ask Jippity:

When the player clicks an answer button, check if it's correct. If correct, add 10 points to the score and display "Correct!". If wrong, display "Incorrect, try again!"

Learn more: W3Schools If/Else

Arrays: Store Multiple Questions

Arrays let you store lists of data. We'll create an array of quiz questions so we can easily add more.

Ask Jippity:

Create an array with 5 trivia questions, each with a question, 4 possible answers, and the correct answer. Display them one at a time.

Learn more: W3Schools Arrays

Functions: Organize Your Code

Functions are reusable blocks of code. Let's create functions to handle displaying questions and checking answers.

Ask Jippity:

Create a function called "displayQuestion" that shows the next question, and a function called "checkAnswer" that checks if the selected answer is correct and updates the score

Learn more: W3Schools Functions

Game Flow: Move Through Questions

Now let's add the ability to move from one question to the next after answering.

Ask Jippity:

After answering a question correctly, automatically show the next question. After all 5 questions, show a "Game Over" message with the final score.

localStorage: Save High Scores

This is the exciting part! localStorage lets you save data in the browser that persists even after closing the page. We'll use it to save high scores.

localStorage is like a storage box in the browser where you can save and retrieve data using keys.

Ask Jippity:

When the game ends, use localStorage to save the player's score if it's higher than the previous high score. Display "New High Score!" if they beat it, or "High Score: [number]" showing the best score.

Learn more: W3Schools localStorage | MDN localStorage

Display High Score on Page Load

When the page loads, we should check localStorage and display the high score if one exists.

Ask Jippity:

When the page loads, check localStorage for a saved high score and display it at the top of the page. If no high score exists yet, display "High Score: 0"

Add a Reset Button

Let's add a button to restart the quiz and another to clear the high score.

Ask Jippity:

Add two buttons: "Play Again" which resets the score and restarts the quiz, and "Clear High Score" which removes the high score from localStorage and resets it to 0

Add Visual Feedback

Make the quiz more engaging by changing colors when answers are correct or incorrect.

Ask Jippity:

When a correct answer is clicked, make that button turn green for 1 second. When an incorrect answer is clicked, make it turn red for 1 second.

DOM Manipulation: Changing the Page

Throughout this project, you've been using the DOM (Document Object Model) to change the web page. Key methods include:

• document.getElementById() - Select an element by its ID
• document.querySelector() - Select an element by CSS selector
• element.innerHTML - Change the HTML content of an element
• element.textContent - Change just the text of an element
• element.style.property - Change CSS styles
• element.addEventListener() - Listen for events like clicks

Learn more: W3Schools DOM

Understanding localStorage

localStorage is incredibly useful for saving data in the browser:

• localStorage.setItem('key', 'value') - Save data
• localStorage.getItem('key') - Retrieve data
• localStorage.removeItem('key') - Delete data
• localStorage.clear() - Delete all data

Important: localStorage can only store strings. For numbers, convert them:

• Saving: localStorage.setItem('score', score.toString())
• Loading: parseInt(localStorage.getItem('score'))

Using JavaScript Libraries: p5.js

JavaScript libraries are collections of pre-written code that make complex tasks easier. One of the most popular libraries on Jippity is p5.js - a creative coding library perfect for making animations, games, and interactive art!

Learn more: p5.js Official Website | p5.js Reference

What is p5.js?

p5.js makes it easy to:

• Draw shapes, colors, and animations on a canvas
• Create interactive graphics that respond to mouse and keyboard
• Build games with moving characters and collision detection
• Make generative art and visualizations
• Work with images, sounds, and videos

Start a p5.js Project

p5.js is built into Jippity! When you start a new project, you can choose to use p5.js. Ask Jippity:

Create a p5.js sketch with a canvas

Jippity will set up the basic structure with two important functions:

• setup() - Runs once when the program starts (create canvas, set initial values)
• draw() - Runs repeatedly, many times per second (create animations)

Try p5.js: Draw Shapes

Let's create a simple drawing with shapes and colors. Ask Jippity:

Create a p5.js sketch that draws a blue circle in the center of a 400x400 canvas

You'll see code using p5.js functions like:

• createCanvas(width, height) - Create the drawing area
• background(color) - Set the background color
• fill(color) - Set the fill color for shapes
• circle(x, y, diameter) - Draw a circle
• rect(x, y, width, height) - Draw a rectangle

Make It Interactive

p5.js has built-in variables that track the mouse position. Ask Jippity:

Make the circle follow the mouse cursor using mouseX and mouseY

p5.js provides helpful variables:

• mouseX and mouseY - Current mouse position
• mouseIsPressed - True when mouse button is held down
• key - The most recent key pressed
• width and height - Canvas dimensions

Create Animation

Because draw() runs continuously, you can create animations by changing values over time. Ask Jippity:

Create a bouncing ball animation that bounces off the edges of the canvas

Build a Simple Game

p5.js is perfect for making games! Try creating a simple catching game:

Create a game where a circle moves left and right with arrow keys to catch falling objects

Explore p5.js Features

p5.js has many more features to explore:

• Images: Load and display images with loadImage() and image()
• Sound: Play audio with the p5.sound library
• Typography: Display and animate text with text() and textSize()
• Transformations: Rotate and scale shapes with rotate() and scale()
• Random: Add randomness with random() for unpredictable effects
• Math: Use built-in functions like map(), constrain(), and dist()

Learn more: p5.js Learn | Coding Train p5.js Tutorials

Other Popular JavaScript Libraries

While p5.js is great for creative coding, there are many other JavaScript libraries you might encounter:

• Three.js - Create 3D graphics and animations
• Tone.js - Make music and audio applications
• Chart.js - Create beautiful data visualizations and charts
• Phaser - Build professional 2D games

Why use libraries? Libraries save time by providing tested, optimized code for common tasks. Instead of writing hundreds of lines to create a game engine, you can use a library and focus on making your game unique!

Ideas for Further Exploration

• Add a timer that limits how long players have to answer each question
• Create different difficulty levels with different point values
• Add a leaderboard that stores the top 5 scores (hint: use JSON.stringify() and JSON.parse() to store arrays in localStorage)
• Add categories so players can choose what type of trivia questions to answer
• Create animations when the score increases
• Add sound effects for correct and incorrect answers
• Build a progress bar showing how many questions are left
• Add a username feature so players can save their name with their score

Challenge: Use localStorage to save the quiz state, so if a player closes the browser mid-game, they can resume where they left off!

Reach out to us at [email protected] for feedback or questions.

Put it all together - create a professional personal website showcasing who you are!

Now that you've learned HTML, CSS, and JavaScript, it's time to create your own personal website! This will be a portfolio site that showcases your interests, projects, and skills.

Sample Project

Planning Your Website

Before coding, let's plan what your website will include. A good personal website typically has:

• Home/About Section - Introduction and photo
• Projects Section - Showcase things you've built or worked on
• Skills Section - What you know or are learning
• Contact Section - How people can reach you
• Navigation Menu - Links to jump between sections

Think about:

• What colors represent you?
• What style do you want - modern, playful, professional?
• What projects or hobbies do you want to highlight?

Start with HTML Structure

Start a new project on Jippity. Let's create the basic structure with all the sections.

Ask Jippity:

Create an HTML personal website with sections for: About Me, My Projects, Skills, and Contact. Include a navigation menu at the top that links to each section.

Add Your Content

Now personalize it with your own information. Ask Jippity to add:

• Your name and a short bio in the About section
• Descriptions of 2-3 projects you've worked on
• A list of skills or subjects you're learning
• Contact information (email or social media handles - only share what you're comfortable with!)

Use a prompt like:

In the About section, add my name [Your Name] and a paragraph saying I'm learning web development and love [your interests]. Add placeholder projects in the Projects section.

Style with CSS

Now make it look professional and unique! Ask Jippity to style your website:

Style my website with a modern design: use a [color] color scheme, make the navigation sticky at the top, add hover effects to links, and use clean spacing between sections

Continue refining the design:

• Choose fonts that match your personality
• Add a hero section with a large heading and your name
• Create cards for your projects with borders and shadows
• Style the skills section as badges or tags

Add Images

Images make your site more personal and engaging. You can add:

• A profile photo in the About section (if you're comfortable sharing one)
• Screenshots or images for each project
• Icons for your skills
• A background image or pattern

Use the Asset Library or ask Jippity:

Add placeholder images for my projects and add icons next to my skills

Add Interactivity with JavaScript

Make your site dynamic! Here are some ideas:

Smooth Scrolling Navigation

Make the navigation links smoothly scroll to each section when clicked

Dark Mode Toggle

Add a button that switches between light mode and dark mode

Make it Responsive

Your website should look good on phones, tablets, and computers. Ask Jippity:

Make my website responsive so it looks good on mobile devices. Stack sections vertically on small screens and adjust font sizes.

Polish and Perfect

Review your website and make final improvements:

• Check that all links work correctly
• Make sure images load properly
• Test all interactive features
• Proofread all text for typos
• Ensure colors are readable (good contrast)
• Add smooth transitions and animations

Publish and Share

Once you're happy with your website, it's time to share it!

Click the Title button above the chat, and update your website title to something like "My Personal Website" or "[Your Name]'s Portfolio". Add a description.

To publish your website, add a thumbnail screenshot, then click Publish to make it appear in the Projects tab.

Click View Project Page to see your live website, then use the Embed/Share button to copy the link and share it with friends and family!

Ideas for Further Expansion

• Add a blog section to share your thoughts and learning journey
• Create an image gallery or slideshow
• Add animations that trigger as you scroll down the page
• Include a timeline showing your learning progress
• Add testimonials or quotes from people you've worked with
• Add a fun fact or hobby section with interactive elements
• Include links to your GitHub, LinkedIn, or other portfolios

Next Steps

Congratulations! You've built a complete personal website using HTML, CSS, and JavaScript. This is just the beginning of your web development journey. Here's what you can learn next:

• Advanced CSS - Learn Flexbox, Grid, and animations in depth
• JavaScript Libraries - Explore p5.js, Three.js, or Matter.js
• Databases - Store and retrieve data using IndexedDB in the browser

Keep building, keep learning, and most importantly - have fun creating for the web!

Reach out to us at [email protected] for feedback or questions.