Código https://gist.github.com/origamid/4eebe21db9072d3d5b98890d74aaf6ca Origamid https://www.origamid.com/ Se você não quiser que o texto "dance" na tela, use uma tipografia monoespaçada. 00:00 Introdução 00:20 Gist (Copiar/Colar) 00:50 HTML/CSS 01:58 JavaScript #javascript #frontend

🐺 Back End Node.js - Curso Novo - 18/11/2025 https://node.curso.id Quem ainda não possui conta na Origamid, inscreva-se para receber o aviso de lançamento. O curso ficará disponível para todas as alunas e alunos da Origamid no dia 18/11/2025. Já terminei de gravar, agora estou apenas editando os vídeos. Você vai aprender do zero como criar um Back End com Node.js. Zero Frameworks, Zero Bibliotecas, Zero Dependências e Zero Copia/Cola. Apenas a API nativa do Node.js e muito código TypeScript para criarmos o nosso projeto do absoluto zero. Um exemplo, na parte de autenticação email/senha, não vamos utilizar nenhuma biblioteca para isso. Isso envolve criarmos toda a parte de geração/comparação da chave derivada com Pepper, HMAC, Salt, SHA256, uso do KDF Scrypt e mais. Vocês vão aprender a fundo as principais partes de um Back End que geralmente são geradas "magicamente" pelas bibliotecas/frameworks. Esse não é um curso sobre ser contra o uso de bibliotecas/frameworks, mas sim um curso focado na exploração e aprendizado profundo de problemas que devem ser resolvidos em qualquer Back End. Apesar de ser um curso de Back End com Node.js, 90% do conhecimento pode ser transferido para qualquer linguagem, pois a solução do problema continua a mesma. Então vamos aprender do zero a criar um framework que deve lidar com rotas, rate limit, request, response, cookies, body parsing, headers, validação e formatação de entradas e mais. Ao final teremos um LMS pronto como o da Origamid, com cadastro de cursos/aulas/pessoas, geração de certificados e mais. Esse LMS será então hospedado em uma VPS, onde vamos aprender a utilizar Docker, Docker Compose, Caddy como um Proxy Reverso, SSH e mais. Espero que vocês realmente gostem. Abraços, André Rafael

🐺 Back End Node.js - Curso Novo - 18/11/2025 https://node.curso.id Quem ainda não possui conta na Origamid, inscreva-se para receber o aviso de lançamento. O curso ficará disponível para todas as alunas e alunos da Origamid no dia 18/11/2025. Já terminei de gravar, agora estou apenas editando os vídeos. Você vai aprender do zero como criar um Back End com Node.js. Zero Frameworks, Zero Bibliotecas, Zero Dependências e Zero Copia/Cola. Apenas a API nativa do Node.js e muito código TypeScript para criarmos o nosso projeto do absoluto zero. Um exemplo, na parte de autenticação email/senha, não vamos utilizar nenhuma biblioteca para isso. Isso envolve criarmos toda a parte de geração/comparação da chave derivada com Pepper, HMAC, Salt, SHA256, uso do KDF Scrypt e mais. Vocês vão aprender a fundo as principais partes de um Back End que geralmente são geradas "magicamente" pelas bibliotecas/frameworks. Esse não é um curso sobre ser contra o uso de bibliotecas/frameworks, mas sim um curso focado na exploração e aprendizado profundo de problemas que devem ser resolvidos em qualquer Back End. Apesar de ser um curso de Back End com Node.js, 90% do conhecimento pode ser transferido para qualquer linguagem, pois a solução do problema continua a mesma. Então vamos aprender do zero a criar um framework que deve lidar com rotas, rate limit, request, response, cookies, body parsing, headers, validação e formatação de entradas e mais. Ao final teremos um LMS pronto como o da Origamid, com cadastro de cursos/aulas/pessoas, geração de certificados e mais. Esse LMS será então hospedado em uma VPS, onde vamos aprender a utilizar Docker, Docker Compose, Caddy como um Proxy Reverso, SSH e mais. Espero que vocês realmente gostem. Abraços, André Rafael

🐺 Banco de Dados SQLite - Curso Novo - Origamid Já está liberado para todos os alunos e alunas da Origamid. Acesse: https://sql.curso.id Você vai aprender do zero como criar um banco de dados relacional, como inserir, selecionar, atualizar e deletar dados de uma tabela. Além disso, você também aprenderá como o SQLite faz uma busca e como os índices funcionam para tornar as suas consultas mais rápidas. Ao final do curso, você terá um banco de dados completo para um LMS simples, como o site da Origamid, com tabelas de cursos, aulas, aulas completas, certificados, usuários e sessões. Esse curso é necessário para o próximo curso de Back End com Node.js que será lançado em 2025 e já está em produção. Abraços, André Rafael

Aprenda Tailwind CSS do zero. https://www.origamid.com/curso/tailwind-css No curso de Tailwind CSS você irá aprender a como utilizar classes utilitárias de CSS para personalizar o layout do seu site. Além de aprender as classes do Tailwind CSS, vamos também aprender a customizar e adicionar novas classes para customizarmos o framework para as necessidades do nosso projeto. Projeto Forest https://forest.origam.id/

