HTML + CSS

HTML + CSS Felipe Soares e Jullia Saad

Quem é esse cara? Felipe Luiz Soares Web Developer at
Codeminer 42 GitHub: https://github.com/felipesoares6 SpeakerDeck: https://speakerdeck.com/felipesoares6

E quem é essa mina? Jullia Saad ADS - Fatec
Sorocaba Desenvolvedora front-end - Tegra GitHub: https://github.com/julliasaad/

How the web works

Front-end and Back-end

Beginner’s Guide https://www.codeschool.com/beginners-guide-to- web-development

github.com/felipesoares6/Curso-Fatec-HTML-CSS Where is the code?

WTF is GIT? and GitHub Git GitHub

HTML <HyperText Markup Language>

CSS {Cascading Style Sheets}

Definição bem básica <definição> Linguagem de marcação utilizada na construção
de páginas na Web </definição>

Definição mais básica ainda Definição { Linguagem de estilo utilizada
para apresentação de páginas web } ; ;

Então, tags <head> <!DOCTYPE html> <body> <html> <header> <footer> <section>
<title> <p> <a> <img> <div> <strong> <ul> <ol> <li> <span> <h1> <meta charset=”utf-8”>

<!DOCTYPE html> Não é uma tag html! Instrução para o
browser sobre a versão HTML usada.

Conjunto de caracteres utilizados para escrever o documento. <meta charset=”utf-8”
>

Alguma pergunta?

VOCÊS JÁ SABEM TUDO <Sobre estrutura HTML>

<h1> cepo de madeira </h1> <h2> cepo de madeira </h2>
<h3> cepo de madeira </h3>

<p> hoje eu vou ensinar uma brincadeira com palitos de
fósforo, É O SEGUINTE, vc tem que pegar um palito de fósforo e raspar essa camada preta aqui da ponta </p>

É bom que vc tenha um martelo <strong> </strong> BEM
FORTE

<em> </em> BEM DURO

<li> carro 1 </li> <ul> </ul> <li> carro 2 </li>

Nenhuma pergunta mesmo? Sério?

VOCÊS JÁ SABEM TUDO <Sobre HTML>

<section> </section> DESTA QUE DES TAQUE

fontawesome.io Ícones legais É de graça tem em vários sites
CDN é uma fonte birl

fontawesome.io https://www.bootstrapcdn.com/fontawesome/ http://fontawesome.io/ SITE CDN

HTML HTML + CSS

Link CSS <link rel="stylesheet" href="css/style.css">

Seletor

How to CSS h2 { font-size: 38px; font-family: Arial; }

How to CSS h1, h2 { font-size: 38px; font-family: Arial;
}

How to CSS header h2 { font-size: 38px; font-family: Arial;
}

Responsividade

Responsividade <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"/>

px vh vw view height view width pixel AQUELE 1%

Cores color: red; color: #20009a; color: rgb(21,255,0);

Cores color: rgb(21,255,0); color: rgba(21,255,0,0.7); R(ed)G(reen)B(lue)A(lpha)

.class .wow { min-height: 100vh; text-align: center; } <section class=”wow”>
<h1></h1> <img src=”birl.png> </section>

#id #wow { min-height: 100vh; text-align: center; } <section id=”wow”>
<h1></h1> <img src=”birl.png> </section>

Alguma pergunta?

Padding, Margin e Border border margin padding

How to Set Margin/Padding padding: 10px; margin: 10px 30px; margin:
10px 30px 5px 12px; top/down left/right top/down/left/right top right down left

Display

FLEX BOX

Display FLEEEEEEEEEEEEEEEEXXXX Elemento pai que ganhará a oportunidade gloriosa de
ter seu display como FLEX { display: flex; flex-flow: row; (default) }

Display FLEEEEEEEEEEEEEEEEXXXX Elemento pai { flex-flow: column; justify-content: center; align-items:
center; }

Alguma pergunta sobre o famigerado FLEXBOX?

<section> </section> DESTA QUE DES TAQUE

<section> </section> CON TATO SEM TATO

VAMO DE CSS

a:hover

a:hover a { transition: all .2s ease; background-color: rgba(0,0,0, .7);
} slow start, then fast, then end slowly transition-duration all attributes

a:hover a: hover { background-color: rgba(0,0,0, .9); }

CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS
CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS

Responsividade

Responsividade @media (min-width:768px) { }

Responsividade @media (min-width:1024px) { }

WOW WOW WOW MT BEM TOP Vai embora cara

speakerdeck.com/felipesoares6 Onde estão os slides?

https://goo.gl/forms/2dCp462KuTkJ WwZn1 Responda o formulário!

SO PARTI PRO ABRAÇO

Agora que eu já sei HTML+CSS

O que ta rolando por ai python sorocaba - https://www.meetup.com/pt-BR/Grupy-SP/
guru sorocaba - https://www.meetup.com/pt-BR/GURU-Sorocaba/ hacklab - https://www.facebook.com/hacklabsorocaba/ GDG Sorocaba - https://www.facebook.com/GDGSorocaba/ sorocaba css - https://www.meetup.com/pt-BR/SorocabaCSS/ Node Sorocaba - https://www.meetup.com/pt-BR/Sorocaba-Node-User-Group-SNUG/ WomenTechmakers - https://www.facebook.com/groups/wtmsorocaba/ in.tegra.do - http://www.meetup.com/In-Tegra-Do/ english meetup - http://www.meetup.com/Sorocaba-English-Conversation-Happy-Hours/ rails girls sorocaba - https://www.facebook.com/railsgirlssorocaba/

1st codepen meetup brazil

sorocabacss

A LITTLE PUG say thank you for your time !

HTML + CSS

HTML + CSS

More Decks by Felipe Luiz Soares

Other Decks in Programming

Featured

Transcript