# Web Development 1 - Pluggpapper
###### tags: `webb1` `html` `js` `css` `flexbox` `pluggpapper`
## HTML
1. What are the two main sections of an HTML document? Write them below:
```html
<!-- The head and the body -->
```
2. Insert a script tag in the head section of your HTML document, linking to an external JavaScript file named "script.js".
```html
<!-- Linking to an external script.js file in the head section -->
<head>
<script src="script.js"></script>
</head>
```
3. Place an image tag inside the body of your HTML document, with the source being "image.jpg":
```html
<!-- Adding an image to the page -->
<body>
<img src="image.jpg" alt="An image">
</body>
```
## JavaScript
4. What is the purpose of the following JavaScript code?
```html
for (i = 0; i < 10; i++) {
console.log(i);
}
```
```html
<!-- The code will loop 10 times, each time outputting the iteration number to the console -->
```
5. Link to the following external JavaScript library in your HTML document:
```html
https://koda.nu/simple.js
```
```html
<!-- Linking to an external JavaScript library -->
<script src="https://koda.nu/simple.js"></script>
```
6. :
```javascript
<!-- A function that doubles a given number -->
function doubleNumber(num) {
return num * 2;
}
```
## CSS
7. What is Flexbox?
```html
<!-- Flexbox is a layout model in CSS that allows flexible and responsive positioning and resizing of elements within a container -->
```
8. Create a div with a class named "container" that uses the Flexbox layout model and arranges its child elements in a row:
```html
<!-- A container using Flexbox with row layout -->
<div class="container" style="display: flex; flex-direction: row;">
<!-- Child elements go here -->
</div>
```
9. What are some common Flexbox patterns?
```html
<!-- Some common Flexbox patterns include the Centered Container, Holy Grail Layout, Stacked Card Layout, Sidebar Layout, etc. -->
```
## CSS3 Basic Animations
10. What is CSS3 Basic Animations?
```html
<!-- CSS3 Basic Animations is a CSS3 module that allows transitions and animations to be added to HTML elements through keyframes and properties such as animation-duration, animation-timing function, etc. -->
```
11. Create a CSS animation that fades in a div over five seconds:
```css
<!-- Using keyframes to create a Fade In animation effect -->
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!-- Applying the Fade In animation to an element over five seconds -->
div {
animation-name: fadeIn;
animation-duration: 5s;
}
```
----
Web Development 1 Exam:
1. HTML:
a. Define the head, body, img, and script tags
b. Add three randomized HTML tags
```
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<img src="image.jpg" alt="image">
<script>
console.log("Hello, world!");
</script>
<div class="example">This is a randomized tag</div>
<span class="anotherExample">This is another randomized tag</span>
<section class="thirdExample">This is a third randomized tag</section>
</body>
</html>
```
2. CSS:
a. Define flexbox, advanced flexbox, and flexbox patterns
b. Create a CSS code for a box that uses the flexbox pattern and has a blue background.
```
.box {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
height: 300px;
width: 300px;
}
.advancedBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 500px;
width: 500px;
}
.patternBox {
display: flex;
align-items: center;
justify-content: flex-end;
height: 200px;
width: 200px;
background-color: orange;
}
```
3. JavaScript:
a. Explain the functionality of the simple.js file.
b. Provide an example of each of the following statements using the simple.js file: circle, rectangle, triangle, ring, arc, text, shuffle, picture, clearScreen, fill, distance
Answer:
a. simple.js is a JavaScript library that allows the user to draw shapes on an HTML canvas element. The library provides various methods to draw shapes such as circles, rectangles, triangles, rings, arcs, and text. It also has methods to shuffle arrays, display pictures, clear the screen, and fill shapes with colors.
b.
```javascript
circle(150, 150, 100, 'red');
rectangle(50, 50, 200, 100, 'green');
triangle(100, 100, 200, 200, 150, 250, 'blue');
ring(300, 300, 60, 'purple', 5);
arc(400, 400, 50, 0, Math.PI, true, 'orange');
text('Hello, world!', 50, 50, 'black', '30px Arial');
shuffle([1, 2, 3, 4, 5]);
picture('image.jpg', 0, 0, 200, 200);
clearScreen();
fill('pink');
distance(0, 0, 100, 100);
````
Sign in with Wallet
Connect another wallet