diff --git a/00-HTML-CSS-basics/README.md b/00-HTML-CSS-basics/README.md new file mode 100644 index 00000000..2b0445ba --- /dev/null +++ b/00-HTML-CSS-basics/README.md @@ -0,0 +1,22 @@ +## How could you add weight to the global font definition to win over the classes added by point 3? + +I could use something like this: +``` +* { + font-weight: bold; +} +``` +I also could add !important to the end of property value (but it's not recommended as possible to use), like this: +``` +html { + font-weight: bold!important; +} +``` +## Imagine there is a declaration like class=”oh-no-inline-styles” style=”background:red” and you need to change the background to green without changing the inline style. How could you accomplish this? + +Inline styles always override styles written in css files, so here we can use !important: +``` +oh-no-inline-styles { + background: green!important; +} +``` \ No newline at end of file diff --git a/00-HTML-CSS-basics/basics-css.html b/00-HTML-CSS-basics/basics-css.html new file mode 100644 index 00000000..da3f3e65 --- /dev/null +++ b/00-HTML-CSS-basics/basics-css.html @@ -0,0 +1,87 @@ + + + + + + + Basics CSS + + + + + + + + + + + + + + + + +
+
+

Welcome to my site

+
+
+ +
+
+
+

My Blogs

+
+
+

Blog N°1

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed similique, minus cum reiciendis ut incidunt odit ea dolor possimus tempora. Eligendi ipsa qui, cumque odio magnam nam, iusto pariatur veniam.

