Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-28 17:14:27
30-Day Money-Back Guarantee
IT & Software Other IT & Software CSS

HTML5 e CSS3: Técnicas Avançadas (Com Flexbox e 5 Projetos)

Conheça os elementos do HTML5, as regras do CSS3, aprenda flexbox e ainda construa projetos web!
Highest Rated
Rating: 4.7 out of 54.7 (165 ratings)
1,009 students
Created by Matheus Battisti
Last updated 10/2020
Portuguese
30-Day Money-Back Guarantee

What you'll learn

  • Os novos elementos do HTML5, como utilizá-los e boas práticas
  • As novas regras e propriedades do CSS3, suas utilizações em projetos e também melhores práticas
  • Dominar o FlexBox, regras da propriedade, exemplos de uso e projeto prático para fixar a técnica
  • Criar projetos web, inclusive com FlexBox
  • Boas práticas de HTML e CSS, como estas linguagens são utilizadas no mercado de trabalho
Curated for the Udemy for Business collection

Requirements

  • Força de vontade para aprender
  • Seria legal saber o que é HTML e CSS, mas não é impeditivo

Description

Após este curso você estará apto a utilizar o que há de mais novo no HTML5, CSS3 e também flexbox.

Porém não para por aí, além da teoria teremos três projetos práticos que você poderá exercitar o conteúdo aprendido no curso, então vamos criar juntos um site primeiramente para treinar HTML5 e CSS3, depois o segundo projeto vai trabalhar com o flexbox, vamos aprender quando e como utilizar o flexbox num projeto web, teremos também um projeto com o intuito de simular uma aplicação web conhecida por todos nós, neste caso eu escolhi o WhatsApp Web e muito mais!

O curso conta com 5 projetos baseados em sites reais, inclusive um dos resultados de pesquisa do Google, onde vamos utilizar flex box também.

Esse curso é pra você se:

  • Quer aprimorar os conhecimentos em HTML/CSS;

  • Quer aprender flexbox da maneira correta e aplicar num projeto do cotidiano de um programador;

  • Quer entrar no mundo da programação web;

  • Quer entender como funciona o desenvolvimento web no mercado de trabalho;

  • Quer construir projetos web;

Obs: realmente não há pessoas que não podem fazer esse curso, minha proposta é que: se você que nunca escreveu código na vida entre para esta área e que quem já trabalha ou já escreveu um pouco de HTML e CSS eleve seus conhecimentos para o ambiente profissional, porém se você já tem algum conhecimento em HTML/CSS a absorção de conteúdos será mais rápida.

E além disso, meu compromisso com você é explicar o mesmo assunto em vários ângulos diferentes para que você assimile os conteúdos e não fique apenas copiando código.

Se então é isso que você procura, te espero no curso para escrevermos os códigos juntos! :)

Who this course is for:

  • Programadores iniciantes
  • Estudantes de programação
  • Pessoas que desejam aprender a programar
  • Aspirantes a programação
  • Desenvolvedores front-end

Course content