Essa é uma história de muita sorte e trabalho. Nesse vídeo eu conto a minha história até aqui. Como foram as vendas iniciais, marketing, hardware, software, hospedagem e mais. Não é uma live, mas eu vou assistir e comentar junto com vocês, tem uma hora e 40 minutos de duração. Capítulos 00:00 Introdução 00:45 Faculdade 02:40 Administração 05:10 Consultoria 10:30 Design Digital 13:50 Origamid 18:15 Origamid Labs 24:35 Produção Labs 30:00 Lançamento 32:40 Mudanças 36:40 Vitalício 40:55 Marketing 43:35 Tecnologia 48:25 Hospedagem 57:45 Serviços 01:00:15 Hardware 01:12:15 Software 01:21:15 Considerações 01:29:45 Dicas 01:34:00 Futuro Links https://www.infnet.edu.br/infnet/home/ https://teamtreehouse.com/ https://woocommerce.com/ https://senseilms.com/ https://www.digitalocean.com/ https://www.cloudflare.com/pt-br/ https://www.vultr.com/ https://vimeo.com/ https://www.heficed.com/ https://www.contabilizei.com.br/ https://www.regus.com/pt-br https://tableplus.com/ https://panic.com/transmit/ https://numi.app/ https://www.araelium.com/screenflick-mac-screen-recorder/

🐺 Dois Cursos novos de HTML/CSS e UI Design para Iniciantes. Já disponíveis para todos os assinantes da Origamid. 00:00 Introdução 00:17 UI Design 00:39 Figma 01:16 HTML e CSS 01:49 Bikcraft 02:16 Portfólio 03:00 Promoção Esse foi o ano que mais produzi conteúdo. Estou a 12 meses criando esses cursos e lanço hoje 290 aulas com mais de 35 horas de conteúdo. O conteúdo está dividido em 2 cursos: 1 - UI Design para Iniciantes https://www.origamid.com/curso/ui-design-para-iniciantes/ A ferramenta utilizada é o Figma e nele você aprende a como utilizar tipografia, cores, espaçamentos, ícones e imagens para a criação de interfaces (sites). 2 - HTML e CSS para Iniciantes https://www.origamid.com/curso/html-e-css-para-iniciantes/ HTML e CSS moderno desde o início com CSS Flexbox, CSS Grid Layout, propriedades customizadas, acessibilidade e muito mais para você iniciar a sua carreira no Front End. Portfólio 🎓 https://portfolio.origamid.dev Bikcraft 🚲 https://bikcraft.origamid.dev Para iniciantes apenas? Os cursos são ensinados totalmente do zero, para quem não sabe nada, mas eles vão muito além do básico. Eles possuem conteúdo avançado de UI Design e Front End que você não encontra em nenhum outro curso da Origamid. Na era da aparência a ausência pareceu incomodar algumas pessoas, mas como sempre digo, minha ausência em redes sociais apenas significa que mais energia está sendo gasta no que realmente importa, produção de novos conteúdos e suporte para os alunos/alunas. Lembre-se, só tem eu aqui. Espero que gostem dos cursos, eu nunca trabalhei tanto quanto nesses novos. Quem quiser me ajudar, basta divulgar para amigos e conhecidos da área. Abraços, André Rafael.

O objetivo do vídeo é tentar alinhar a expectativa de quem está iniciando ou já terminando o seu primeiro curso na área de UX/UI Design ou Front End. É comum eu receber emails de pessoas que terminam 2 ou 3 cursos (meus ou de qualquer outra plataforma) e assim que iniciam o seu primeiro projeto, se sentem totalmente perdidas e com a sensação de que não aprenderam nada. Tem 3 palavrões durante este vídeo, mas eu não faço uso dos mesmos durante os cursos na plataforma. 00:00 Introdução 00:20 Frustração 01:45 Curva da Expectativa 04:10 Curva Ideal 04:45 Curso Avançado vs Desenvolvedor Avançado 07:05 Você não absorve 100% 11:00 Fatos Iniciais 12:20 PPDZ 13:10 Medo 17:15 Prática 18:40 Força Bruta 22:20 Não sei por onde começar 23:40 Pare de fazer curso 24:40 Considerações Finais 27:30 Meu primeiro site 28:50 T. S. Eliot 30:20 Ignore o que eu disse Cadastre-se nos meus cursos em: https://www.origamid.com/

Tutorial mostrando como utilizar o clip-path para aplicar um SVG como uma máscara de uma div com CSS. Nele eu exploro diferentes formas de se aplicar as mesmas e os possíveis problemas que podem surgir. 00:00 Projeto 00:30 Estrutura Inicial 00:45 Máscara border-radius 02:54 Estrutura clip-path 04:00 clip-path: circle() 04:40 polygon() 05:45 Figma SVG 08:43 clipPath SVG 10:15 clip-path: url(#mask) 12:10 Responsividade clip-path 14:00 clip-path relativo 15:20 clip-path converter 16:25 Problemas 17:23 Origamid Arquivos https://github.com/origamid/publico/tree/main/clip-path Exemplo: https://origamid.github.io/publico/clip-path/ Clippy https://bennettfeely.com/clippy/ Relative clip-path https://yoksel.github.io/relative-clip-path/ Figma https://www.figma.com/ Cursos da Origamid https://www.origamid.com/cursos/

Tutorial mostrando como criar uma estrutura de menu principal, utilizando um menu "hamburger" no mobile e tornando o mesmo acessível. Totalmente do zero com HTML, CSS e JavaScript 00:00 Projeto 00:12 HTML Desktop 01:21 CSS Desktop 05:35 Menu Mobile 05:56 HTML Mobile 06:18 CSS Mobile e Media Queries 07:50 JavaScript Mobile 09:50 CSS Dropdown 14:00 Transition 16:58 Botão Hamburger 24:33 touchstart (UX) 26:40 Acessibilidade (ARIA) 31:32 VoiceOver Teste 32:50 Ferramenta Arquivos https://github.com/origamid/publico/tree/main/menu-mobile Exemplo: https://origamid.github.io/publico/menu-mobile/ Ferramenta Utilizada https://www.code.origamid.dev/ Cursos da Origamid https://www.origamid.com/cursos/ Em termos de UX Design, lembre-se, o que está escondido sempre é menos utilizado do que está visível na tela. Então o menu mobile vem com os seus problemas.

Mini tutorial apresentando as principais propriedades do CSS Animation e como criar animações simples de entrada/loading com o mesmo. A parte de animação começa em 06:36. 00:00 Projeto 00:15 Estrutura Inicial 05:15 JavaScript 06:36 keyframes 08:01 animation-name 08:20 animation-duration 09:14 animation-fill-mode 10:20 transform: translateX(); 11:45 animation-timing-function 12:45 animation-delay 13:15 animation-direction 13:48 animation-play-state 14:05 animation-iteration-count 14:35 animation 15:15 load estrutura 16:35 load keyframes 17:11 load animation 18:00 mais keyframes 21:20 Ferramenta Arquivos https://github.com/origamid/publico/tree/main/css-animation-mini-tutorial Exemplo: https://origamid.github.io/publico/css-animation-mini-tutorial/ Ferramenta Utilizada https://www.code.origamid.dev/ Cursos da Origamid https://www.origamid.com/cursos/ No passado eu também criei uma sequência de tutoriais (escritos) com mais detalhes sobre cada uma das propriedades do CSS Animation: https://www.origamid.com/codex/mini-curso-de-css-animation/ A animação do modal feita no vídeo, também pode ser feita utilizando simplesmente o: transition: all .3s; Porém o objetivo da aula foi apresentar o CSS Animation. Com o transition você possui menor controle e também não conseguiria fazer a animação do spinner e outras mais complexas com o mesmo.

Evento começa 19h (Horário de Brasília) quinta (26/11). https://github.com/origamid/publico/blob/main/aprendi-no-mestrado-em-ux-design/aprendi-no-mestrado-em-ux-design.pdf Nessa live eu vou mostrar tudo que aprendi no mestrado em UX Design. E falar sobre os resultados/processo de desenvolvimento da minha tese.

Código da aula: https://github.com/origamid/publico/tree/main/cookies O objetivo da aula é ensinar a criar um Popup que permite o usuário selecionar as suas preferências. A preferência selecionada irá ativar uma função e a mesma será salva no localStorage. O objetivo não é falar sobre Cookies, como eles funcionam ou algo do tipo. Mas sim criar a funcionalidade que deve envolver as funções que são ativadas caso o usuário permita as mesmas. 00:00 Projeto 01:30 HTML 04:10 CSS 11:30 JavaScript

Arquivos da aula: https://github.com/origamid/slide-stories Aprenda a criar um slide do tipo stories do zero. Quer aprender HTML, CSS e JavaScript do zero? https://www.origamid.com/

Live feita no dia 30/07 Slides https://www.origamid.com/slide/youtube/#/0201-perguntas-frequentes-design-e-front/1 Após 6 anos ensinando UX/UI Design e Front End e centenas de emails respondidos com dúvidas por semana (muitas das vezes as mesmas dúvidas). Eu tenho alguma respostas para vocês (live extremamente opinativa). 00:00 Front End vale a pena? 04:48 Se eu fizer o curso X, eu estarei pronto para o mercado? 08:17 Preciso saber desenhar? (UX/UI Design) 11:08 Se existe WIX/WordPress, por que entrar na área? 13:44 React ou Vue? 19:40 Fiz igual e não funcionou. 22:07 Adobe XD, Figma, Sketch ou Photoshop? 25:28 Sei JavaScript. Sou Full Stack? 28:55 Não tenho criatividade. 39:47 Posso usar CSS Grid Layout? 42:30 O que é UX Design? 50:32 Por que criar algo do zero, se já existe um plugin para isso? 56:02 O que é uma API? 01:00:50 Perguntas do chat