Skip to content
OverviewSolutions
0
Comments
5
palharesmagnon
@palharesmagnon

All comments

  • palharesmagnon•85
    @palharesmagnonPosted almost 3 years ago

    Olá, Lara. Sua escolha de marcações HTML parece muito engenhosa pra resolver o problema do conteúdo de texto do card, o alinhamento ficou perfeito, assim como o espaçamento. Como eu também sou iniciante, qualquer coisa que eu tenha a dizer merece um estudo mais aprofundado, então vou adicionar links para artigos ou vídeos, quase sempre em inglês. Bom, uma coisa que eu notei é que no meu notebook, cuja resolução é estranha (1366x766), a imagem e a camada de overlay sofreram deslocamento. Isso ocorre por causa da escolha de usar position: absolute; associado a medidas fixas como px para determinar o tamanho e posição dos elementos renderizados na tela, embora no seu monitor esteja perfeito, em monitores de resolução diferentes isso causará deslocamento. Há várias abordagens possíveis para resolver esse problema, mas antes de abordar qualquer alternativa seria mais proveitoso estudar o funcionamento das várias unidades de medidas relativas/flexíveis já que cada unidade tem um comportamento específico que irá influenciar na forma como você estrutura seu documento HTML. Outro ponto interessante seria desde já adotar uma abordagem semântica para escrever seus documentos HTML5. Isso facilitará no processo de desenvolvimento pensado para usuários com problemas de acessibilidade. Partindo dessa premissa, algumas coisas que já poderiam ser refatoradas no documento HTML seriam por exemplo: <div class="card"> onde <div> poderia ser substituído por <article>, sem perder a formatação. Outra possível mudança seria criar uma lista não ordenada <ul> que irá servir de contenção para os seus elementos <li>10k+<span>Companies</span></li> onde <span> deveria receber a regra display: block; para que o conteúdo se comporte como bloco, quebrando para linha de baixo. O componente card como um todo deveria estar inserido em uma tag <main></main>, onde <main> é a tag que envolve o conteúdo principal de uma página, toda página Web por convenção deveria ter uma tag <main> para identificar seu conteúdo principal. Há outras soluções mais fáceis para resolver o posicionamento dos elementos na tela, uma delas é utilizando CSS Grid e FlexBox. Até mais \o/ Happy code!

    Marked as helpful
    0
  • palharesmagnon•85
    @palharesmagnonPosted almost 3 years ago

    Olá, Lara, sua solução me parece excelente, robusta e muito próxima ao design original, que é o real objetivo. Entretanto eu notei algumas coisas que gostaria de compartilhar com você se não se importar. Seria mais fácil para o restante da comunidade apreciar o seu trabalho e fornecer feedbacks instrutivos se você puder configurar seu código no github pages de modo que seja possível fazer um preview funcional da sua solução, para isso você precisa garantir que seu index.html esteja na raiz do seu repositório, naturalmente, se você quiser, terá que corrigir a chamada para sua folha de estilos, após isso feito, nas configurações do seu repo, ao clicar na opção Pages, na sessão Source você pode manter o seu branch Main selecionado e escolher a pasta /(root). Se você quiser, visite meu repositório para ver como eu tenho organizado os arquivos das minhas soluções para funcionar com o GitHub Pages. Se você gostar de receber feedbacks da comunidade para avançar seus conhecimentos, então eu também sugiro que submeta suas soluções com as descrições em Inglês, e deixe um pedido de feedback também em Inglês no campo Questions for the community (optional), porque a plataforma separa as soluções que querem feedback, das que não solicitaram feedback, como a sua. Se você ainda não se juntou à comunidade Frontendmentor do Slack, eu sugiro que entre também, se você quiser claro. Até mais :) Happy code!!! Espero que continue realizando mais desafios

    Marked as helpful
    0
  • Ana Gogebashvili•10
    @annabelskaSubmitted about 3 years ago

    Hello! I am a total newbie and this is my first challenge on Frontend Mentor. I tried my best using only HTML+CSS and don't know how well is written my code, so any feedback, suggestions, comments are highly welcome.

    Responsive landing page, CSS flexbox...

    2
    palharesmagnon•85
    @palharesmagnonPosted about 3 years ago

    Hello @annabelska. Your solution is really great. I'm a newbie too, but maybe I can give you some tips.

    1. The mobile-first strategy is the best approach to achieving a responsive layout and reducing code complexity
    2. It would be better to use semantic tags in the html. For example, you could use <article class="container"> instead of <div class="container">. Semantics
    3. It's a good idea to look for CSS design patterns and conventions. Like the BEM naming convention. This helps to better organize our codes and reduces the complexity of markup in the html file
    4. I really think it's time you gave your CSS super powers. There are some CSS preprocessors out there, but the most used is Sass
    5. It is very important that you start using relative rather than fixed units for your responsive design. That's it. Happy code
    Marked as helpful
    0
  • Magda•50
    @magude6Submitted about 3 years ago

    I added the mobile version style and changed the selectors a little to create a clearer view of the code. Still no idea how to do the picture on the right!

    Better cs selectors and mobile version

    1
    palharesmagnon•85
    @palharesmagnonPosted about 3 years ago

    Hello, very nice work, your image look's very close to the design. If you looking for another way to solve this blend mode problem, you can try background-blend-mode: multiply. However, you'll need set a background-color before:

    background-color: hsl(277, 64%, 61%);
background-image: url("path/to/the/image.jpg");
background-blend-mode: multiply;
opacity: .7;
    0
  • palharesmagnon•85
    @palharesmagnonPosted over 3 years ago

    Very nice work. Add a "role" property to your main div with the value equal "main" to solve this landmark accessibility issue

    Marked as helpful
    0