diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.css b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.css new file mode 100644 index 0000000..51fda56 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.css @@ -0,0 +1,28 @@ +html{ + font-family: sans-serif; +} + +section{ + width: 93%; + height: 240px; + margin: 20px auto; + background: purple; + display: flex; +} + +div{ + color: white; + background: orange; + flex: 1; + margin-right: 10px; + text-shadow: 1px 1px 1px black; +} + +div:last-child{ + margin-right: 0; +} + +section, div{ + border: 5px solid rgba(0, 0, 0, 0, 0.85); +} + diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.html b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.html new file mode 100644 index 0000000..af5d6f9 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/flexible_boxes.html @@ -0,0 +1,23 @@ + + + + + + + + + Document + + + +
+
This is a box
+
This is a box
+
This is a box
+
+ + + + + + \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.css b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.css new file mode 100644 index 0000000..50d9c6f --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.css @@ -0,0 +1,18 @@ +img:nth-of-type(1){ + float: left; +} + +h1:nth-of-type(2){ + clear: both; +} + +/* get the first div element */ +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.html b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.html new file mode 100644 index 0000000..e122b44 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/floats.html @@ -0,0 +1,34 @@ + + + + + + + + + Document + + + +

Image + text example + columns

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. +

+

2 column layout example

+
+

First column

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. +

+
+ +
+

Second column

+

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere + sit amet dapibus ut.

+
+ + + \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.css b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.css new file mode 100644 index 0000000..c380b45 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.css @@ -0,0 +1,25 @@ +body { + width: 500px; + margin: 0 auto; + } + + p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; + } + + .positioned1{ + position: relative; + background: yellow; + top: 30px; + left: 30px; + } + + .positioned2{ + position: absolute; + background: yellow; + top: 30px; + left: 30px; + } \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.html b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.html new file mode 100644 index 0000000..f8834e8 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/positioning.html @@ -0,0 +1,27 @@ + + + + + + + + + Document + + + +

Positioning

+ +

I am a basic block level element.

+

I am a basic block level element.

+

I am a basic block level element.

+ +

Positioning

+ +

I am a basic block level element.

+

I am a basic block level element.

+

I am a basic block level element.

