Quer ter acesso a todos os cursos desse Guia?

Guia Completo de CSS

Nesse Guia de Consulta você encontrará o conteúdo que precisa para iniciar seus estudos em CSS, recurso fundamental para a construção de páginas web.

120
Guias HTML e CSS Guia Completo de CSS
120

    Mais conteúdos de CSS

    Exercícios

    Introdução

    Chegando agora na programação web? Sem problema! Assista ao vídeo abaixo e tire as suas primeiras dúvidas.

    CSS é a linguagem que cuida da aparência de uma página web.

    • Não é uma linguagem de programação
    • É aplicado ao HTML
    • Usa regras e propriedades para customizar elementos

    Assista ao curso abaixo onde falamos sobre essas e outras características em detalhes.

    O que é CSS?
    Curso
    O que é CSS?

    Tais propriedades dos elementos, bem como os seus valores, são escritas em regras, assunto do artigo abaixo:

    Uma regra é conectada com um elemento a partir de um seletor. No artigo abaixo falamos sobre os seletores de elemento, classe e id, que são os mais utilizados.

    Pronto para avançar? Ótimo!

    No próximo conteúdo conheceremos algumas das propriedades dos elementos de texto e com isso vamos praticar o que aprendemos até aqui.

    Hora de se certificar! 🎉🎉🎉

    Vamos certificar o que aprendemos até aqui? Siga em frente e resolva alguns exercícios selecionados para você e consiga o seu primeiro certificado!

    Carreira Front-end: CSS
    Exercícios
    Carreira Front-end: CSS

    Praticando

    Para dominar o CSS é preciso praticar. Somente dessa forma, estilizando páginas, testando suas funcionalidades você se sentirá “confortável” com essa linguagem e preparado para avançar nos estudos. Para lhe ajudar nessa etapa separamos alguns conteúdos:

    Artigos:

    Cursos:

    Quer ver mais exemplos práticos envolvendo CSS? Então não deixe de acessar o Guia Cenários Práticos Front-end no link abaixo :)

    Guia de Referência Front-end web na prática
    Guia
    Front-end web na prática

    Flexbox

    Flexbox é um recurso do CSS3 que permite organizar elementos dentro de um container de forma eficiente, mesmo que suas dimensões variem, como na Figura 1.

    Exemplo de flexbox
    Figura 1. Flexbox

    Atualmente o Flexbox é extremamente importante para implementar a responsividade em páginas web, portanto saber utilizá-lo é fundamental para o programador front-end atualmente. No link abaixo você verá uma introdução a esse recurso e conhecerá as propriedades do CSS envolvidas no seu uso:

    Documentação: Flexbox
    Documentação
    Flexbox

    Já no curso e exemplos abaixo você verá algumas possibilidades práticas de uso do flexbox na construção de layouts responsivos:

    Media Queries

    As media queries são regras do CSS que nos permitem aplicar determinadas formatações apenas em condições específicas. Por exemplo, por meio delas podemos aplicar certos estilos somente quando a página for acessada através de um dispositivo com certas dimensões mínimas ou máximas, bem como quando a página for visualizada em modo impressão.

    Esse recurso é também amplamente empregado para obter a característica de responsividade nas páginas, fazendo com que elas se comportem adequadamente em dispositivos com diferentes dimensões. Para isso, normalmente verificamos a largura do dispositivo e aplicamos em cada situação estilos específicos para dar ao conteúdo a melhor apresentação.

    Para aprender a usar as media queries você pode consultar o seguinte conteúdo:

    Em seguida, nos exemplos abaixo você poderá ver situações práticas de uso das media queries:

    Documentação

    Nesta seção você encontrará conteúdos criados com o intuito de documentar os recursos do CSS, apresentando o que é e a aplicabilidade de cada recurso juntamente com um exemplo prático. Utilize esse material para consulta rápida:

    Pré-processadores

    Pré-processadores são ferramentas cujo objetivo é otimizar a escrita de folhas de estilo. Eles oferecem uma sintaxe mais robusta, com recursos que não estão presentes no CSS, e que auxiliam na construção de front-ends. No curso abaixo você conhecerá o LESS, um dos principais pré-processadores de CSS do mercado:

    O que é LESS?
    Curso
    O que é LESS?

    Conteúdo Extra

    Aqui separamos um conteúdo adicional para que você possa aprofundar seus estudos no CSS:

    Próximos passos

    Desenvolvimento web é uma área ampla e que requer o conhecimento de várias tecnologias, mas no que diz respeito ao front-end, três são fundamentais: HTML, CSS e JavaScript.

    Caso queira rever os conceitos de HTML, sua estrutura, tags, etc., sugerimos que acesse o Guia de Referência HTML. Se, por outro lado, preferir avançar no estudo de outras linguagens para o front-end, a dica é acessar o Guia de Referência JavaScript:

    E se quiser colocar em prática tudo que aprendeu de HTML, CSS e JavaScript, uma boa ideia é ver o Guia que traz Cenários Práticos de Front-End:

    Front-end Web na prática
    Guia de consulta
    Front-end Web na prática Guia

    Por fim, com uma boa noção de CSS e já tendo visto JavaScript, um interessante próximo passo é conhecer alguns frameworks que podem facilitar seu trabalho, por já oferecerem componentes e formatações amplamente utilizados no nosso dia a dia. A seguir separamos o Guia de Referência sobre o principal framework atualmente:

    Guia de Referência de Bootstrap
    Guia de consulta
    Bootstrap Guia

    Além disso, a DevMedia publica com frequência novos conteúdos sobre front-end, os quais você pode conferir nos Guias de Consulta abaixo:

    E você pode conferir todo o conteúdo de Front-end clicando aqui.

    <Perguntas frequentes>
    Carreira
    Por onde devo iniciar os estudos?
    Recomendamos começar pelo Plano de Estudo Carreira Programador Front-End. Essa área da programação é mais visual e intuitiva, tornando-a ideal para iniciantes. No Front-End, você aprenderá a criar a parte visual dos sites, como layout, cores e interatividade. Depois de dominar o Front-End, você pode avançar para Programador Back-End, onde aprenderá a lidar com a lógica e o funcionamento interno dos sites, e, finalmente, para Programador Mobile, focando no desenvolvimento de aplicativos para smartphones. Nossa metodologia é estruturada de forma progressiva para garantir que você desenvolva confiança e experiência ao criar projetos reais, como sites estáticos e dinâmicos.
    Em quanto tempo vou me tornar um programador?
    O tempo necessário para se tornar um programador varia de acordo com a dedicação de cada estudante. Com nossa metodologia, que inclui um Plano de Estudo detalhado e suporte contínuo, você pode se tornar um programador de 6 meses a um ano, dependendo do seu ritmo e esforço. Nossa abordagem prática e orientada a projetos ajudará a acelerar seu aprendizado.
    Eu preciso de um diploma de faculdade para começar a atuar como programador?
    Não. Ser programador é uma excelente oportunidade para quem não possui diploma de faculdade. Muitas empresas contratam baseadas nas habilidades técnicas e experiência prática, não necessariamente em diplomas. Após conquistar uma vaga, você pode optar por complementar sua formação com um diploma.
    Por que a programação se tornou a profissão mais promissora da atualidade?
    A necessidade de programadores cresceu exponencialmente, especialmente após a pandemia de Covid-19, que forçou muitas empresas a se adaptarem ao digital. Com o crescimento das empresas de tecnologia, a demanda por programadores aumentou. Atualmente, há mais de 200 mil vagas abertas no Brasil devido à falta de profissionais qualificados.
    Metodologia
    Quais são os principais diferenciais da DevMedia?
    Didática e Metodologia Com mais de 20 anos de experiência, nossa metodologia foca em menos aulas e mais prática. Desenvolvemos dezenas de projetos e exercícios para ajudar você a se tornar um programador completo. Nossos projetos são desafiadores e autênticos, não apenas exercícios repetitivos.
    Projetos reais e exercícios Você desenvolverá diversos projetos práticos em cada carreira (Front-End, Back-End e Mobile), recebendo mentoria e suporte contínuo. A prática é essencial, e oferecemos milhares de exercícios para ajudar você a fixar o conteúdo e melhorar sua posição no ranking.
    Suporte ao aluno Nossa plataforma oferece suporte dedicado com professores experientes, respondendo suas dúvidas em menos de uma hora. Isso garante que você receba a ajuda necessária durante toda a sua jornada de aprendizado.
    Gamificação A DevMedia utiliza gamificação para tornar o aprendizado mais envolvente e motivador. Você acumula pontos e moedas por acertos, que podem ser trocados por produtos e customizações no seu card pessoal. Além disso, o sistema de ranking mensal incentiva a competição amigável e a melhoria contínua.
    O que eu irei aprender estudando pela DevMedia?
    Ao estudar conosco, você se tornará um programador Full Stack, dominando Front-End, Back-End e Mobile. Utilizamos a linguagem JavaScript, a mais utilizada no mercado, preparando você para criar sistemas webs e aplicativos celulares. Nossa abordagem prática inclui exercícios para fixar o conhecimento e desenvolvimento de projetos reais que te preparam, para o mercado de trabalho.
    Quais as vantagens de aprender programação através da linguagem JavaScript?
    1. Ela é Multiplataforma, ela vai te permitir programar para web e para celulares utilizando praticamente a mesma sintaxe.
    2. Elá é Full Stack. Ela te permite criar aplicações Front-end, Back-end e Mobile. Isso acelera muito sua carreira e aumenta suas possibilidades de pegar trabalhos autônomos e conquistar uma vaga no mercado.
    3. Ela é fácil de aprender. Como ela não exige conhecimento inicial em “Orientação a Objetos” ela se torna mais simples com uma curva de aprendizado suave e vai te permitir começar a programar mais rápido do que outras linguagens
    A plataforma oferece certificados?
    Sim, oferecemos dois tipos de certificados: o certificado de conclusão, que você adquire ao consumir o conteúdo, e o certificado de autoridade, que você obtém ao acertar exercícios. Ambos possuem carga horária, que pode ser utilizada para fins acadêmicos, como atividades complementares na faculdade, e também para comprovações em processos seletivos ou no seu currículo.
    A plataforma tem suporte ao aluno, como funciona?
    Sim, temos uma equipe de programadores pronta para ajudar com todas as suas dúvidas! Durante o horário comercial, o tempo médio de resposta é de até 10 minutos. E não se preocupe, também oferecemos suporte à noite e nos finais de semana, com um prazo de resposta um pouco maior.
    A DevMedia me forma como programador Full Stack?
    Sim! Oferecemos uma formação completa, do zero até Full Stack. Nosso foco é na prática, então você vai encontrar muitos exercícios e projetos reais ao longo do curso. Garantimos que você sairá com a autonomia necessária para desenvolver seus próprios projetos com confiança!
    Tem horário para as aulas?
    Não, não temos horários fixos para as aulas. Todo o nosso conteúdo está disponível para você acessar a qualquer momento, permitindo que você estude conforme sua própria disponibilidade e ritmo. Dessa forma, você pode integrar o aprendizado à sua rotina de maneira mais flexível e eficaz.
    Por que a DevMedia não usa videoaulas em sua didática?
    Nosso foco principal é formar programadores de verdade. Sabemos que o dia a dia de um programador envolve muita leitura, interpretação e escrita de código. Por isso, nosso conteúdo é desenvolvido para ambientar você nesse processo desde o início, proporcionando mais autonomia e acelerando seu aprendizado.
    Na vídeo-aula é o professor que está lendo, interpretando e escrevndo o código para você, isso limita o seu progresso. Ao ler e interagir diretamente com o conteúdo, você exercita sua capacidade de leitura e concentração, além de poder avançar no seu próprio ritmo. Dessa forma, você se torna um programador mais independente e preparado para os desafios reais do mercado.
    Preciso de um computador específico para estudar na DevMedia?
    Não é necessário nada específico. Qualquer computador com processador atual e memória de 8 GB é suficiente.
    Eu consigo estudar pelo celular?
    Sim, a DevMedia possui um aplicativo que te permite seguir com seus estudos de qualquer lugar.
    A DevMedia tem aplicativo?
    Sim, nosso aplicativo está disponível na Play Store e na Apple Store, permitindo que você estude de forma prática e conveniente em qualquer lugar.
    Preciso estar na faculdade para acompanhar os estudos na DevMedia?
    Não, a faculdade não é necessária. Você não precisa de nenhum conhecimento prévio para iniciar os estudos na nossa plataforma.
    Assinatura e Pagamentos
    Quais são os planos de assinatura disponíveis?
    Oferecemos o plano anual, o valor total é lançado no cartão de crédito, parcelado em 12 vezes, e você precisa dispor do valor total no limite do seu cartão. Você também pode optar por pagar no PIX
    Adquirindo o plano, terei acesso a todo o conteúdo?
    Sim, ao assinar nossa plataforma, você desbloqueia acesso total a todo o nosso conteúdo, sem precisar comprar nada separadamente.
    A plataforma tem planos vitalícios?
    Não, nossos planos são anuais, garantindo que você tenha acesso contínuo às atualizações mais recentes e aos novos conteúdos. A tecnologia evolui rapidamente, e um plano vitalício oferece um conteúdo estático que se tornará ultrapassado em pouco tempo. Com nossos planos anuais, você está sempre à frente, aprendendo as novidades e tendências mais atuais no mundo da programação.
    A DevMedia tem fidelidade?
    Sim, nosso plano tem uma fidelidade de 12 meses, o que garante o tempo ideal para você explorar nosso conteúdo e desenvolver a autonomia necessária para trabalhar com programação.
    Como funciona o cancelamento?
    Nós garantimos seu direito de cancelamento com reembolso total dentro dos primeiros 7 dias.
    Para que você aproveite ao máximo seu investimento, oferecemos suporte personalizado para orientá-lo na utilização da plataforma. Também temos a opção de transferência de titularidade do plano, permitindo que outra pessoa aproveite o restante do seu período de assinatura.
    Cadastro
    Como excluir meus dados da plataforma?
    Para excluir seus dados da plataforma, acesse o link : https://www.devmedia.com.br/fale-conosco/ e abra um protocolo de 'Exclusão de dados'. Nossa equipe processará a solicitação e removerá todas as informações do seu cadastro.
    • Favoritar

    Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

    Aceitar