WIFI cowork @ lisboa
PASSWORD: 1familiainvicta
http://www.sciencemag.org/H6sites/default/files/audio/Magneta-audio.mp3
HTTP / HTML / UI / CSS
JS
- Development types
- Hello World
- HTTP
- Front-end vs Back-end
- HTML
- UI Design
- CSS
- Wine 🍷
http://www.google.pt/search?q=lisbon
- scheme:
http - authority:
www.google.pt - path:
search?q=lisbon
https://www.facebook.com/shecodesio/
- scheme:
https - authority:
www.facebook.com - path:
shecodesio
https://www.fb.com
- scheme:
https - authority:
www.fb.com
image/gif
video/ogg
text/html
text/css
application/javascript
application/json
-
Headings
-
Paragraphs
This is a paragraph
-
Text Styling this is italic this is bold
-
Self closing tags
-
List items
- Paris
- Lisbon
- Madrid
Go to https://codepen.io, and create this test in HTML:
<a href="https://shecodes.io/" target="_blank>
This is a link
</a>
<img src="http://instagram.com/cat.png" />
https://shecodes.io/day1 https://shecodes.io/day2 https://shecodes.io/day3
Link days to https://shecodes.io/ and add a random image
- Inspect elements
- Source page
-
HTML file
-
HTML elements
<title>Title of the document</title> The content of the document......
Move your Codepen exercise into an HTML file and open it in a browser
<h1 style="text-decoration: underline"></h1>
Underline the heading using inline styles
<style>
h1 {
text-decoration: underline;
}
</style>
Underline the heading using a CSS selector
h1 {
text-align: center;
font-size: 13px;
font-weight: 500;
color: red;
text-decoration: underline;
background-color: green;
}
Style your HTML like so
Style elements using these properties
- Pseudo colors color: red; color: green;
- HEX color: #32529f;
- RGBA
Title color #885df1 Sub header color: #272044
Background color: #f6f2fe
color: #885df1;
background-color: #f6f2fe;
<div></div>
<span></span>
<ul>
<li class="europe">
Paris
</li>
<li>
New York
</li>
<li class="europe">
Lisbon
</li>
</ul>
a.europe {
color: blue;
}
Target each day with CSS classes and apply different styling
Recreate She Codes header by Tonight midnight!
students = ['Isabel PC','Filipa','Rita','Sofia','Catarina C','Elina','Sandra','Maria M','Carolina','Ana','Deanna','Andrea','Carla','Anabela','Isabel P','Sara','Lucilia','Catarina B','Raquel','Daniela','Mariana','Joana','Lea','Nathalia','Maria J', 'Matt']
students.shuffle.each_slice(2).each do |student_one, student_two|
puts "#{student_one} with #{student_two}"
end
a.special
a#very-special {}
a:hover {}
a.special.highlighted {}
.special {}
a, .special {}
li .special {}
Change styling on hover https://goo.gl/ax3by1
https://codepen.io/matthieua/pen/YewoNM
colors:
purple: #885df1
pink: #ef5d98
border-radius: 20px;
border-radius: 50% 50% 0 0;
Add rounded corners to the button
Add some shadow to the button, on hover as well
/* A gradient tilted 45 degrees,
starting blue and finishing red */
background: linear-gradient(45deg, blue, red);
Add background gradient to the button from https://webgradients.com/
a {
transition: all 200ms ease;
opacity: 1;
color: blue;
}
a:hover {
opacity: 0.7;
color: red;
}
| linear | The animation has the same speed from start to end |
|---|---|
| ease | Default value. The animation has a slow start, then fast, before it ends slowly |
| ease-in | The animation has a slow start |
| ease-out | The animation has a slow end |
| ease-in-out | The animation has both a slow start and a slow end |
| cubic-bezier(n,n,n,n) | http://easings.net/ |
Recreate She Codes section in HTML/CSS
JavaScript Project — 🍷
