Skip to content

Lucas Avila #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pfeldman wants to merge 24 commits into
base: master
Choose a base branch
from
Open

Lucas Avila #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
41ea3ff
The basics of HTML.
lucas-avila Nov 16, 2017
311d9ac
Add head elements.
lucas-avila Nov 17, 2017
d4f052c
CSS Basics
lucas-avila Nov 19, 2017
352c5ef
Selectors and properties.
lucas-avila Nov 19, 2017
4fb158c
Deleting unnecessary comment.
lucas-avila Nov 19, 2017
d506fd2
Specficity.
lucas-avila Nov 19, 2017
65d52a6
Playing with box-sizing.
lucas-avila Nov 19, 2017
ecf00e6
Layout.
lucas-avila Nov 20, 2017
2b4bf61
Mockup - Layout.
lucas-avila Nov 20, 2017
915797a
JS - Key Point 4:
lucas-avila Nov 21, 2017
df1b661
Exercise 6 - Fetch data from API.
lucas-avila Nov 21, 2017
80402a0
JS - Exercise 7 (On development).
lucas-avila Nov 21, 2017
667057f
[Fix] <br> and percentages problems | Finished exercise 7.
lucas-avila Nov 23, 2017
e65fe06
[Add] Exercise 8 and 9.
lucas-avila Nov 26, 2017
7161092
Search functionality.
lucas-avila Nov 27, 2017
0256d01
[Add] Exercise 12 | Changes some types to const or let.
lucas-avila Nov 29, 2017
98e9f5a
OOP - Done up to exercise 8.
lucas-avila Dec 1, 2017
9738f49
[Add] Modules.
lucas-avila Dec 3, 2017
23936f5
[Update] Useless .html
lucas-avila Dec 3, 2017
4de95a3
[Update] Useless folder.
lucas-avila Dec 3, 2017
348190f
[Add] LocalStogare 1 & 2.
lucas-avila Dec 4, 2017
efed59b
List of movies | Add and Delete
lucas-avila Dec 8, 2017
3749f2a
Edit and Delete functionality | Remains to do: Show more details and …
lucas-avila Dec 10, 2017
1f8a33d
Add movie functionality fixed.
lucas-avila Dec 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
447 changes: 447 additions & 0 deletions 00-HTML-CSS-basics/CSS Basics/basic layout/css/normalize.css
View file
Open in desktop

Large diffs are not rendered by default.

108 changes: 108 additions & 0 deletions 00-HTML-CSS-basics/CSS Basics/basic layout/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
html {
font-size: 14px;
font-family: sans-serif;
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit
}

.grid {
display: flex;
justify-content: center;
text-align: center;
height: 500px;
}

.header {
display: block;
font-size: 46px;
}

header {
background-color: #0190b6;
text-align: center;
border: .1em solid;
border-radius: 1em;
margin: .5em .5em;
}

.content {
width: 50%;
height: 100%;
background-color: #e6e6d6;
margin: 0 10em;
font-size: 14px; /*It's the same as in html but just in case...*/
border: .1em solid;
border-radius: 1em;
}


.navigation {
display: inline-block;
font-size: 12px;
border: .1em solid;
border-radius: .5em;
}

nav {
width: 10%;
background-color: #37ad7e;
}

.sidebar {
display: inline-block;
font-size: 10px;
border: .1em solid;
border-radius: .5em;
}

aside {
background-color: #84cc33;
}

.footer {
font-size: 10px;
}

footer {
background-color: #e13d14;
text-align: center;
border: .1em solid;
border-radius: 1em;
margin: .5em .5em;
}

article {
border: .1em solid;
border-radius: 1em;
margin: .5em .5em;
}

[class$="r"] {
background-color: magenta;
}

[class*="a"]:not([class$="r"]) {
background-color: blue;
}

/* --- Questions ---

-> How could you add weight to the global font definition to win over the classes added by point 3?

One way posible is to add an id="html" and next to the "html" selector add the #html id. The
disadvantage would be that you would have to add and id to every single element to be affected.
Besides, it does not go along the idea of "id". An id should be use to identify one and only
one element.
I can't think of anything else.

-> 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?

I read that there is a sentence: "!important;" that overrides everything and gives more importante
to the property where is located. I don't know if it's a good practice, I have a feeling that it isn't.


*/
53 changes: 53 additions & 0 deletions 00-HTML-CSS-basics/CSS Basics/basic layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="Bootcamp">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="manifest" href="site.webmanifest">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<header class="header">
<h1>Welcome to the Jungle!</h1>
</header>

<div class="grid">
<nav class="navigation">
<ul>
<li>News</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</nav>

<section class="content">
<header>
<h2>Latest news</h2>
</header>

<article>
<p>This is the best article in the world!</p>
</article>

<footer class="footer">
<p>Author: Lucas</p>
</footer>
</section>

<aside class="sidebar">
<p>Here we can add some social networks as facebook, twitter, instagram, etc.</p>
</aside>
</div>

<footer class="footer"></p>2017 © Copyright | Lucas Ávila | Globant - Bootcamp</p></footer>
</body>
</html>
Loading