diff --git a/docs/frontend/css.md b/docs/frontend/css.md index 3cc105f..88fdf31 100644 --- a/docs/frontend/css.md +++ b/docs/frontend/css.md @@ -22,6 +22,8 @@ This block of code would turn all of the level 1 headings in the associated HTML - `color:` is the **property** - the thing we are trying to format. Other examples of properties include `font-size` or `margin`. - `red;` is the value of the property - specifically what we are setting the property to be. +For a good general overview of CSS, check out [CSS in 100 Seconds by Fireship](https://www.youtube.com/watch?v=OEV8gMkCHXQ&pp=ygUSY3NzIGluIDEwMCBzZWNvbmRz). + ## Ways to add CSS to Your HTML Document There are 3 ways to add CSS to an HTML doc: @@ -126,12 +128,3 @@ For further layout options, check out CSS Grid and CSS Flexbox. Here are some re - Grid: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Flexbox: [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-tricks.com/snippets/css/complete-guide-grid/) - -## Frameworks - -It can be a tedious and time-consuming process to build up a presentable page starting from scratch with CSS. **Frameworks**, which are essentially CSS libraries, make it much easier. Here are some of the more popular Frameworks to get you started: - -- [Material UI](https://mui.com/) -- [Bootstrap](https://getbootstrap.com/) -- [Tailwind CSS](http://tailwindcss.com) -- [Bulma](http://bulma.io) diff --git a/docs/frontend/html-tag.png b/docs/frontend/html-tag.png new file mode 100644 index 0000000..cdb49d2 Binary files /dev/null and b/docs/frontend/html-tag.png differ diff --git a/docs/frontend/html.md b/docs/frontend/html.md index 6bd2d72..cfd5d55 100644 --- a/docs/frontend/html.md +++ b/docs/frontend/html.md @@ -6,14 +6,27 @@ sidebar_position: 1 HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. -## Learning Resources +## The Anatomy of HTML -### Videos +HTML is made up of a bunch of tags. This is a tag: -- [HTML in 100 Seconds](https://www.youtube.com/watch?v=ok-plXXHlWw) -- [Learn HTML in 1 hour 🌎](https://www.youtube.com/watch?v=HD13eq_Pmp8) + -### Articles +You can nest tags inside each other and put them next to each other. Tags are displayed from left to right and top to bottom. -- [Getting started with HTML - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) -- [HTML Basics for Beginners - FreeCodeCamp](https://www.freecodecamp.org/news/html-basics-for-beginners) +For example: + +```HTML +
This is a paragraph.
+This is a bolded link. +``` + +This is a paragraph.
+This is a bolded link. + +{siteConfig.tagline}
++ {siteConfig.tagline} +