Add course content for HTML

Overview

This module is intended to cover the basics of HTML. The topic should cover the topics specified below (but you can also add other topics that fit the scope of this module). The goal here is that course takers will end up with working knowledge on how HTML works, what is the structure of an HTML element, the structure of an HTML document and to get an introduction to semantic HTML and its importance for accessibility.

• The anatomy of the HTML Element
• The anatomy of the HTML Document
• Semantic HTML
  • Why should we use it?
  • Accessibility from day one!
• Consuming external resources through links

Guidelines

Partial contributions are welcome! You are not expected to cover or provide all the content for this topic, all types of contributions are encouraged!

You are encouraged to take credit for your contribution, drop your name in the list of contributors for each topic (found in the topic's readme.md file)

All content must be added to the 1_html folder.

When submitting your PR, if possible, provide a rough estimate of how long it will take to consume the content.

Please update the links in the table of contents in the main README.md file as part of your PR.

File structure

When creating course content, please use the following file structure.

 Expanding-on-HTML-and-CSS
 |-- assets
 |    |--> Module's common images and files
 |-- html
 |    |-- readme.md -> topic content
 |    |-- assets
 |    |     |--> Topic specific assets 
 |    |-- exercises
 |    |     |--> Topic specific exercises (if any) 

On contributing content and Plagiarism

Please be mindful with the content you include. If you quote or use content created by someone else, always give credit to the original author and make sure that you have their permission to share their content.

Contributions that copy commercial courses, or that fail to include references to the original source will be removed or declined.

This Repo is meant to be Open source, I'm looking for an experienced OS contributor/maintainer to help me license these repo.

Please add a blurb with the licence that you add and why you picked it.

Add walkthrough guide for the section "Styling our webpage."

Overview

This module is intended to cover the hands-on exercise for building the CSS stylesheet for our static website. This task depends on Issue 3 as the walkthrough should explain how to build the CSS styles for the website.

Guidelines

Partial contributions are welcome! You are not expected to cover or provide all the content for this topic, all types of contributions are encouraged!

You are encouraged to take credit for your contribution, drop your name in the list of contributors for each topic (found in the topic's readme.md file)

All content must be added to the styling-our-webpage folder.

When submitting your PR, if possible, provide a rough estimate of how long it will take to consume the content.

Please update the links in the table of contents in the main README.md file as part of your PR.

File structure

When creating course content, please use the following file structure.

 Expanding-on-HTML-and-CSS
 |-- assets
 |    |--> Module's common images and files
 |-- 4_styling-our-webpage
 |    |-- readme.md -> topic content
 |    |-- assets
 |    |     |--> Topic specific assets 
 |    |-- exercises
 |    |     |--> Topic specific exercises (if any) 

On contributing content and Plagiarism

Please be mindful with the content you include. If you quote or use content created by someone else, always give credit to the original author and make sure that you have their permission to share their content.

Contributions that copy commercial courses, or that fail to include references to the original source will be removed or declined.

Build a static website!

Overview

This aims to be the end result that the coders will build as they progress through the course. It is intended to be a good looking, static website (No Javascript) with very limited use of external libraries.

The static website should contain

• A Navbar with some links to other sections of the site.
• A button that links to a different HTML file.
• Should use semantic HTML for the different sections.
• Basic HTML elements like headers, paragraphs, lists, buttons, icons.
• Have HTML at least one element with absolute or fixed position.
• The Noob Coding logo found here
• The styling should be simple but nice.

Plase note: This is a beginners course so the use of CSS should be crips and educational, limiting the use of nested rules and complex query selectors. Please avoid using Flex or Grid. These will be covered in more advanced courses.

Guidelines

Partial contributions are welcome! You are not expected to cover or provide all the content for this topic, all types of contributions are encouraged!

You are encouraged to take credit for your contribution, drop your name in the list of contributors for each topic (found in the topic's readme.md file)

All content must be added to the website folder.

When submitting your PR, if possible, provide a rough estimate of how long it will take to consume the content.

Please update the links in the table of contents in the main README.md file as part of your PR.

File structure

When creating course content, please use the following file structure.

 Expanding-on-HTML-and-CSS
 |-- assets
 |    |--> website
 |    |       |--> index.html
 |    |       |--> index.css

On contributing content and Plagiarism

Please be mindful with the content you include. If you quote or use content created by someone else, always give credit to the original author and make sure that you have their permission to share their content.

Contributions that copy commercial courses, or that fail to include references to the original source will be removed or declined.

Add walkthrough guide for the section "Building the skeleton of our webpage."

Overview

This module is intended to cover the hands-on exercise for building the HTML content for a static website. This task depends on Issue 3 as the walkthrough should explain how to build the HTML markup of the website.

Guidelines

Partial contributions are welcome! You are not expected to cover or provide all the content for this topic, all types of contributions are encouraged!

You are encouraged to take credit for your contribution, drop your name in the list of contributors for each topic (found in the topic's readme.md file)

All content must be added to the 2_building-our-website folder.

When submitting your PR, if possible, provide a rough estimate of how long it will take to consume the content.

Please update the links in the table of contents in the main README.md file as part of your PR.

File structure

When creating course content, please use the following file structure.

 Expanding-on-HTML-and-CSS
 |-- assets
 |    |--> Module's common images and files
 |-- 2_building-our-webpage
 |    |-- readme.md -> topic content
 |    |-- assets
 |    |     |--> Topic specific assets 
 |    |-- exercises
 |    |     |--> Topic specific exercises (if any) 

On contributing content and Plagiarism

Please be mindful with the content you include. If you quote or use content created by someone else, always give credit to the original author and make sure that you have their permission to share their content.

Contributions that copy commercial courses, or that fail to include references to the original source will be removed or declined.

Expand course content for CSS

Overview

This module is intended to cover the basics of CSS. The topic should cover the topics specified below (but you can also add other topics that fit the scope of this module).

The goal here is that course takers will end up with working knowledge on how CSS works, what is the syntax, what selectors are and what are the most common CSS selectors (expanding to targeting state with pseudo-selectors), explanation of the box model and so on.

• Why that name?
• CSS Syntax
• CSS basic selectors (with a note about specificity)
• The Box Model

Guidelines

Partial contributions are welcome! You are not expected to cover or provide all the content for this topic, all types of contributions are encouraged!

You are encouraged to take credit for your contribution, drop your name in the list of contributors for each topic (found in the topic's readme.md file)

All content must be added to the 3_css folder.

When submitting your PR, if possible, provide a rough estimate of how long it will take to consume the content.

Please update the links in the table of contents in the main README.md file as part of your PR.

File structure

When creating course content, please use the following file structure.

 Expanding-on-HTML-and-CSS
 |-- assets
 |    |--> Module's common images and files
 |-- 3_css
 |    |-- readme.md -> topic content
 |    |-- assets
 |    |     |--> Topic specific assets 
 |    |-- exercises
 |    |     |--> Topic specific exercises (if any) 

On contributing content and Plagiarism

Please be mindful with the content you include. If you quote or use content created by someone else, always give credit to the original author and make sure that you have their permission to share their content.

Contributions that copy commercial courses, or that fail to include references to the original source will be removed or declined.