Anime Expression
Web Development
Project brief
Anime expression
Introduction
What you will make
In this project, you will use HTML and CSS to create
and style a webpage for an anime drawing tutorial.
Hypertext Markup Language (HTML) is used to create structure of a webpage. Cascading Style Sheets
(CSS) describes exactly how a webpage should look. Without CSS, a webpage would look really boring.
You will:
● Use HTML tags to structure a webpage There are hundreds of millions of active
webpages. If you use HTML with CSS, it can help
● Use CSS styles to apply layouts, colour
your webpage attract people’s attention.
palettes, and fonts to your webpage
● Add images and text content to your
webpage
Try it
Explore the anime expressions webpage.
● What do you like about it?
● What would you improve?
Go here to explore: [Link]/anime-exp
Where you will create:
Raspberry Pi Code Editor
The Raspberry Pi Code Editor can be used to write
and run code in a web browser without installing any
additional software and without the need to create
an account (although if you’re logged in to a
Raspberry Pi Foundation account, your coding
project is automatically saved).
1. Open Code Editor to write HTML code by writing
this on a new browser [Link]/codeeditor
1
Anime Expression
Web Development
Project brief
2. Click on the Start coding HTML/CSS button.
3. The Code Editor will open with a blank project.
4. Here is the expand button, which helps in expanding and closing the sidebar panel of the code editor. The
Project files panel will open. The blank project has two files: [Link] and [Link].
5. You can access the Account menu from the top right of the Code Editor. When logged in, you will be able to
access:
● My profile
● My projects
● Log out
5. Clicking My projects will take you to the ‘Your projects’ page. Here, you can create a new project and see
the projects list, where you have the option to continue, rename, or delete a project.
To return to the Code Editor, you can:
● Choose a saved project
● Create a new project
● Click the back button in your browser
2
Anime Expression
Web Development
Project brief
5. There are three main panel in the code editor.
a b c
a. The Sidebar panel on the left b. The Code panel in the middle c. The Preview panel on the right
6. You can resize the panel using the handles.
7. The project bar is at the top of the page and shows:
● The name of your project, with an edit button, so you can change the project name.
● A button to let you download your project files.
● A link to log in. This changes to ‘save’ when you are logged in.
8. The file name is at the top of the panel. In this example, the file name is:
[Link] : Where we
can write the HTML
code.
[Link] : Where we can
write the style sheet
code.
3
Anime Expression
Web Development
Project brief
9. The code panel includes the following features:
a
b
c
a. Line numbering
The Code Editor adds line numbers automatically to help you track your code and collaborate with others.
b. Syntax highlighting
Syntax highlighting makes code easier to read by using colours and styles for different elements. It helps
developers see parts of the code clearly—for example, tags are green and values are red in the Code Editor.
c. Indentation
The Code Editor formats your code with spaces (indentation) to show structure. Indentation doesn’t change
how HTML looks in a browser, but it makes code easier to read. For example, <head> and <body> are child
elements nested inside the parent <html>.
On this code editor, HTML and CSS code has to be written. To know more about the editor open this in a new
browser: [Link]/guide
1. Start your webpage
In this step, you will add a header and an
introduction to your anime webpage.
In HTML you can type words directly into the code to
make the words appear, unformatted, on the
webpage.
Step 1:
Step 2:
Open the starter project
[Link] Click on the small triangle next to line 3 to collapse
the <head>.
Your starter project contains some HTML that you will
learn more about throughout the project.
4
Anime Expression
Web Development
Project brief
Add a header
Step 3: Step 4:
Add <h1></h1> tags inside your <header></header> Add the text Draw anime with me between the two
tags. <h1> tags.
Typically, a webpage has three parts. A header, the
main content, and a footer.
Step 5:
Test: Click the Run button.
The output will appear on the right:
You will see that the text inside the <h1> tags is styled as bold with a large font.
Add the first section in your main content
Any main content should be placed between the <main> tags. On your webpage, the main content is broken
down into sections. Your webpage needs an introduction section.
Step 6: Step 7:
Add <section></section> tags between the <main> To add subheadings add the subheading tags <h2>
tags. between the <section> tags.
Now enter the subheading text Facial expressions
between the <h2> tags.
Tip: As you build your webpage, you will add other
tags inside your section.
5
Anime Expression
Web Development
Project brief
Step 8:
Test: Click the Run button.
Notice how the text on your webpage is slightly smaller than the big heading above and has bold styling. This
is because <h2> is a smaller heading than <h1>.
Step 9: Step 10:
Now add a paragraph of text as an introduction to Between the <p> tags, you need to add in this
your anime webpage. introductory text:
Underneath your <h2> heading code, add the
Take a look at these facial expressions and try them
paragraph <p> tags.
in your own drawings.
Step 11:
Test: Click the Run button.
Well done! Your page now has a header, a
subheading, and an introductory paragraph.
2. Add a facial expression
In this step, add the first drawing and instruction to
your webpage.
First, create a section for each facial expression on
the webpage.
Find the comment <!-- The first drawing and
instructions go here -->.
Step 1:
Add in the <section></section> tags for your first
drawing and instruction content.
6
Anime Expression
Web Development
Project brief
Your starter project contains images to use in this project. To include an image on a webpage, you need to
know the filename. First, add an image called [Link].
Step 2: Step 3:
Inside your new section, add an <img> tag to display Add the alt attribute to provide alternative text for
an image. The src attribute gives the name of the people who cannot view the image.
image.
You can copy the description of your image and paste
The <img> tag doesn’t have an end tag. it into your code: The love facial expression.
Alternative (Alt) text is a description of an image and is important in accessible web design to describe
images to people who are unable to see them. The text does not appear on the webpage but it is read aloud
by screen readers.
Step 4:
Test: Click the Run button. The [Link] image appears on your webpage.
Step 5: Step 6:
Add a paragraph of text in <p></p> tags to describe Add <strong> tags around the word ‘love’, it makes
how to draw the love anime facial expression. important text bold.
You can copy the paragraph and paste it into your
code: Test: Click the Run button.
<p>To make your anime character look like they are in
love, replace the eyes with two rounded hearts. You
can add three more hearts inside for a fun effect.</p>
The instructions appear below your image and the
word love is in bold.
7
Anime Expression
Web Development
Project brief
3. Style your page
You have used HTML to add tags to your webpage.
Now it is time to use CSS to add styles to your page.
This step shows you how to change the colours, fonts,
and layout on your webpage.
Cascading Style Sheets (CSS) is the language that
you use to tell the web browser exactly how your
webpage should look, which includes the
positioning, colours, and fonts. We call this the
style.
Every rule in CSS is made up of two parts: the selector and the declaration.
a. The selector is the part of HTML that you want to b. The declaration is in curly brackets {}. It gives
style. In this example it is h1. instructions of the styles that should be used.
Link the CSS file
Step 1:
Unfold the <head> section of your code so that you can view the code inside it.
8
Anime Expression
Web Development
Project brief
Step 2:
At the bottom of your <head></head> section, there are links to two CSS style sheets that are currently
commented out so that they are ignored by the web browser.
Remove the <!-- and --> arrows from the start and end of both lines of link code:
Before After
Step 3:
Test: Click the Run button.
HTML elements have default browser styles that you have seen as you have written your HTML code.
Take a look at your webpage in the right-hand pane. Notice that the styles and layout of your output has now
changed.
Step 4:
Click on the Project files icon in the Code Editor then select the [Link] file top open in in a new tab.
This CSS file contains all of the CSS for your project. You will find out about some key parts of this CSS file as
you create your webpage.
When you add CSS styling to an element, it applies that styling to every single element on the page that has
the same tag.
Step 5:
Scroll down and find the rule that controls the style of the <h2>.
9
Anime Expression
Web Development
Project brief
Step 6:
At the moment, the <h2> heading is aligned to the left. Change the text-align property of the h2 rule to center.
Step 7:
Test: Click the Run button.
Look at your webpage and make sure the ‘Facial
expressions’ text is centred.
4. Style with classes
This step shows you how to add classes to customise
the styles on your page.
If you want to apply styling to specific elements,
you can create a class in a CSS file. You can then
add a class= attribute to an element in your HTML
code to let the browser know what styling should be
applied.
The class styling overrides any element styling that
has already been applied. Notice that the changes
take place as you add the classes to your code.
Your CSS file has a custom CSS class called
border-bottom. This class adds a thick, solid-coloured
line border to the bottom of any HTML element that
uses it.
Step 1:
Go to your [Link] file and find your header.
Add class="border-bottom" after the word header in
your header tag.
10
Anime Expression
Web Development
Project brief
Step 2: The primary class sets a contrasting background and
Add the border-top class to your footer code to apply text colour for most of the main content.
a thick border to the top of your footer. The secondary class sets an additional colour
combination that look good with the colours in the
primary class.
Step 3: Step 4:
Add the secondary class to your footer code to apply Add class="primary" to <main>.
a different colour background to your footer.
Step 5: Step 6:
Add secondary to <header>. Add class="tertiary" to the first <section> element.
The xcenter class in your CSS file aligns items horizontally across the page.
Step 7:
Add class="xcenter" to the <p> in the same section.
Webpages can be viewed on many different
devices and should be responsive to each
device. This means that if a user views your
page on a mobile phone, it should respond to a
smaller screen and if they view it on a desktop
PC, it should respond to a larger screen.
CSS can change the layout on a webpage, as well being used to change colours, fonts, and borders.
Step 8:
Find the second <section> . Add class="wrap" to the
<section> tag.
11
Anime Expression
Web Development
Project brief
You can also add coloured borders in different styles to HTML elements. The dashed-border class in the style file
creates a dashed border.
Step 9: Step 10:
Add the dashed-border class to the <img>. You can make the corners of an element rounded
with the rounded class. Add the rounded class to the
<img>.
Step 11:
Test: Click the Run button.
Step 12:
● Drag the bar between the text editor and your webpage to make the webpage narrower.
● Drag the bar back after you test it, so you can see the image and text side-by-side.
5. Colours and fonts
In this step, you can try out different colour palette
and font choices.
Now that you have started to add custom classes to your code, you may have noticed that colour has been
added to the page. In CSS, you can use variables to create a colour palette for your webpage.
CSS variables start with two dashes: --primary .
Colours are specified using hexadecimal notation (hex) and begin with ‘#’. There are lots of websites where
you can find hex colours to use.
12
Anime Expression
Web Development
Project brief
Step 1:
Go to your [Link] file. This file sets the colour Tip: CSS uses different comment markers to
variables for the candy colour palette. HTML. Multiline comments start with /* and end
with */. The browser ignores code that is inside
In the candy colour palette, the --primary variable is the comment markers.
set to #ebeaeb, a pale grey.
/* Candy colour palette and fonts */ is an example
of a CSS comment.
You can also use variables for fonts. The --header-font is set to 3rem 'Fredoka One', cursive;
3rem means that this font should be three times the normal font size.
'Fredoka One', cursive means that the browser should use the ‘Fredoka One’ font if it can. If this font isn’t
available, the browser should use the fallback font, which is cursive.
Fonts for the web
Web designers carefully consider the font styles for their website.
The three most common categories of font are:
○ Library fonts
○ Web safe fonts
○ Fallback fonts
Library fonts are typically imported from a third-party library such as Google Fonts. Companies sometimes pay
a fee to use a font as part of their website branding.
Web safe fonts are standard fonts that should be available through any web browser. However, you can never
be 100% sure that this is the case. Here is a list of web safe fonts:
○ Arial
○ Verdana
○ Helvetica
○ Tahoma
○ Trebuchet MS
○ Times New Roman
○ Georgia
○ Garamond
○ Courier New
○ Brush Script MT
Fallback fonts are generic font families that are used to match the styling that the web designer would like to
use. The main font families are:
○ Serif: a font style typically used in print publishing, letters have tiny decorative edges called
‘serifs’
○ Sans-serif: a clean screen-readable font without the decorative edges
13
Anime Expression
Web Development
Project brief
○ Monospace: a font where each character uses the same width of space
○ Cursive: a handwriting font
○ Fantasy: a decorative font typically used for big headings
If a fallback font isn’t listed, then the web browser uses the browser’s default font, which is typically Times New
Roman.
Step 2:
Find the variables that set the fonts for your webpage.
The primary colours are designed to be used the most in the main content of the page, followed by the
secondary and then tertiary colours. This means that you can easily design new colour palettes and switch
between them.
The starter project also includes a vivid colour palette file called [Link].
Step 3:
Find the [Link] file.
Notice that the colour and font variables have the same names as in the [Link] file, but the colours and
fonts used are different in this colour palette.
14
Anime Expression
Web Development
Project brief
Step 4: Step 5:
Go to [Link] and change the CSS link code to link Test: Click the Run button.
to the [Link] file
Make sure your webpage now uses the brighter
colours and different fonts, as defined in the [Link]
file.
15