Matheus Fernandes

Latest comments

• 

  Andressa Karen•100

  @andressakaren

  Submitted about 1 year ago

  What are you most proud of, and what would you do differently next time?

  PT-BR

  • Este é o meu primeiro desafio do projeto, e estou muito feliz por concluí-lo. Estou aprendendo muito com este primeiro passo que dei. Na próxima vez, incluirei mais comentários e me esforçarei para fazer um código mais limpo.

  EN

  • This is my first project challenge, and I'm very happy to conclude it. I am learning a lot with this initial step that I've taken. Next time, I will include more comments and strive for cleaner code.

  What challenges did you encounter, and how did you overcome them?

  PT-BR

  • Tive que aprender sobre 'display: flex' e alguns atributos para concluí-lo.

  EN

  • I had to learn about 'display: flex' and some attributes to conclude it.

  What specific areas of your project would you like help with?

  PT-BR

  • Qualquer feedback é bem-vindo para que eu possa aprimorar minhas habilidades.

  EN

  • Any feedback is welcome so that I can improve my skills.

  

  QR-code-component using basic HTLM/CSS

  2

  110
  

  Matheus Fernandes•340

  @xtirian

  Posted about 1 year ago

  Parabéns, Andressa, seu código beirando a perfeição. Parabéns. continue assim

  0
• 

  Sazzadur Rahman•80

  @sazzad88

  Submitted almost 2 years ago

  

  Workit landing page

  1

  20
  

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Hello, @Sazzadur.

  This curvy background was really difficult to me too.

  The best way I found to represent that was using a different element with the who inherit the color of his parent with width 100%. In the CSS I use the relative position to position in the bottom of the parent. The curve pattern I use this code:

  .ellipsePattern {
    background-color: inherit;
  
    width: 100%;
    height: 4em;
    bottom: -4em;
    left: 0;
  
    clip-path: ellipse(60% 100% at top center); <-----
    position: relative;
  

  This was very difficult to reach that solution because it's unusual to do such curve. You can read more about here, if you wanna try: Mozzilla docs

  This function is like this ellipse ( "How curve you want relative to his own size", "Size that starts the curve" at "Position")

  Hope this helps you!

  0

  Marked as helpful
• 

  Paulo Carvalho•80

  @paulo1310

  Submitted almost 2 years ago

  

  Componete de resumo de resultados

  2

  40
  

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Ficou muito bom o seu projeto.

  A única dica que eu te dou, é que pode usar o gradient, e é mais comum de se ver dessa forma, usando o background apenas. Na sua aplicação está assim:

  .coluna1 .circle {
  ...
  background-image: linear-gradient(180deg, hsl(241, 81%, 54%),hsla(241, 72%, 46%, 0));
  }
  

  E poderia ser apenas assim:

  ...
  background: linear-gradient(180deg, hsl(241, 81%, 54%),hsla(241, 72%, 46%, 0));
  

  Outra dica que posso te dar, já que mencionou o github, é sobre os commits que tem feito. Assisti uma mentoria de um recrutador recentemente e o rapaz falou que os commits são sempre bem vistos, então, é bom fazer os commits por etapas do seu processo para demonstrar como você avançou nas etapas do projeto. Por exemplo:

  - Commit 1: Adicionando arquivos iniciais do projeto (só o index e as imagens)
  - Commit 2: Adicionando a estrutura html e os textos
  - Commit 3: Adicionando base de estilos
  - Commit 4: Adicionando estilos da pg
  - Commit 5: Adicionando responsividade
  - Commit 6: Consertando bug na coluna 1
  ....
  

  No geral o código está bem organizado e objetivo. Você definitivamente não coda como um iniciante.

  0

  Marked as helpful
• 

  SonLuka•60

  @SonLuka

  Submitted almost 2 years ago

  

  Responsive landing page using CSS Flexbox and Grid.

  1

  50
  

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Hello @SonLuka, hope find you well.

  So, I'm in the same situation. So I researched for some things to make my CSS look more organized.

  So the first thing is pull apart the CSS by context with comments. Example of what I do: CSS

  /* Variables */
  :root { 
    - - primary-color: #fefefe
    - - secondary-color: #0f4a28
  }
  /* Resets */
  
  * {
    margin:0
    padding: 0
    box-sizing: border-box
  }
  
  /* Base Styles */
  
  .Button1{
  ....
  }
  .Card1{
  ....
  }
  .Card2{
  ...
  }
  
  /* Typography */
  Heading1 {
  ...
  }
  bodyText{
  ...
  }
  
  /* Header */
  And from here I'll go adding more specific atributes for the elements from top to bottom of the page. 
  And if its possible, alway mark with a comment what part of the HTML it will affect.
  

  The second tip, and I didn't used that, was creating a folder for CSS and inside it pull apart the code by context in different files.

  css(folder)
       |_ baseStyles.css
       |_ resets.css
       |_ cards.css
       |_ mainPage (folder)
                 |_ header.css
                 |_ main.css
                 |_ productCard.css
                 |_ footer.css
       |_ salePage (folder)
                 |_ header.css
                 |_ paymentCard.css
  
  
  

  The main difference s that you will have to import all the css files in diferent <link rel="styleSheet" > tags. This practice isn't so usual when you are programming just with HTML and CSS and landing pages, but if you keep your studies and progress with JS later, you probably will start some framework like ReactJS (could be another) and in this frameworks, the styles are made for each component in different files. This tip of folders are good too when you have different pages, and you can import something you already did in another and reuse, then create a file just for some specific styles.

  The last tip I have after my researches, was using a Preprocessor CSS. I started using SASS as a preprocessor and helpedme just because make CSS looks more simple than it is, and the commands and features isn't hard to learn. I super recommend you to give a try in SASS if you are confident. I learned from a youtube channel. I saw this video, took notes and instead of practice in the project that the guy is doing in the video, I practiced in one project here in FrontEnd Mentor.

  So, that's all I have to tell right now about this. Thank you and have a great weekend.

  0

  Marked as helpful
• 

  Diogo•100

  @diogo-kappaun

  Submitted almost 2 years ago

  

  HTML | CSS | Semantic Tags | Animations

  #accessibility

  1

  30
  

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Hello, my friend. Hope you are doing well.

  I saw that you use the overflow: hidden in the body when i'm sure you wanted use overflow-x: hidden

  Also, how you did the animations? It work jut with the delay?

  I didn't find any js file in your code.

  0

  Marked as helpful
• 

  Sazzadur Rahman•80

  @sazzad88

  Submitted almost 2 years ago

  

  Meet landing page using both grid and flexbox

  1

  30
  

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Hey friend! Hope you are doing well.

  I don't have suggestion, just want to ask you something. I really liked the way you solved the footer part. Can you explain me what is the logic?

  footer::before {
      content: '';
      position: absolute;
      background-color: rgba(77 150 169 / 0.9);
  }
  

  Basically you create an empty content before the footer with the background-color, am I right?

  But, do you know why this content created before the footer isn't covered by the footer img?

  I had to create a div inside the footer to be like a colored glass between the footer img and the content.

  0