Desenvolvimento Front-end : Como dominar HTML,CSS e JAVASCRIPT
- #HTML
- #JavaScript
- #CSS
Instruções para o estudo de desenvolvimento Web com as três principais tecnologias que compõem esse vasto cenário.
O desenvolvimento de soluções para Web de uma forma geral é um campo que relaciona-se com a criação de sites e sistemas para a famosa internet. Neste contexto é necessário não somente conhecer, mas ter domínio das tecnologia mais importantes , que formam a web , e são elas : HyperText Markup Language, a famosa HTML, Cascading Style Sheets , a importante CSS, e JavaScript a imprescindível JS. Neste pequeno artigo vamos explorar alguns pontos do que precisamos aprender dessas tecnologias incríveis.
HyperText Markup Language
A HTML é a tecnologia que tem como objetivo marcar sua estrutura com hipertextos,dando a base de sustentação inicial ao corpo da aplicação web. Ela é formada por elementos de marcação conhecidos por nome de Tag , que tem o objetivo de demarcar partes do documento , e dentre elas estão as principais como : Doctype, Html , Head ,Title, Body e Footer. Vamos neste artigo observar quais áreas de estudo devemos dar uma atenção específica.
Tags semânticas:
Estas são tags que permitem que a estrutura da página tenha um significado específico direcionado ao conteúdo posto na página, ajudando os usuários e direcionando os mecanismos de busca com precisão. Exemplo, utilizar a tag <head> para o cabeçalho da página, a tag <nav> para o menu de navegação, a tag <section> para as seções do conteúdo principal, etc.
Formulários:
São elementos que possibilitam colher informações dos usuários por meio de campos de entrada como os inputs, botões , caixas de seleção , e assim por diante. É preciso definir o método Get ou Post e a Ação url que compõe o envio , além de usar tags como label que permite parte do controle de formulário, Fieldset e Legend para organizar os campos agrupando elementos semelhantes descrevendo-os com legenda.
Multimídia
Também são elementos, e estes permitem colocar conteúdos de mídia na página, como imagens <img>, áudios <audio>, vídeos <video> e iframes <iframes>. É preciso definir os atributos como src que indica o caminho da imagem , alt que indica um texto alternativo, etc.
Links e ancoragem
Estes são elementos que permitem criar links, ou seja, ligações entre páginas ou dentro da mesma página. O desenvolvedor web de saber como criar links internos e externos usando a tag <a>, e como usar âncoras para navegar dentro da mesma página.
Cascading Style Sheets
CSS é a linguagem de estilização que é responsável pela aparência e o layout dos sites, ou páginas web. Ela é formada por regras que associam elementos do html , chamados seletores. São propriedades que definem estilos. Alguns tópicos valiosos para estudar são:
Seletores e propriedades:
Estes compõem os elementos fundamentais da css, que possibilitam selecionar os elementos contidos na html e aplicar estilos a eles. Existem muitos tipos desses seletores, como por tag, por classe, por id, por atributo, por pseudo-classe, por pseudo-elemento, e por aí vai. As propriedades são divididas em categorias, como fonte, cor, fundo, borda, margem, padding, etc.
Layout e posicionamento:
Estes definem como os elementos são organizados ou posicionados na página. Existem diferentes formas de posicionar os elementos, como usando as propriedades position (static, relative, absolute, fixed ou sticky), display (block, inline, inline-block ou none), float (left, right ou none) ou clear (left, right ou both). Além disso, existem propriedades que controlam o alinhamento dos elementos, como text-align, vertical-align ou align-items.
Box model:
É o famoso modelo de caixa . Este define como cada elemento é representado na página como uma caixa retangular. É muito importante saber que o box model em si, é um conceito primordial da html, tendo seu desfecho na css porque termina em estilização. O modelo de caixa traz sua estruturação na html. Cada caixa possui quatro partes: conteúdo (content), preenchimento (padding), borda (border) e margem (margin). É possível alterar o tamanho e a forma das caixas usando propriedades como width (largura), height (altura), box-sizing (modo de cálculo), border-radius (raio da borda), etc.
Flexbox e grid:
São conjuntos de elementos de layout modernos e flexíveis que possibilitam construir layouts complexos e que se comportam de forma adequada em diferentes dispositivos com facilidade. O flexbox permite organizar os elementos em uma dimensão única (horizontal ou vertical), enquanto o grid permite organizar os elementos em duas ou mais dimensões (linhas e colunas, verticais e horizontais). Para usar esses sistemas, é preciso definir um elemento pai como display: flex ou display: grid e usar propriedades específicas existentes em cada um deles.
Responsividade:
Este termo faz referência a capacidade de adaptar o layout e o conteúdo do site às diferentes telas de dispositivos dos usuários. Para que isso seja possível ,é preciso usar unidades relativas como %, em, rem ou vw, em vez de absolutas como px ou pt, também torna-se interessante utilizar imagens fluidas que se ajustam à largura do contêiner e media queries que permitem aplicar estilos condicionais de acordo com a largura da tela ou outras características do dispositivo.
JavaScript
Javascript é a linguagem de programação que permite adicionar comunicação, dinamismo , lógica aos sites e inclusive interação com o usuário. Ela é executada diretamente no navegador do usuário e pode manipular os elementos da página. Além dos fundamentos da linguagem, como variáveis, tipos de dados, operadores, estruturas de controle e funções, é importante conhecer os seguintes tópicos:
Compreenda os fundamentos:
Comece com os conceitos básicos, como variáveis, tipos de dados, operadores e estruturas de controle (if, else e loops).
Eventos
Eventos são acontecimentos na página que podem ser de diversos tipos como : Carregamento , teclados , mouse passando encima elementos, mouse saindo de cima de elementos etc. Estes podem ser captados pelo javascript e iniciar funções que modificam o comportamento comum da página.
Funções e objetos
Funções são basicamente blocos de instruções , que nós programadores chamamos de bloco de códigos. Tem o objetivo de não precisar repetir o mesmo código várias vezes, além de poder ser executadas no momento oportuno.
Já os objetos são coletâneas de dados que permitem que a aplicação trabalhe com situações do mundo real. Eles possuem métodos(ação de um objetos), e propriedades(características de um objetos), e estão sujeitos a eventos.
Promises e Async/await
São recursos que permitem lidar com operações assíncronas, ou seja, que tem sua execução de código enquanto esperam uma outra resposta. Por exemplo, ao fazer uma requisição a uma API (Application Programming Interface )externa, podemos usar uma promise para tratar o sucesso ou o erro da resposta, ou usar o async/await para escrever um código mais comum e fácil de entender.
Métodos array
São funções que permitem manipular dados também conhecidos como vetores de forma mais fácil e mais bonita. Os exemplos indispensáveis são : map, filter, reduce, find,sort, etc. cada um desses são métodos que podem ser utilizados para manipular , os dados desejados contídos no array.
Conclusão sobre desenvolvimento web e o estudo do HTML, CSS e Javascript
O desenvolvimento web é uma área que envolve a criação de sites e aplicações para a internet, e muitos dispositivos . Para isso, é necessário o domínio de linguagens de marcação, estilo e programação, como HTML, CSS e Javascript. Essas linguagens permitem definir a estrutura, o layout e o comportamento dos elementos que formam uma página web, e aplicações para computadores de mesa(desktop). O estudo dessas linguagens é fundamental para quem deseja se tornar um desenvolvedor web profissional e atualizado com as tendências do mercado.
