{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/html/further-reading","result":{"data":{"mdx":{"id":"d219ca5e-2d26-5adf-87c1-6e780fc13cdb","excerpt":"📓  MDN: Web forms - Working with user data 📽️  Khan Academy: HTML basics HTML Tables 💡 Tables are used in HTML documents to present tabular data. The reason…","fields":{"slug":"/html/further-reading/"},"frontmatter":{"title":"Further Reading","description":"Further Reading | HTML | RefugeesCode","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Further Reading\",\n  \"description\": \"Further Reading | HTML | RefugeesCode\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD3 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/Forms\"\n  }, \"MDN: Web forms - Working with user data\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCFD\\uFE0F \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics\"\n  }, \"Khan Academy: HTML basics\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML Tables\")), mdx(\"p\", null, \"\\uD83D\\uDCA1 Tables are used in HTML documents to present tabular data. The reason why we haven't dedicated a whole chapter in this material to show you how to build them it's because they are becoming less and less used in favor of other technologies such as Flexbox and CSS Grid (don't worry about this, you'll learn what these are later on). However, we still think it's valuable and interesting that you know them, since, as in everything, there may be situations where you could still use them. If you're interested, read the following articles to learn about them:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://css-tricks.com/complete-guide-table-element/\"\n  }, \"A Complete Guide to the Table Element\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://learn.shayhowe.com/html-css/organizing-data-with-tables/\"\n  }, \"Organising data with Tables\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://adrianroselli.com/2017/11/hey-its-still-ok-to-use-tables.html\"\n  }, \"Hey, It's Still OK to Use Tables\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075\"\n  }, \"How to create responsive tables in a modern way\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML emails\")), mdx(\"p\", null, \"\\uD83D\\uDCA1 You want your emails to look good in every environment. Especially nowadays, when roughly half of all emails is opened on a mobile device, responsive design is essential to commercial email senders. In this article, we'll show you the basic principle of making a responsive HTML email using CSS Media Queries and provide you with an example. Even though we haven't taught you CSS yet, go and read the following article to know more about how emails are coded nowadays.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/\"\n  }, \"An Introduction To Building And Sending HTML Email For Web Developers\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Media\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\"\n  }, \"Video and Audio content\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/news/video-audio-in-html-a-short-guide-69f721878b47/\"\n  }, \"How to embed video and audio in your HTML\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://flaviocopes.com/html-video-tag/\"\n  }, \"The HTML video tag\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Extra material\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.codecademy.com/courses/learn-html/lessons/intro-to-html/exercises/intro\"\n  }, \"Codecademy intro to HTML\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[]}},"pageContext":{"slug":"/html/further-reading/","prev":{"label":"HTML Section project","link":"/html/html-section-project"},"next":{"label":"Introduction","link":"/css/introduction"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/html/further-reading.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}