Week 01
Web-Development
The creation and management of both websites and web-based applications
Web-development consists of both front-end and back-end development.
Front-End Development
A mix of programming and layout that powers the visuals and interactions of the web
- Defines what the user sees
- Powers the visuals and interactions of the web
- Meant to be "pretty"
- Made up of HTML, CSS & JavaScript (and others which I may delve into in the future)
HTML, CSS & Javascript
HTML - Defines the contents (bones)
CSS - Assigns the style (style)
JavaScript - Adds the functionality (brains)
HTML (Hypertext Markup Language)
Standard markup language for creating web pages and web applications
HTML uses tags placed around content to decide the website structure, and tells the browser how to format the content.
All content in a HTML document should be surrounded with HTML element tags.
An opening tag <tag> and a closing tag </tag>
We can use different type of tags to define what type of content we want to have!
Elements within Elements
Here's the basic structure of a HTML document
<html>
<head>
<title>Minimal Document</title>
</head>
<body>
<p>
A paragraph <em>with Emphasis</em>
</p>
</body>
</html>
The title element is what you see on the top at the tab area of the website!
Commonly used tags
This list is non-exhaustive. More information and explanation on tags can be found here
General
| Tags | Description | Note |
|---|---|---|
<html> | ||
<head> | Contains page title, scripts, styles, metainfo for document | |
<body> | Contains everything to be displayed on the screen, the content | |
<h1> to <h6> | Header tags used to group relevant content together. h1 is the largest and most prominent while h6 is the least. As much as possible, strive to only have 1 h1 element per page | |
<p> | Used to label a section as a paragraph | block |
<span> | General inline tag, often used to place items in a line (which can then be manipulated) | inline |
<div> | General container tag, often used to group related elements together | block |
<b> | Used to bold text | inline |
<em> | Used to add emphasis to text | inline |
<i> | Used to italicise text | inline |
<strong> | Used to give importance to a text, section headings | inline |
<a> | Anchor/hyperlink element | details |
<img src=""> | Used to display an image. | details |
<iframe src="" title=""> | Inline frame used to embed content from other locations on website | details |
Block elements are elements that create a spacing/line break below themselves.
Inline elements are, well, in the line :/
Lists
| Tags | Description |
|---|---|
<ul> | unordered list |
<ol> | ordered list |
<li> | Used to a line in a list |
Tables
| Tags | Description | Attributes |
|---|---|---|
<table> | Wraps the whole table | |
<th> | Defines a header for a column | colspan, rowspan, scope |
<tr> | Used to define a row in the table | colspan, rowspan, scope |
<td> | Used to define data in the cell |
Attributes
Tags can also have attributes like class or src depending on the tag.
An attribute can be added in the opening tag.
An attribute is used to
- Select between different options of element function
- Provide extra information about what the element describes
- Assign a class to an element
<p class="special">
A special paragraph
</p>
Common attributes
| Attribute | Description |
|---|---|
src | Location of file, can be relative/absolute |
title | Will be shown when mouseover |
alt | Will be shown if image does not load |
Anchor <a> tag
The anchor/hyperlink tag allows linking to:
- internal locations on a document
- Other documents and resources
Text in <a> tags will played with displayed with as a hyperlink in the browser.
Every link has a destination. In order to make any link work, specify a destination URL in th <a> element by adding the href attribute.
<a href="kwokjingxuan.me" title="Kwok Jing Xuan">My Personal Website</a>
Result:
Image <img> tag
Displays an image
srcattribute- Internal locations on a document
- Other documents and resources
altattribute- Image description
- Accessibility for visually impaired users
- In the event image does not load
- Image description
<img alt="This shows up when the image fails" src="interactive-development.png" title="This image is pretty">
Inline frame <iframe> tag
Used to embed another document within the current HTML document.
- Can be used to embed rich media resources such as YouTube videos.
<iframe src="" width="" height=""></iframe>
Recipe Card Challenge
As part of the Continuous Assessment for this week, we were tasked with creating a simple website for a recipe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CA 1: Make a Recipe Card</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- #TODO
In this activity, you will start to make your own recipe. You will be introduced to five common HTML tags; headings, paragraphs, image, ordered lists and unordered lists.
Create a recipe card, using everything we had discussed.
Headings <h1>....<h6>
paragraphs <p></p>
image <img>
lists <ol></ol><ul></ul>
-->
<!-- place your codes below, replace as you deemed fit :) -->
<h1>Recipe Time!</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qtlhdIfojmc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p></p>
<img src="cake.jpg"></img>
<div class="container">
<h2>Ingredients</h2>
<h3>For cake</h3>
<ol>
<li>2 1/3 cups (290g) Flour</li>
<li>2 teaspoons Baking powder</li>
<li>1/2 teaspoon Baking soda</li>
<li>1/2 teaspoon Salt</li>
<li>1/2 cup (115g) Butter, softened</li>
<li>1/2 cup (120ml) Oil</li>
<li>1½ cups (300g) Sugar</li>
<li>3 Eggs</li>
<li>1 cup (240ml) Buttermilk (more if needed)</li>
<li>1 tablespoon Vanilla extract</li>
</ol>
<h3>For frosting</h3>
<ol>
<li>2/3 cup (150g) Butter, softened</li>
<li>1/2 cup (120ml) Heavy cream, cold</li>
<li>1¼ cups (160g) Icing sugar</li>
<li>2 teaspoons Vanilla extract</li>
<li>1¾ cups (400g) Cream cheese</li>
</ol>
</div>
<div class="container">
<h2>Instructions</h2>
<ol>
<li>Preheat oven to 350F (175C). Line two 8-inch (20cm) round cake pans with parchment paper and grease bottom and sides.</li>
<li>In one bowl, sift flour, baking powder, baking soda, add salt, stir and set aside.</li>
<li>In a large bowl cream together butter and sugar. Then add eggs, one at the time, beating until combined after each addition. Add oil, vanilla extract and beat until incorporated.</li>
<li>Alternate adding flour mixture and buttermilk, beginning by adding 1/2 of the flour mixture, then 1/2 of the buttermilk. Then repeat this process. Beat until fully incorporating after each addition.</li>
<li>Divide the batter between prepared pans. Bake for about 40 minutes, until a toothpick inserted into the center comes out clean.</li>
<li>Allow the cakes to cool for 5-10 minutes in the pan, then release from the pan and let cool completely on a wire rack.</li>
<li>Make the frosting: in a large bowl, beat cream cheese and butter until smooth. Add powdered sugar and vanilla extract. Beat until smooth and creamy. In a separate bowl beat heavy cream to stiff peaks. Then fold into the cream cheese mixture.</li>
<li>Assembly: Place one cake layer with flat side down. Spread a layer of frosting, place the second layer of cake on top of the frosting, flat side up. Spread evenly the frosting on top and sides of the cake. Decorate the edges of the cake with sprinkles.</li>
<li>Refrigerate for at least 2 hours before serving.</li>
</ol>
</div>
<div class="container">
<h2>Notes</h2>
<ol>
<li>Why buttermilk?</li>
<ul><li>The use of buttermilk in cakes and cupcakes helps the cake to get a moist and airy texture, in most of my recipes I use buttermilk and indeed you can feel the difference.</li></ul>
<li>What can we use instead of buttermilk?</li>
<ul><li>If you cannot find buttermilk in your country, you can make a home buttermilk: stir 1 cup (240ml) of whole milk with 1 tablespoon of vinegar or lemon juice, let stand for 10 minutes before use. If you still prefer not to use buttermilk you can use whole milk instead.</li></ul>
<li>How to adjust to 9inch (23 cm) pan?</li>
<ul><li>If you prefer to make the cake in a larger pan such as 9-inch, you should multiply all the ingredients by 1.33</li></ul>
<li>Can we use other frosting?</li>
<ul><li>There are many options of frosting that you can use in this vanilla cake recipe, one of my favorites are this chocolate frosting that you can find in this chocolate cake recipe.</li></ul>
<li>Can this recipe be used for cupcakes?</li>
<ul><li>This recipe is very similar to a cupcake recipe, but instead of adapting this recipe for cupcakes, I have prepared full and detailed recipes for you: Vanilla Cupcakes, Chocolate Cupcakes</li></ul>
<li>How to store the cake?</li>
<ul><li>The cake can be stored covered, in the fridge, up to 5 days.</li></ul>
</ol>
</div>
</body>
</html>