9 sections • 82 lectures • 8h 13m total length

  • Preview08:34
  • Como um programador acha as soluções das dúvidas no StackOverFlow
    04:31
  • Como um programador acha as soluções das dúvidas no Google
    03:39
  • Como verificar erros de HTML/CSS no navegador (Inspecionar elemento)
    03:37
  • Como instalar o Sublime (editor de código para o curso)
    02:08

  • Arquivos utilizados em aula
    00:01
  • Preview03:32
  • Conhecendo a tag <audio>
    01:21
  • Conhecendo a tag <figure> e <figurecaption>
    02:35
  • Conhecendo os atributos required e placeholder
    04:07
  • Conhecendo o atributo type email e autofocus
    03:16
  • Preview02:40
  • Introdução ao HTML semântico
    04:55
  • Conhecendo a tag <detail> e <summary>
    03:26
  • Conhecendo a tag <datalist>
    03:01
  • Preview02:07
  • Questionário HTML5
    3 questions

  • Arquivos utilizados em aula
    00:01
  • Iniciando com animações
    03:54
  • Animações com vários passos
    03:26
  • Animações: delay e iterations
    04:30
  • Preview05:51
  • Animações: shorthand
    05:44
  • Conhecendo a propriedade transition
    04:13
  • Utilizando a propriedade calc
    07:16
  • Gradiente linear
    07:21
  • Gradiente radial
    04:49
  • Carregando fontes com font_face
    05:41
  • Layouts responsivos com media query
    07:08
  • Utilizando a propriedade border-radius
    04:18
  • Questionário de CSS3
    3 questions

  • Arquivos do projeto
    00:01
  • Introdução do projeto
    02:47
  • Iniciando o projeto e configurações
    11:02
  • HTML do menu lateral (sidebar)
    06:16
  • Preview06:43
  • HTML do conteúdo do site
    12:28
  • CSS das seçoes iniciais e banner
    17:13
  • CSS das galerias
    11:22
  • CSS do rodapé e conclusão do projeto
    06:00

  • Arquivos utilizados em aula
    00:01
  • Preview05:00
  • Propriedade flex-grow
    04:53
  • Propriedade flex-shrink e flex-basis
    04:24
  • Propriedade flex-direction
    02:57
  • Propriedade flex-order
    02:10
  • Preview04:12
  • Proriedade justify-content
    04:50
  • Propriedade align-items
    02:41
  • Propriedade align-self
    02:14
  • Revisão Flex Box
    04:46
  • Quiz sobre Flexbox
    4 questions

  • Arquivos do projeto
    00:01
  • Preview05:48
  • Configurando o projeto
    06:27
  • Preview15:44
  • CSS da barra de navegação e banner principal
    11:39
  • CSS das seções com flexbox
    14:15
  • Finalizando o CSS do projeto
    09:30
  • Adaptando o site para dispositivos mobile
    09:53

  • Arquivos do projeto
    00:01
  • Configuração do projeto
    08:33
  • Criando o HTML da barra lateral
    14:35
  • Criando o HTML da seção do chat
    07:41
  • Iniciando o CSS da barra lateral
    14:08
  • Preview13:25
  • Iniciando o CSS da area de chat
    06:10
  • Conclusão do projeto
    15:18

  • Arquivos do projeto
    00:03
  • Preview02:06
  • Configuração do projeto
    06:57
  • Iniciando o cabeçalho (header)
    10:55
  • Finalizando header e navbar
    05:07
  • Estruturando o conteúdo principal
    11:05
  • Estruturando o conteúdo lateral e criando o flex
    07:21
  • Finalizando os resultados de busca
    08:30
  • Conclusão do projeto
    09:48

  • Preview03:29
  • Arquivos do projeto
    00:06
  • Configurações do projeto
    04:13
  • HTML do projeto
    10:45
  • Iniciando o CSS do projeto
    05:06
  • CSS do formulário de login
    11:29
  • Finalizando CSS da resolução de desktop
    08:23
  • Responsivo e conclusão do projeto
    05:09

Instructor

Matheus Battisti
Desenvolvedor Full Stack
Matheus Battisti
  • 4.7 Instructor Rating
  • 2,882 Reviews
  • 20,657 Students
  • 17 Courses

Olá, eu sou o Matheus, desenvolvedor Full Stack e amo trabalhar nesta área que me oferece diversas oportunidades de aprender novas tecnologias todos os dias.


Por este motivo estudo constantemente visando aprimorar minhas habilidades e conhecer novas libs, frameworks, linguagens e novas tecnologias que me chamam a atenção.


Como acredito que conhecimento quanto mais se compartilha mais se têm, decidi dividir o que aprendi durante esse tempo na minha carreira profissional.


E foi então que nasceu a ideia do Hora De Codar, que hoje é um blog e um canal no YouTube, lá ministro cursos grátis de diversas tecnologias que fui utilizando e estudando durante minha vivência na área, e agora resolvi expandir meus cursos para a Udemy, para abraçar o maior número de pessoas.


Pois o meu objetivo é capacitar quem deseja ser desenvolvedor/programador para o mercado de trabalho, atingindo um público que tem pouco ou nenhum investimento para realizar esse sonho; como meu aprendizado foi semelhante a este método nada mais justo de que eu retornar da mesma forma. :)

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.