Web design criativo: planejamento e programação do zero
A course by DXR ZoneAgência de programação criativa e direção de arte
A course by DXR Zone, Agência de programação criativa e direção de arte
Aprenda a criar um site com um design atraente usando HTML, CSS e JavaScript
Quem não precisa de um site hoje em dia? Seja ele para exibir seu portfólio ou para encontrar novos clientes, saber programar é uma habilidade muito útil. Rifke Sadleir e Dan Baragwanath, fundadores da agência de programação criativa DXR Zone, estão aqui para ensinar os fundamentos de programação para você lançar um site visualmente impressionante.
Neste curso, você obterá um guia completo de planejamento, design, formatação e lançamento do seu próprio site. Aprenderá a traduzir suas ideias com códigos HTML, CSS e JavaScript e descobrirá como usar programas gratuitos que facilitam a programação.
O que você aprenderá neste curso online?
18 aulas & 17 downloads
O que faremos neste curso?
4 minutos, 7 segundos
Construindo o Conceito
3 minutos, 21 segundos
Coletando Referências
11 minutos, 33 segundos
Criando um Quadro de Humor
6 minutos, 53 segundos
Fazendo um Sitemap
4 minutos, 28 segundos
Apresentando propostas de design
17 minutos, 20 segundos
O que está incluído neste curso?
Para começar, você conhecerá Rifke e Dan, os designers gráficos e programadores por trás da DXR Zone, além de seus professores neste curso. Eles compartilharão a jornada pouco convencional que os levou a iniciar sua agência de web design criativo e direção de arte. Também mostrarão seus trabalhos mais recentes e apresentarão os artistas e designers que influenciam suas criações.
Em seguida, você descobrirá a preparação necessária para criar um site antes de escrever o código. Aprenderá a construir um conceito, decidindo o propósito e o público-alvo do site. Buscará referências para visualizar um determinado design e criará um mood board. Depois, começará a planejar a jornada do usuário pelo site, fazendo um mapa e criando uma proposta de design com o Figma.
Na próxima unidade, você aprenderá a programar passo a passo utilizando o Atom, um software de programação. Primeiro, verá como usar o código HTML para criar a base do seu site. Logo, seus professores ensinarão código CSS para adicionar elementos de estilo e formatação. Na sequência, você juntará tudo o que aprendeu e descobrirá o JavaScript para agregar componentes divertidos e interativos no seu web design.
É hora de colocar seu site no ar! Rifke e Dan ensinarão a você como publicá-lo. Você aprenderá a fazer testes em busca de bugs e outros problemas comuns e descobrirá soluções para todos eles. Quando estiver tudo testado e pronto, você compartilhará seu novo site com o mundo!
What is this course's project?
Você fará o planejamento e programação de um site partindo do zero, usando códigos HTML, CSS e JavaScript.
Projetos de alunos do curso
Who is this online course for?
A toda e qualquer pessoa interessada no design e programação de sites.
Requirements and materials
Para realizar este curso, nenhuma experiência é necessária, mas qualquer conhecimento de programação dará a você uma vantagem inicial!
Quanto aos materiais, você precisará de um computador com os programas gratuitos Atom e Figma instalados, além de conexão à internet.
Avaliações
- há 5 meses
um cruso bom
- há 6 meses
Quiero expresar que el curso de programación es excelente y cuenta con información muy valiosa. La calidad del contenido y la forma en que se presenta son muy útiles para el aprendizaje. Estoy muy satisfecha
- há 8 meses
A very hands-on and useful course, even though it is from 2021 and I am writing this review in '25. The instructors guide you through all the steps, from collecting inspiration, over writing HTML, CSS and JavaScript, to actually publishing your website. Atom, the code editor used by the instructors, isn't around anymore, but that is not an issue at all, just use VS Code, it has awesome features anyway that weren't available back in '21. Browser console for debugging etc. all are still the same.
- há 8 meses
muy buen curso !!!
- há 10 meses
I have tried several web design courses, each with different aims and approaches, but with this course I found an approach that is not too deep into programming but it just gives you resources to get inspired as well as shape your ideas and implement your projects. For me this course is very valuable. Thank you.
A agência oferece serviços que vão desde direção de arte e design digital até o desenvolvimento full stack. Sua lista de clientes inclui grandes nomes como Google, Selfridges, Burberry, The Face, Dazed, Adidas, Universal Music, Nike, Somerset House, Converse, Hypebeast, The Magnet Agency, Anyways, Institute of Coding, Depop, Dropbox, University of the Arts London, ICA, The Future Laboratory, Warp Records e Beirut Re-Store.
Conteúdo
- U1
Introdução
- Sobre nós
- Influências
- O que faremos neste curso?
- U2
Planejamento e Projeto
- Construindo o Conceito
- Coletando Referências
- Criando um Quadro de Humor
- Fazendo um Sitemap
- Apresentando propostas de design
- U3
Construção e codificação
- Definindo as fundações
- Fazendo a estrutura básica em HTML 1
- Fazendo a Estrutura Básica em HTML 2
- Elementos de estilo em CSS 1
- Elementos de estilo em CSS 2
- Adicionando Interações em Javascript 1
- Adicionando interações em Javascript 2
- U4
Going Live
- Lançamento do site
- Testando o site com usuários
- Alterações baseadas em testes do usuário
- PF
Projeto final
- Web design criativo: planejamento e programação do zero
O que esperar de um curso da Domestika
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
Certificates
PLUSIf you're a Plus member, get a certificado personalizado signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
Sim, este curso é feito para iniciantes e ensina as habilidades básicas de desenvolvimento web do zero usando HTML, CSS e JavaScript. Não é necessário ter experiência prévia em programação.
Você vai precisar de um editor de código como Atom ou VS Code, um navegador para testar, e ferramentas de design opcionais como Figma ou Arena para planejamento e mood boards. Todas as ferramentas recomendadas são gratuitas ou têm versões grátis.
Você vai aprender a desenvolver o conceito do site, criar sitemaps, mood boards, codificar em HTML/CSS/JavaScript, fazer layouts responsivos, testes com usuários, lançar usando Netlify e técnicas criativas como codificação experimental e design de interface nostálgico.
Não é necessário ter conhecimento em design. O curso aborda conceitos essenciais e oferece um passo a passo para planejar, prototipar e construir sites visualmente atraentes.
Você vai aprender a planejar, desenhar e codificar seu próprio site portfólio, incluindo criação de sitemap, desenvolvimento de mood board e implementação de recursos interativos para destacar seus projetos ou trabalhos criativos.
Sim, você vai aprender os princípios do design responsivo e como adaptar layouts para diferentes tamanhos de tela, garantindo que seus sites funcionem bem em dispositivos móveis e desktops.
Um sitemap organiza visualmente a estrutura e navegação do seu site, ajudando a planejar o conteúdo, o fluxo do usuário e garantir que todas as páginas necessárias estejam incluídas antes de começar a codificar.