I officially declare that "I didn't know HTML & CSS UNTIL TODAY"
My journey into web3 started a bit differently with first learning Solidity and not web development
Today I took the first step of doing a crash course on HTML & CSS
Learnings on Day1👇
#100DaysOfWeb3
My journey into web3 started a bit differently with first learning Solidity and not web development
Today I took the first step of doing a crash course on HTML & CSS
Learnings on Day1👇
#100DaysOfWeb3
📌 HTML
✅ Basic HTML syntax
✅ Headings & Paragraphs
✅ Strong and Emphasis
✅ Anchors and Attributes
✅ Lists
✅ Images
✅ Basic HTML syntax
✅ Headings & Paragraphs
✅ Strong and Emphasis
✅ Anchors and Attributes
✅ Lists
✅ Images
📌 Basic HTML syntax
1. Every HTML page starts with <!DOCTYPE html>- Way to tell the browser that document is written in Version 5 of HTML
2. The four most essential and widely used HTML tags -
<html>
<head>
<title>
<body>
Each and every tag must be closed as well.
1. Every HTML page starts with <!DOCTYPE html>- Way to tell the browser that document is written in Version 5 of HTML
2. The four most essential and widely used HTML tags -
<html>
<head>
<title>
<body>
Each and every tag must be closed as well.
📌 Headings & Paragraphs
1. Headings- For showing text as a heading, there are 6 level of tags available starting with <h1>,<h2>,....<h6> wherein size decreases with increase in suffix number
2. Paragraph- <p> tag is used to show some text as paragraph
1. Headings- For showing text as a heading, there are 6 level of tags available starting with <h1>,<h2>,....<h6> wherein size decreases with increase in suffix number
2. Paragraph- <p> tag is used to show some text as paragraph
📌 Strong and Emphasis
How to give make some text bold or italic?
Strong- <strong> tag is used to Bold the text
Emphasis- <em> tag is used to make the text italic
How to give make some text bold or italic?
Strong- <strong> tag is used to Bold the text
Emphasis- <em> tag is used to make the text italic
📌 Anchors & Attributes
How to give reference to some other page of our website or some external link on our current webpage?
Anchor,<a> tag help us achieve that. For specifying the link it should redirect to, we use 'href' attribute to specify location like <a href="Link"></a>
How to give reference to some other page of our website or some external link on our current webpage?
Anchor,<a> tag help us achieve that. For specifying the link it should redirect to, we use 'href' attribute to specify location like <a href="Link"></a>
📌 Lists
There are two types of List: Ordered and Unordered
Ordered List- Specified with <ol> tag & different way of ordering can be provided by giving different type
Unordered/Bulleted List- Specified with <ul> tag
To specify elements that need to be listed <li> tag is used
There are two types of List: Ordered and Unordered
Ordered List- Specified with <ol> tag & different way of ordering can be provided by giving different type
Unordered/Bulleted List- Specified with <ul> tag
To specify elements that need to be listed <li> tag is used
📌 Images
How to add an image within the webpage?
<img> tag is used to embed image in a webpage where src specifics the source of image and alt specifies the text explaining what the image is all about like <img src= "abc.jpg" alt= "text">
How to add an image within the webpage?
<img> tag is used to embed image in a webpage where src specifics the source of image and alt specifies the text explaining what the image is all about like <img src= "abc.jpg" alt= "text">
📌 Basic of Inline CSS
style attribute is used to apply styling to a single HTML element wherein each one of them is stated as a property : value pair inside HTML opening tags
Styling elements I specifically learnt today
✅ font-size
✅ color
✅ background-color
✅ text-align
style attribute is used to apply styling to a single HTML element wherein each one of them is stated as a property : value pair inside HTML opening tags
Styling elements I specifically learnt today
✅ font-size
✅ color
✅ background-color
✅ text-align
With this my Day1 learning ends and Here's how my basic web page looks like after learning all of the things mentioned above.
P.S. I know it's not something extraordinary & can be improved but I enjoyed making it😛
P.S. I know it's not something extraordinary & can be improved but I enjoyed making it😛
For learning all of this, I'm following this amazing course scrimba.com/learn/htmlcss on @scrimba from one of the best tutor @KevinJPowell
• • •
Missing some Tweet in this thread? You can try to
force a refresh
