Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fmanimashaun/codecademy-learning
My Codecademy Learning Diary
https://github.com/fmanimashaun/codecademy-learning
Last synced: about 13 hours ago
JSON representation
My Codecademy Learning Diary
- Host: GitHub
- URL: https://github.com/fmanimashaun/codecademy-learning
- Owner: fmanimashaun
- Created: 2022-05-21T17:28:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-13T20:00:26.000Z (over 2 years ago)
- Last Synced: 2024-10-10T07:40:55.272Z (about 1 month ago)
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# codecademy-learning
My Codecademy Learning Diary
## Useful resources
* Practice interview technical interview questions [Leetcode link](https://leetcode.com/)
* Textbook in javascript [Eloquent JavaScript - 3rd edition (2018)](https://eloquentjavascript.net/)
* Textbook in HTML/CSS [Learn to Code HTML & CSS](https://learn.shayhowe.com/)
* Textbook in HTML/CSS [HTML & CSS IS HARD](https://www.internetingishard.com/)
* HTML/CSS/Javascript reference documentation [Mozilla Developer Network](https://developer.mozilla.org/en-US/)
* HTML Code validator tool [HTML validation](https://validator.w3.org/)
* HTML Elements Documentation [MDN HTML Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
* Book: HTML & CSS, Jon Duckett, Chapters 10 (pp. 226-244), 13 (pp. 300-328), and 15 (pp. 358-404)
* Responsive image engine [Link](https://www.responsivebreakpoints.com/)
## Fundamental of HTML
### Important tags to pay attention to
* The `````` tag will generally render as italic emphasis, it is used to emphasize text
* The `````` will generally render as bold emphasis, it is use to highlight important text
* The ```Video not supported``` is a used to render video content on the screen with play control
* The use of anchor tag can be seen as ```Desired content to anchor``` the ```target``` attribute with value ```"_blank"``` opens a new window/tab whenever the anchor tag content is clicked on in the browser
* The use of `````` to introduce comments into html file
* `````` vs `````` if we are introducing container for sole purpose of styling one, the use `````` is sufficient, else, `````` should be use.
### Standard HTML Structure
* The html document starts with a document declaration `````` to indicate the file is an HTML 5 documents
* The ``````is initiated to house the full html structure
* ```./``` in the sample code ```Contact``` tells the browser to look for the ```contact.html``` file in the current directory/folder
### Understanding HTML Table
* The `````` element creates a table.
* The `````` element adds rows to a table.
* To add data to a row, you can use the `````` element.
* Table headings clarify the meaning of data. Headings are added with the `````` element.
* Table data can span columns using the ```colspan``` attribute.
* Table data can span rows using the ```rowspan``` attribute.
* Tables can be split into three main sections: a head, a body, and a footer.
* A table’s head is created with the `````` element.
* A table’s body is created with the `````` element.
* A table’s footer is created with the `````` element.
Sample code snippet below:
```html
Quarter
Revenue
Costs
Q1
$10M
$7.5M
Q2
$12M
$5M
Total
$22M
$12.5M
```
### Typography Review
* Typography is the art of arranging text on a page.
* Text can appear bold or thin with the ``font-weight`` property.
* Text can appear in italics with the ``font-style`` property.
* The vertical spacing between lines of text can be modified with the ``line-height`` property.
* Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
* Fallback fonts are used when a certain font is not installed on a user’s computer.
* The ``word-spacing`` property changes how far apart individual words are.
* The ``letter-spacing`` property changes how far apart individual letters are.
* The ``text-align`` property changes the horizontal alignment of text.
* Google Fonts provides free fonts that can be used in an HTML file with the tag or the ``@font-face`` property.
* Local fonts can be added to a document with the @font-face property and the path to the font’s source.