Dúvidas sobre desenvolvimento web

[DD_Dev 2]

Estudo programação desktop há algum tempo C/C++ e python, mas agora estou começando a me aventurar em desenvolvimento web (front-end), sei o básico de Html5, mas tenho um pouco de dificuldade em desenvolver as ideias, gostaria de saber métodos para praticar, como colocar toda essa carga teórica estudada em pratica? Replicação de sites é uma boa?

[Kimo Gordinho 2]

Cara, eu sei o básico de HTML5 e CSS3 também e estou estudando por conta própria e meu jeito de praticar é replicando sites que eu conheço. Acho que é uma boa forma de aprendizagem e eu só conheço essa forma de praticar, mas eu nunca pesquisei outras formas de aprender aquilo que aprendi, então fica a seu critério.

[luiz14 16]

Sei que você já tem um conhecimento básico em html5, mas tem um curso no youtube que se chama curso em video. Não sei se você já fez o curso de html5 lá, porém ele te dá uma boa noção de por onde você pode começar, o curso é basico, entretanto, lá você aprende a construir sites simples passo a passo e depois você vai aprimorando. É normal ter dificuldade em desenvolver um site, principalmente, quando a pessoa está começando com a trabalhar com desenvolvimento web.

[Kimo Gordinho 2]

Agora, luiz14 disse:

Sei que você já tem um conhecimento básico em html5, mas tem um curso no youtube que se chama curso em video. Não sei se você já fez o curso de html5 lá, porém ele te dá uma boa noção de por onde você pode começar, o curso é basico, entretanto, lá você aprende a construir sites simples passo a passo e depois você vai aprimorando. É normal ter dificuldade em desenvolver um site, principalmente, quando a pessoa está começando com a trabalhar com desenvolvimento web.

Sim, eu fiz o curso básico lá :D E agora estou estudando por conta própria buscando mais comandos. Até agora não consegui sanar uma dúvida que eu tenho aqui. Enfim... vou conseguir, acredito nisso hehe

[luiz14 16]

1 minuto atrás, Kimo Gordinho disse:

Sim, eu fiz o curso básico lá :D E agora estou estudando por conta própria buscando mais comandos. Até agora não consegui sanar uma dúvida que eu tenho aqui. Enfim... vou conseguir, acredito nisso hehe

 

Qual a dúvida?

[Kimo Gordinho 2]

Em vez de explicar o que quero, vou te dar um exemplo do que quero fazer, melhor! Vou te dar o exemplo que estou tentando replicar.

No site do jogo Cross Fire AL, o menu lá é drop down e o submenu tem um atraso pra desaparecer. Dá uma olhada lá.
Esse efeito eu não estou conseguindo replicar hehe

[DD_Dev 2]

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

[luiz14 16]

7 minutos atrás, Kimo Gordinho disse:

Em vez de explicar o que quero, vou te dar um exemplo do que quero fazer, melhor! Vou te dar o exemplo que estou tentando replicar.

No site do jogo Cross Fire AL, o menu lá é drop down e o submenu tem um atraso pra desaparecer. Dá uma olhada lá.
Esse efeito eu não estou conseguindo replicar hehe

 

Já tentou utilizar o transition do css pra fazer isso?

[Kimo Gordinho 2]

Agora, luiz14 disse:

 

Já tentou utilizar o transition do css pra fazer isso?

Sim e não está funcionando. Já tentei também o transition-delay e não obtive êxito.

3 minutos atrás, DD_Dev disse:

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

Os cursos lá são voltados para aqueles que não sabem nada de programação, são para pessoas que estão começando, que estão perdidas, que não sabem dar o primeiro passo mas lá, tem um curso de PHP e um curso de PHP Orientado à Objetos. Se quiser dá uma olhada lá ;) os cursos são de uma qualidade extrema!

[luiz14 16]

15 minutos atrás, DD_Dev disse:

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

 

Boa sorte! 

13 minutos atrás, Kimo Gordinho disse:

Sim e não está funcionando. Já tentei também o transition-delay e não obtive êxito.

Estranho, eu normalmente utilizo o transition para fazer essas coisas.

[Kimo Gordinho 2]

2 minutos atrás, luiz14 disse:

 

Boa sorte! 

Estranho, eu normalmente utilizo o transition para fazer essas coisas.

Sim. Eu também mas.... Quer o código pra tu dá uma olhada ?

[luiz14 16]

Agora, Kimo Gordinho disse:

Sim. Eu também mas.... Quer o código pra tu dá uma olhada ?

 

Sim, talvez eu possa ajudar.

[Kimo Gordinho 2]

Cara, não to conseguindo responder o tópico '-'

com os códigos '-'

[Kimo Gordinho 2]

tomará que vá agora

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Agency FB", "Aharoni", "Algerian", "Andalus", "Angsana New", "AngsanaUPC", "Aparajita", "Arabic Typesetting", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold",sans-serif;
    font-size: 20px;
}

nav#menu {
    list-style: none;
    border: 2px solid cadetblue;
    position: absolute;
    left: 23%;
    top: 5%;
    width: 750px;
}

nav#menu li {
    position: relative;
    float: left;
    border-right: 50px solid white;
}

nav#menu li a {
    color: #333;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
}

nav#menu li a:hover {
    background: #333;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

nav#menu li ul {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    display: none;
}

nav#menu li:hover ul, #menu li.over ul {
    display: block;
}

nav#menu li ul li {
    border: 0;
    display: block;
    width: 150px;
}

 

agora em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>CROSSFIRE Ideal</title>
    <link rel="stylesheet" type="text/css" href="_css/início.css">
