HTML Intro Workshop #2
Conversation
01-HTML-Intor.md
Outdated
| To go throgh the course and be able to apply what you learn in the workshops you need to have the following: | ||
|
|
||
| - **A Browser**: Chrome (preferred), or Firefox or any modern browser | ||
| - **A Text Editor**: VS Code (preferred), Atom, Sublime Text, Brackets or your prefered choice |
There was a problem hiding this comment.
I think we can advise all of them to use VS Code and CodePen as it is online and would help with easier access to the content online. We want to encourage them to use these tools to be able to have a quick onboarding on what they need for the Code Academy application process.
There was a problem hiding this comment.
Yeah I know that's why I wrote the word preferred next to them and about CodePen I wrote a note in the next lines about it, and during the workshop, we will make sure that they get to use it
|
@yosefanajjar Thank you so much for this. The structure looks good, I would also want you to start thinking about how the schedule of the workshop would look like and start drafting that (Time wise - sessions will be for 3 hours long with 20mins break) - I can help with that too if you need. |
| **Learning Outcomes** | ||
| - Picking a code editor and get familiar with other tools we will be using in the course | ||
| - Basic understanding of HTML: DOM, Element, Attributes | ||
| - Understand the basic file structure for a web page |
There was a problem hiding this comment.
@yosefanajjar this should be basic structure without the word file
| | `<b>` | Highlight important information| | ||
| | `<strong>` | Similarly to bold, to highlight key text| | ||
| | `<i>` | To denote text | | ||
| | `<em>` | Usually used as image captions | |
There was a problem hiding this comment.
@yosefanajjar
we have figcaption to be used as an image caption
maybe we should mention the main purpose of this tag, what do you think?
also maybe should add a reference for the difference between the i and em tag like this one
section <i> vs. <em>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
and also the same for b and strong tag
| In order for the image tag to display the image we need to provide it with the path to the image which can be a path for it on your device or a link from the web | ||
|
|
||
| ```html= | ||
| <img src="images/image.jpg" alt="some image" /> |
There was a problem hiding this comment.
@yosefanajjar maybe you should add the example without the alt attribute then you can add the same one with alt and write some words to describe the benefits and how important it is
There was a problem hiding this comment.
We can do that during the workshop and talk about it
| **The expected output**: | ||
|
|
||
| <a href="www.google.com">Click Me</a> | ||
|
|
There was a problem hiding this comment.
@yosefanajjar maybe you can talk about the target attr
|
|
||
| 1. Your name which should be in an `<h1>` tag | ||
| 2. A paragraph about yourself using the `<p>` tag and the text formatting tags **at least two** of them | ||
| 2. An image of you using the `<img>` tag and specify a width and a height for it (150px/150px) and don't forget to add the **alt** attribute to it |
There was a problem hiding this comment.
@yosefanajjar you didn't mention anything about the width/height attr before
There was a problem hiding this comment.
They can search for it
|
|
||
| ## HTML Attributes | ||
| HTML elements can have attributes, **Attributes** provide additional information about the element, Attributes come in **name/value pairs** like **charset="utf-8"** | ||
|
|
There was a problem hiding this comment.
@yosefanajjar this charset="utf-8 could bring a lot of questions and cause some confusion if they asked about it, maybe you could replace it with lang="ar" or even dir
|
|
||
| #### Congrats that's it! You have finished the workshop now look at the resources that we used in the workshop to learn more: | ||
|
|
||
| https://www.w3schools.com/html/default.asp |
There was a problem hiding this comment.
make another empty line to display every link on its own line
Wrote most of the workshop but still need to add more stuff: