Como abrir localhost no celular? Aprenda a testar seu site no dispositivo móvel DE VERDADE?

#frontend #webdev #webdesign

Saiba como testar seu site localhost do Live Server (VScode) no seu aparelho celular de verdade.

Teste as funcionalidades do seu dispositivo mobile para saber como está a usabilidade e a experiência do usuário em tempo real e enquanto desenvolve seu projeto web front-end.

🌟 Links comentados no vídeo e outros interessantes 🌟

📺 Playlist Curso Web Fundamentos: HTML e CSS.

🎁 CURSO Web Design Fundamentos. Aprenda HTML CSS e Javascript

✅ TUTORIAL CSS GRID. Como criar páginas web mais FÁCIL

✅ Crie interfaces melhores com VARIÁVEIS do CSS (a.k.a custom properties)

✅ Como criar um "Dark🌜 e Light☀️ Theme Toggle" usando HTML, CSS e Javascript.

✅ Como criar Tema Light/Dark só com HTML e CSS? (sem JAVASCRIPT)

✅ Como usar as pseudo-classes :has(), :is() e :where() do CSS para construir um switch theme só com HTML e CSS? (sem JAVASCRIPT)

✅ FAÇA o seu PORTFOLIO se DESTACAR frente aos demais

✅ [CSS] Misturar cores SEM SOFRER com color-mix()

✅ 2 PORTIFÓLIOS (FRONT-END) INCRÍVEIS analisados juntos. Só vem.

✅ Como criar PÁGINAS WEB com HTML e CSS a partir de design do FIGMA

[serliv]

Vem aprender HTML, CSS e Javascript comigo. SEM MENSALIDADE. Tem 30 dias para pedir o dinheiro de volta caso não fiquei totalmente satisfeito

Curso Web Design Fundamentos. Aprenda HTML CSS e Javascript:

Curso Javascript Completo:


Outros links que podem ser interessantes:

Canais em redes sociais:

Instrutor: Daniel Tapias Morales

[marlyssonsilva]

Olá, Daniel.
Tem outra forma de usar essa funcionalidade do live server, na propria extensão tem uma opção de usar o ip local, é so marcar o checkbox.
O caminho até la seria assim:
Extensões > Live server > manager (ícone de engrenagem, configurações ) > extension settings > Use Local Ip ( só marcar o checkbox)
Aí fica padrão o ip local, ai eu uso a função do navegador de gerar o qrcode da página, ai eu so escaneio e acesso a página no celular.
Evita de ficar digitando o ip local toda vez na url.

[guilhermeabreu]

Muito obrigado! Deu muito certo aqui! Tava toda hora tendo que re-publicar o site para abrir no celular e ver se a alteração tinha dado certo, demorando muito para ver uma simples alteração! Agora tá simultâneamente. Valeu demais!

[YuriCanda]

Powwww, sou de Moçambique tou começando a entrar na programação, esse vídeo me ajudou muito. 😊🤩

[andrefelsemburgh]

Muito bom. Excelente dica.
Eu tenho um app editor no celular, então, toda vez que eu queria testar meus códigos no celular, eu compactava a pasta e jogava para o celular. Descompactava e testava
Dessa forma eu não vou mais precisar ter esse trabalho.
Obrigado pela dica.

[BernardoMB]

Segui os passos que o Daniel indicou, mas não deu certo. Então, desativei o firewall do meu notebook e consegui acessar o locahost do site pelo celular. Fica a dica para quem também não havia conseguido.

[josimarmiranda]

Daniel, sou iniciante na área de html, css e javascript e assim que terminei de assistir o vídeo, testei no meu celular com uma página que estou fazendo em html e css e funcionou como você explicou no vídeo. Valeu mesmo! Estava curioso para ver a página que fiz em html e css sem ter que ficar copiando código na internet e ficou até responsiva. Obrigado! E isso não é trivial.

[daneloy]

Muito Obrigado!! Quando estava aprendendo, seus vídeos me ajudaram muito. Gostaria de deixar uma dica para quem ta usando React com vite, basta colocar "npm run dev -- --host" e pegar o link do Network.

[malicinhanoob]

Imaginava que seria algo assim, mas pegando o IP da máquina foi a show

[devPirate]

Gurizada, para quem está com dificuldades: Basta ir nas configurações do live server e ativar para que ele possa usar o ip local da máquina como host

[geovanisilva]

Dica simples, porem de grande utilidade. Gostei de seu canal começando te seguir. Abracos

[allanrodrigues]

Bom dia!
Tudo bem, espero que sim?
Fiz o processo conforme o video e deu certinho, porem estou usando Json-serve junto ao projeto e ele nao renderizou as informações, tem como fazer exibir as informações.

[RV_Dev]

Dica simples, mas valiosa. Obrigado por compartilhar. Já fazia um tempinho que eu vinha pensando se isso era possível e agora vou testar! Ótimo vídeo!

[gui-cordeiro]

Muito obrigado pela dica, amigo! O legal de tudo é que, se ativar o "autosave" do VS Code, toda mudança que for feita no projeto vai fazer com que o navegador do celular também atualize, assim como no PC. Dinamicidade é tudo, obrigado mais uma vez!

[tonyriko]

Muito bom, apesar dos muitos recursos, o VisualCode fica muito pesado no meu pc.

[IdeaWeb-we]

Ajudou muito Daniel. Voltando aos estudos de Front End. Obrigado!!! :))

[JosenitoTutoriais]

Olá bom dia! Daniel gostei da ideia vai me ajudar bastante. Meu professor já tinha ensinado sobre esta técnica de testar a plicação no celular . Sempre uma nova forma ajuda de mais. Sua didática é joia cara.

[elderbrdev]

muito bom, só uma observação que gostaria de fazer, precisa verificar se de script de inicialização no seu package.json se está incluso a flag --host. Passei por essa experiência

[ruvvdvm]

Boa dica, no angular tem que dar o comando ng serve --host 0.0.0.0 --port 4200 para funcionar

[ronaldzion]

dica de ouro, obrigado por compartilhar minha joia