</head>
<body>
    <nav id="menu">
        <ul type="none">
            <li><a href="">NOTÍCIAS</a>
                <ul>
                    <li><a href="_html/notícias.html">NOTÍCIAS</a></li>
                    <li><a href="_html/atualizações.html">ATUALIZAÇÕES</a></li>
                    <li><a href="_html/eventos.html">EVENTOS</a></li>
                    <li><a href="_html/feeds.html">FEEDS</a></li>
                </ul>
            </li>
            <li><a href="">JOGO</a>
                <ul>
                    <li><a href="_html/visão-geral.html">VISÃO GERAL</a></li>
                    <li><a href="_html/começando-o-jogo.html">COMEÇANDO O JOGO</a></li>
                    <li><a href="_html/modos.html">MODOS</a></li>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/arsenal.html">ARSENAL</a></li>
                    <li><a href="_html/patentes.html">PATENTES</a></li>
                    <li><a href="_html/download.html">DOWNLOAD</a></li>
                </ul>
            </li>
            <li><a href="_html/mídia.html">MÍDIA</a></li>
            <li><a href="início.html">CROSSFIRE Ideal</a></li>
            <li><a href="">RANKING</a>
                <ul>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/clãs.html">CLÃS</a></li>
                </ul>
            </li>
            <li><a href="">FÓRUM</a>
                <ul>
                    <li><a href="_html/fórum.html">FÓRUM</a></li>
                    <li><a href="_html/lista-negra.html">LISTA NEGRA</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

 

[DD_Dev 2]

Obrigado pelas dicas!

[Pita 53]

Cara, eu acho que a principal diferença entre desenvolvimento desktop e web é entender profundamente o conceito da web:

navegador - [nuvenzinha da internet] - servidor

 

Diferente do desktop, onde você tem todos os recursos a sua disposição, na internet você tem que entender que tudo que você fizer no servidor vai virar um HTML/JS/CSS, que são as unica coisas que o navegador entende, e quando você envia a página para o cliente, ele não terá acesso aos dados do servidor.

 

Isso na minha opinião é o mais importante:

navegador - [nuvenzinha da internet] - servidor

Qualquer coisa que você fizer, por mais absurdamente legal que seja, e olha que eu já fiz muita coisa legal, no final vai virar um HTML/JS/CSS.

 

E olhar isso também:

navegador - [nuvenzinha da internet] - servidor

 

Isso é para qualquer linguagem, C#, PHP, JAVA, Ruby, Go, etc, sempre vai ter a "navegador - [nuvenzinha da internet] - servidor" e HTML/JS/CSS no final.

[luiz14 16]

Em 24/07/2017 at 14:11, Kimo Gordinho disse:

tomará que vá agora

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Agency FB", "Aharoni", "Algerian", "Andalus", "Angsana New", "AngsanaUPC", "Aparajita", "Arabic Typesetting", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold",sans-serif;
    font-size: 20px;
}

nav#menu {
    list-style: none;
    border: 2px solid cadetblue;
    position: absolute;
    left: 23%;
    top: 5%;
    width: 750px;
}

nav#menu li {
    position: relative;
    float: left;
    border-right: 50px solid white;
}

nav#menu li a {
    color: #333;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
}

nav#menu li a:hover {
    background: #333;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

nav#menu li ul {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    display: none;
}

nav#menu li:hover ul, #menu li.over ul {
    display: block;
}

nav#menu li ul li {
    border: 0;
    display: block;
    width: 150px;
}

 

agora em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>CROSSFIRE Ideal</title>
    <link rel="stylesheet" type="text/css" href="_css/início.css">
</head>
<body>
    <nav id="menu">
        <ul type="none">
            <li><a href="">NOTÍCIAS</a>
                <ul>
                    <li><a href="_html/notícias.html">NOTÍCIAS</a></li>
                    <li><a href="_html/atualizações.html">ATUALIZAÇÕES</a></li>
                    <li><a href="_html/eventos.html">EVENTOS</a></li>
                    <li><a href="_html/feeds.html">FEEDS</a></li>
                </ul>
            </li>
            <li><a href="">JOGO</a>
                <ul>
                    <li><a href="_html/visão-geral.html">VISÃO GERAL</a></li>
                    <li><a href="_html/começando-o-jogo.html">COMEÇANDO O JOGO</a></li>
                    <li><a href="_html/modos.html">MODOS</a></li>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/arsenal.html">ARSENAL</a></li>
                    <li><a href="_html/patentes.html">PATENTES</a></li>
                    <li><a href="_html/download.html">DOWNLOAD</a></li>
                </ul>
            </li>
            <li><a href="_html/mídia.html">MÍDIA</a></li>
            <li><a href="início.html">CROSSFIRE Ideal</a></li>
            <li><a href="">RANKING</a>
                <ul>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/clãs.html">CLÃS</a></li>
                </ul>
            </li>
            <li><a href="">FÓRUM</a>
                <ul>
                    <li><a href="_html/fórum.html">FÓRUM</a></li>
                    <li><a href="_html/lista-negra.html">LISTA NEGRA</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

 

Não estava conseguindo enviar mensagem desde ontem, mas agora parece que normalizou. Você sabe trabalhar com Jquery? Você pode utilizar o show() ou fadein() para para regular a velocidade que o submenu vai aparecer e o hide() ou fadeout() para regular a velocidade que o submenu desaparece, mas pelo que percebi o seu problema é que, as vezes, antes de conseguir chegar aos submenus, eles desaparecem, certo? Parece que tem um espaço vago entre o menu e os submenus que faz isso acontecer, esse é o seu problema?