+
+
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + diff --git a/00-HTML-CSS-basics/css/mock-up.css b/00-HTML-CSS-basics/css/mock-up.css new file mode 100644 index 00000000..8f33d83a --- /dev/null +++ b/00-HTML-CSS-basics/css/mock-up.css @@ -0,0 +1,144 @@ +/** GLOBAL **/ +/* apply a natural box layout model to all elements, but allowing components to change */ +html { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +.container { + margin: 0 auto; + width: 98%; +} + +/** HELPER CLASSES**/ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/** HEADER **/ + +.introduction { + margin-bottom: 60px; +} + +.site-title { + float: left; + font-weight: bold; + padding-left: 20px; + width: 30%; +} + +.site-information { + float: right; + padding: 0 200px 0 20px; + width: 70%; +} + +@media all and (max-width: 768px) { + .site-title { + float: none; + } + + .site-information { + float: none; + width: 100%; + padding: 0 20px; + } +} + +.site-information p span { + font-weight: bold; +} + +/** ALBUMS **/ + +.albums-list li { + float: left; + padding: 10px; + width: 33.3%; +} + +@media all and (max-width: 600px){ + .albums-list li { + width: 100%; + } +} + +@media all and (max-width: 1020px) and (min-width: 600px){ + .albums-list li { + width: 50%; + } +} + +.album { + position: relative; +} + +.album img { + filter: gray; + -moz-filter: grayscale(1); + -ms-filter: grayscale(1); + -webkit-filter: grayscale(1); + -moz-transition: all .5s ease-in-out; + -ms-transition: all .5s ease-in-out; + -webkit-transition: all .5s ease-in-out; +} + +.screen { + background-color: rgba(0,0,0,0.5); + left: 0; + top: 0; + height: 30%; + width: 100%; + position: absolute; + opacity: 0; + z-index: 1000; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +.album a:hover .screen, +.album a:hover img { + opacity: 1; + -moz-filter: grayscale(0); + -ms-filter: grayscale(0); + -webkit-filter: grayscale(0); +} + +.title { + color: #fff; + font-size: 16px; + font-weight: bold; + margin-left: 10px; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +.album img { + width: 100%; +} + + diff --git a/00-HTML-CSS-basics/css/normalize.css b/00-HTML-CSS-basics/css/normalize.css new file mode 100644 index 00000000..47b010e4 --- /dev/null +++ b/00-HTML-CSS-basics/css/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/00-HTML-CSS-basics/css/style.css b/00-HTML-CSS-basics/css/style.css new file mode 100644 index 00000000..d4f60136 --- /dev/null +++ b/00-HTML-CSS-basics/css/style.css @@ -0,0 +1,91 @@ +/** GLOBAL CLASSES **/ +/* apply a natural box layout model to all elements, but allowing components to change */ +html { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + font-size: 14px; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/** MAIN HEADER **/ + +.header { + background-color: magenta; + color: #fff; + font-size: 46px; + padding: 20px 0; + text-align: center; + text-transform: uppercase; +} + +/** MAIN CONTENT**/ + +main { + margin-top: 20px; +} + +.navigation { + background-color: blue; + float: left; + font-size: 12px; + margin: 0 1%; + padding: 0 10px 10px 10px; + width: 15%; +} + +.navigation a { + color: #fff; + display: block; + font-weight: bold; + text-decoration: none; +} + +.content { + float: left; + font-size: 14px; + margin: 0 1%; + width: 60%; +} + +.sidebar { + background-color: magenta; + float: left; + font-size: 10px; + margin: 0 1%; + padding: 0 10px; + width: 19%; +} + +/** FOOTER **/ + +.footer { + background-color: magenta; + bottom: 0; + color: #fff; + font-size: 10px; + margin-top:30px; + position: fixed; + width: 100%; +} + +.footer .copyright { + padding: 20px 0; + text-align: center; +} + +/** HELPER CLASSES**/ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/header-list.html b/00-HTML-CSS-basics/header-list.html new file mode 100644 index 00000000..900a8d73 --- /dev/null +++ b/00-HTML-CSS-basics/header-list.html @@ -0,0 +1,23 @@ + + + + + + + HTML-CSS-Basics Exercises + + + +
+

My todo list

+
    +
  1. Do some Bootcamp's exercises
    2. +
  2. Clean the kitchen and the bathroom of my department
    3. +
  3. Eat lunch
    4. +
  4. Continue with some exercises
    5. +
  5. Go to work
    6. +
  6. Eat dinner and watch a movie with my gf
    7. +
+
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/img/alien.png b/00-HTML-CSS-basics/img/alien.png new file mode 100644 index 00000000..aa8695ba Binary files /dev/null and b/00-HTML-CSS-basics/img/alien.png differ diff --git a/00-HTML-CSS-basics/img/example.ico b/00-HTML-CSS-basics/img/example.ico new file mode 100644 index 00000000..c1bd34c3 Binary files /dev/null and b/00-HTML-CSS-basics/img/example.ico differ diff --git a/00-HTML-CSS-basics/img/mock1.jpg b/00-HTML-CSS-basics/img/mock1.jpg new file mode 100644 index 00000000..a0f267a7 Binary files /dev/null and b/00-HTML-CSS-basics/img/mock1.jpg differ diff --git a/00-HTML-CSS-basics/img/mock2.jpg b/00-HTML-CSS-basics/img/mock2.jpg new file mode 100644 index 00000000..0acdd05a Binary files /dev/null and b/00-HTML-CSS-basics/img/mock2.jpg differ diff --git a/00-HTML-CSS-basics/img/mock3.jpg b/00-HTML-CSS-basics/img/mock3.jpg new file mode 100644 index 00000000..13738d66 Binary files /dev/null and b/00-HTML-CSS-basics/img/mock3.jpg differ diff --git a/00-HTML-CSS-basics/img/mock4.jpg b/00-HTML-CSS-basics/img/mock4.jpg new file mode 100644 index 00000000..2680b09c Binary files /dev/null and b/00-HTML-CSS-basics/img/mock4.jpg differ diff --git a/00-HTML-CSS-basics/img/mock5.jpg b/00-HTML-CSS-basics/img/mock5.jpg new file mode 100644 index 00000000..e3d80189 Binary files /dev/null and b/00-HTML-CSS-basics/img/mock5.jpg differ diff --git a/00-HTML-CSS-basics/img/mock6.jpg b/00-HTML-CSS-basics/img/mock6.jpg new file mode 100644 index 00000000..c7ea842b Binary files /dev/null and b/00-HTML-CSS-basics/img/mock6.jpg differ diff --git a/00-HTML-CSS-basics/media-form.html b/00-HTML-CSS-basics/media-form.html new file mode 100644 index 00000000..b0032003 --- /dev/null +++ b/00-HTML-CSS-basics/media-form.html @@ -0,0 +1,76 @@ + + + + + + + HTML-CSS-Basics Exercises + + + +

Image

+
+
+ Alien +
+
+

Video

+
+ +
+

Audio

+
+ +

+
+
+ Sign up + + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ +
+ + +
+ + + + +
+
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/media/audio/Alborosie.mp3 b/00-HTML-CSS-basics/media/audio/Alborosie.mp3 new file mode 100644 index 00000000..8a902651 Binary files /dev/null and b/00-HTML-CSS-basics/media/audio/Alborosie.mp3 differ diff --git a/00-HTML-CSS-basics/media/video/DubInc-MyFreestyle.MP4 b/00-HTML-CSS-basics/media/video/DubInc-MyFreestyle.MP4 new file mode 100644 index 00000000..41cdfd27 Binary files /dev/null and b/00-HTML-CSS-basics/media/video/DubInc-MyFreestyle.MP4 differ diff --git a/00-HTML-CSS-basics/mock-up.html b/00-HTML-CSS-basics/mock-up.html new file mode 100644 index 00000000..59782589 --- /dev/null +++ b/00-HTML-CSS-basics/mock-up.html @@ -0,0 +1,118 @@ + + + + + + + Mock Up + + + + + + + + + + + + + +
+
+
+

Dub Incorporation

+
+
+

+ Is a reggae band from Saint-Étienne, France together since 1997. They combine a range of styles, including dancehall, dub, ska and rap. Their music is also influenced by African music with their songs being sung in a mixture of French, English and Kabyle. The band has released six studio albums. The first three, Diversité (2003), Dans le décor (2005) and Afrikya (2008) to Dub Incorporation. +

+

+ Follow us on Twitter, Facebook and Pinterest or subscribe to our RSS Feed +

+
+
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/table.html b/00-HTML-CSS-basics/table.html new file mode 100644 index 00000000..94ec027b --- /dev/null +++ b/00-HTML-CSS-basics/table.html @@ -0,0 +1,50 @@ + + + + + + + HTML-CSS-Basics Exercises + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
My Expenses
ExpensesTotal
Gasoline$2200
Garage$1200
Insurance$1300
Patent$750
+ + \ No newline at end of file