Second Week of Learning With Jadu — HTML & Self Branding
So finally we are done with two weeks of classes with Jadu, which is the fellowship learning program for full-stack development, In every week we have three classes one for soft skills and two classes for technical skills mean coding, and here is what went down in these three online virtual classes:
HTML — The Essentials
- Creating Simple HTML Page,
- Creating Paragraphs, headings, list items, anchors, images, comments
- How to make yourself a brand?
HTML — Intermediate
- Divs and spans, buttons, input fields, radio button, range & sliders,
- Form validation
Now, What is HTML?
HTML stands for HyperText Markup Language used to structure a web page and its content. Content could be structured in the form of paragraphs, a list of items, images, or a set of data tables. HTML elements are represented by <> tags. These tags specify document elements such as headings, paragraphs, and tables.
What we have learned in our second-week classes about HTML
In our first class of HTML, we learned different basic tags of HTML like:
Creating headings, Paragraphs, ordered list items, unordered list items, anchors, images, comments:
- Creating headings: There is a total of 6 headings in HTML. Bigger the heading number, the bigger the size is. Tag used for creating headings is <h1></h1>, <h2></h2> up to <h6></h6>.
- Creating Paragraphs: Tag used for paragraphs is <p></p>. It contains the content of a specific heading.
- Creating a List of Items: There are two types; Ordered list and Unordered list. The tag used for the ordered list is <ol></ol> while the tag used for unordered list is <ul></ul>. Inside the ol and ul tag, there is a new tag <li></li> stands for list items.
- Creating Anchor tags: defines a hyperlink, which is used to navigate between pages. The tag used is <a href=””></a>. The important attribute is a href that contains the address of another page. You can put anything between this tag to get that thing navigatable. Like I put an image in this tag then when I click my image it will take me to that page whose link I have given in the anchor tag.
- Adding Images: <img src=”” alt=””> doesn’t have any ending tag. The important attribute is src that contains the URL or the location of the image on the desktop.
Alter message: The alt attribute shows the alter name when our image didn’t load, then it shows a message or something. It's also very important in terms of SEO.
You can comment on any line by using <! — Write your comments here →.
In our second class of HTML, we learned Intermediate level of HTML like:
Divs, Spans, Buttons, Input fields, Radio Button, Form Validation
- A div is a block-level element. It is used to divide or section other HTML tags into meaningful groups. It is used as a container for other HTML elements
- A span is an inline element. It is used to wrap small portions of text, images, etc. Generally speaking, you use span to hook text or a group of tags that you want to style differently.
- The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. We can style buttons using CSS.<button type=”button”>Click Me!</button>
<input>tag specifies an input field where the user can enter data. The main attribute of the input tag is what type of input use want to enter. For example, text type, email type, age type, password type, search type, and so on. Input tags don’t have a closing tag.
- <input type=”radio”> defines radio buttons. It is an input field, where these buttons presented as group buttons. Only one radio button in a group can be selected at the same time using the name attribute. For and id attributes used to link the input tag with its specific label.
- Now we are going to create a simple validation (signup) page using the basics of HTML. You can watch the video via the following link.
Saad Hamid, a well-known name in the Pakistani tech community, is our mentor from a marketability perspective. His insights and knowledge on the subject are not only useful but also give a clear picture of how the market out there is, and how an aspiring coder can and has to effort their way into the market that’s competitive yet needs resources. He teaches us about self-branding in the second class of the week.
Self-branding, or personal branding, is a form of marketing that an individual uses to create a uniform public image that demonstrates his or her values and overall reputation.
Personal brand, simply put, is when what you are in real matches with what the masses think about you.
Personal branding could be effective in attaining:
· Finding new opportunities (finding work, getting hired, getting recognized)
· Narrowing down of focus (finding mastery)
· Value addition within self and projection
· Getting recognized among peers
There are certain building blocks to an effective brand
Rapport: It’s all about connection and affinity:
· People tend to like others on the basis of how they look, are they presentable, neat, relatable?
· How they speak: do they sound honest? Fake? Concerned? Is their language neat?
· How they sound like: do they listen before they jump to a conclusion? Is there compassion in their behavior? Are they empathetic?
· How they deal with you: are they honest in real? Do they seem honest in their dealing?