Added intial files for hindi translation

This commit is contained in:
Sanjay
2020-12-28 00:01:05 +05:30
parent e673998d7e
commit cc833ce34f
82 changed files with 1794 additions and 0 deletions

View File

@@ -0,0 +1,17 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. [Spans and Divs are interchangeable]
- [ ] [true]
- [ ] [false]
2. [The head of an HTML doc can contain:]
- [ ] [the title tag]
- [ ] [metadata]
- [ ] [all the above]
3. [You can't use deprecated tags in your markup]
- [ ] [true]
- [ ] [false]
- [ ] [false, but they have been deprecated for good reason]

View File

@@ -0,0 +1,19 @@
*A warm-up quiz about HTML*
Complete this quiz in class
1. HTML stands for 'HyperText Mockup Language'
- [ ] [true]
- [ ] [false]
2. All HTML tags need both opening and closing tags
- [ ] [true]
- [ ] [false]
3. Using semantic markup is most important for
- [ ] [code readability]
- [ ] [screen readers]
- [ ] [maintenance]

View File

@@ -0,0 +1,11 @@
# Practice your HTML: Build a blog mockup
## Instructions
Imagine you are designing, or redesigning, your personal web site. Create a graphical markup of your site, and then write down the HTML markup you would use to build out the various elements of the site. You can do this on paper, and scan it, or use software of your choice, just make sure to hand-code the HTML markup.
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |

View File

@@ -0,0 +1,21 @@
*Complete this quiz after the lesson by checking one answer per question.*
You will need to reference the following learn module to complete the quiz:
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
1. [You can write CSS directly in the head section of your HTML file]
- [ ] [true]
- [ ] [false]
1. [It's always necessary to include CSS in your app]
- [ ] [true]
- [ ] [false]
- [ ] [false, but if you want it to look good you need CSS]
1. [Which browser tool can be used to inspect CSS?]
- [ ] [Elements]
- [ ] [Styles]
- [ ] [Network]

View File

@@ -0,0 +1,18 @@
*A warm-up quiz about CSS*
Complete this quiz in class
1. HTML elements must have either a class or an id in order to be styled
- [ ] [true]
- [ ] [false]
2. CSS stands for 'Complete Style Sheets'
- [ ] [true]
- [ ] [false]
3. CSS can be used to create animations
- [ ] [true]
- [ ] [false]

View File

@@ -0,0 +1,11 @@
# CSS Refactoring
## Instructions
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |

View File

@@ -0,0 +1,18 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. [The DOM is a model to represent a document on the web]
- [ ] [true]
- [ ] [false]
2. [Use JavaScript closures to perform the following:]
- [ ] [write functions within functions]
- [ ] [enclose the DOM]
- [ ] [close script blocks]
3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______]
- [ ] [arrays]
- [ ] [scope]
- [ ] [functions]

View File

@@ -0,0 +1,18 @@
*A warm-up quiz about the DOM*
Complete this quiz in class
1. The DOM stands for 'Document Object Management'
- [ ] [true]
- [ ] [false]
2. The DOM can be thought of as a tree
- [ ] [true]
- [ ] [false]
3. Using the Web API, you can manipulate the DOM
- [ ] [true]
- [ ] [false]

View File

@@ -0,0 +1,11 @@
# Work a bit more with the DOM
## Instructions
Research the DOM a little more by 'adopting' a DOM element. Visit the MSDN's [list of DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.
## Rubric
| Criteria | Exemplary | Adequate | Needs Improvement |
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
| | Paragraph write-up is presented, with example | Paragraph write-up is presented, without example | No writeup is presented |

View File

@@ -0,0 +1,34 @@
# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction.
![my terrarium](images/screenshot_gray.png)
# Lessons
1. [Intro to HTML](./1-intro-to-html/README.md)
2. [Intro to CSS](./2-intro-to-css/README.md)
3. [Intro to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
## Credits
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
## Deploy your Terrarium
You can deploy, or publish your terrarium to the web using Azure Static Web Apps.
1. Fork this repo
2. Press this button
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.