+ + + + \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.css b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.css new file mode 100644 index 0000000..0866ea2 --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.css @@ -0,0 +1,35 @@ +html{ + font-family: sans-serif; +} + +form{ + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input{ + display: table-cell; + margin-bottom: 10px; +} + +form label{ + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input{ + width: 300px; +} + +form p{ + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +} \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.html b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.html new file mode 100644 index 0000000..4bb101d --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/1 - change the location of an element/tables.html @@ -0,0 +1,30 @@ + + + + + + + + + Document + + + +
+

First of all, tell us your name and age.

+
+ + +
+
+ + +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/readme.md b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/readme.md new file mode 100644 index 0000000..394a4de --- /dev/null +++ b/1 - Access and secure data/3 - Apply styling to HTML elements programmatically/readme.md @@ -0,0 +1,27 @@ +# 1 - change-the-location-of-an-element +Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout + +## Introduction to CSS layout + +* Float +* Positioning +* CSS tables +* Flexbox +* Grid + +## Floats + +* Float +* Clear +* Brokes adding padding, etc + * Can be solved using ```box-sizing: border-box;``` + +## Positioning + +## Practical positioning examples + +## Flexbox + +## Grids + +# 2 - apply-tranform diff --git a/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/index.html b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/index.html new file mode 100644 index 0000000..f4f32f4 --- /dev/null +++ b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/index.html @@ -0,0 +1,16 @@ + + + + + + + + + Document + + + + teste + + + \ No newline at end of file diff --git a/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/style.css b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/style.css new file mode 100644 index 0000000..51cab36 --- /dev/null +++ b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/style.css @@ -0,0 +1,47 @@ +/* Simple example */ + +@media (max-width: 800px) +{ + body{ + background-color: lightgoldenrodyellow; + } +} + +@media (min-width: 800px) +{ + body{ + background-color: lightblue; + } +} + +/* Operadores and, or, not and only */ + +@media (min-width: 800px) and (orientation: landscape){ + body{ + background: lightseagreen; + } +} + +@media screen and (min-width: 800px) and (orientation: landscape){ + body{ + background: lightgreen; + } +} + +@media(min-width: 800px), handheld and (orientation: landscape){ + body{ + background: lightslategrey; + } +} + +@media not all and (orientation: portrait){ + body{ + background: yellowgreen; + } +} + +@media only screen{ + body{ + background: lightcyan; + } +} \ No newline at end of file diff --git a/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/index.html b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/index.html new file mode 100644 index 0000000..2bc4518 --- /dev/null +++ b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/index.html @@ -0,0 +1,25 @@ + + + + + + + + + Document + + + + Mozilla Developer Network + + + + + + + \ No newline at end of file diff --git a/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/style.css b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/style.css new file mode 100644 index 0000000..a7451b8 --- /dev/null +++ b/4 - Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/style.css @@ -0,0 +1,22 @@ +/* pseudo-class */ + +a{ + color: blue; +} + +a:visited{ + color: blue; +} + +a:hover, +a:active, +a:focus { + color: darkred; + text-decoration: none; +} + +/* pseudo-element */ + +[href^=http]::after{ + content: ' ⤴'; +} \ No newline at end of file diff --git a/4 - Use CSS3 in applications/readme.md b/4 - Use CSS3 in applications/readme.md new file mode 100644 index 0000000..657d988 --- /dev/null +++ b/4 - Use CSS3 in applications/readme.md @@ -0,0 +1,23 @@ +## Media query + +Referênce: https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries + +* Logical operators + * and, or, not & only (compatibility) +* Media types +* Media features + * color + * color-index + * aspect-ratio + * device-aspect-ratio + * ... + +### Observations + +* It's necessary to specify the 'px' of the sizes. +* Media queries are case insensitive + +## Pseudo-classes + +## Pseudo-elements + diff --git a/readme.md b/readme.md index f94e505..0c537f3 100644 --- a/readme.md +++ b/readme.md @@ -1,14 +1,14 @@ ### Implement and Manipulate Document Structures and Objects (20-25%) -**- [x] Create the document structure by using HTML** +- [x] Create the document structure by using HTML - [x] Structure the UI by using semantic markup, including markup for search engines and screen readers, such as Section, Article, Nav, Header, Footer, and Aside; - [x] create a layout container in HTML -**- [x] Write code that interacts with UI controls** +- [x] Write code that interacts with UI controls - [x] Programmatically add and modify HTML elements; - [x] implement media controls; - [x] implement HTML5 canvas and SVG graphics - [ ] Apply styling to HTML elements programmatically - - [ ] Change the location of an element; + - [x] Change the location of an element; - [ ] apply a transform; - [ ] show and hide elements - [ ] Implement HTML5 APIs @@ -30,22 +30,22 @@ - [ ] Iterate across collections and array items; - [ ] manage program decisions by using switch statements, if/then, and operators; - [ ] evaluate expressions -- [ ]Raise and handle an event +- [ ] Raise and handle an event - [ ] Handle common events exposed by DOM (OnBlur, OnFocus, OnClick); - [ ] declare and handle bubbled events; - [ ] handle an event by using an anonymous function -- [ ]Implement exception handling +- [ ] Implement exception handling - [ ] Set and respond to error codes; - [ ] throw an exception; - [ ] request for null checks; - [ ] implement try-catch-finally blocks -- [ ]Implement asynchronous programming +- [ ] Implement asynchronous programming - [ ] Receive messages from the HTML5 WebSocket API; - [ ] use JQuery to make an AJAX call; - [ ] wire up an event; - [ ] implement a callback by using anonymous functions; - [ ] handle the “this” pointer -- [ ]Create a web worker process +- [ ] Create a web worker process - [ ] Start and stop a web worker; - [ ] pass data to a web worker; - [ ] configure timeouts and intervals on the web worker; @@ -95,16 +95,17 @@ - [ ] Create an animated and adaptive UI - [ ] Animate objects by applying CSS transitions; - [ ] apply 3-D and 2-D transformations; - - [ ] adjust UI based on media queries, including device adaptations for output formats, displays, and representations; hide or disable controls + - [x] adjust UI based on media queries, including device adaptations for output formats, displays, and representations; + - [ ] hide or disable controls - [ ] Find elements by using CSS selectors and JQuery - [ ] Choose the correct selector to reference an element; - [ ] define element, style, and attribute selectors; - - [ ] find elements by using pseudo-elements and pseudo-classes + - [x] find elements by using pseudo-elements and pseudo-classes - [ ] Structure a CSS file by using CSS selectors. - [ ] Reference elements correctly; - [ ] implement inheritance; - [ ] override inheritance by using !important; - - [ ] style an element based on pseudo-elements and pseudo-classes + - [x] style an element based on pseudo-elements and pseudo-classes ### Main links used for study: @@ -114,4 +115,6 @@ * [BarbarianMeetsCoding](https://www.barbarianmeetscoding.com/blog/2015/03/15/on-how-i-passed-the-70-480-certification-exam/) -* [MDN](https://developer.mozilla.org/pt-BR/) and [W3schools](https://www.w3schools.com/) \ No newline at end of file +* [MDN](https://developer.mozilla.org/pt-BR/) and [W3schools](https://www.w3schools.com/) + +* [Exam-Labs] (https://www.exam-labs.com/exam/70-480?) \ No newline at end of file