Just because im a beginner i didn't know where to start that was the most difficult part, and there are somethings that i dont understand yet, for example about add fonts from google or use the apis from google, maybe that's get me freaking out
Hey bro, keep practcing... Heres a thing that u can do to change the fonts:
To use Google Fonts on your HTML CSS web page, follow these steps:
Browse to the Google Fonts website at fonts.google.com and select the font(s) you want to use.
After selecting a font, click on the "Select This Font" button, and then click on the "Embed" tab.
Copy the code provided under the "@import" or "link" tab. Paste the copied code "link" into the head section of your HTML file. The "@import" you paste on first line of your "principal" css, but choose just "link" or "@import" to use ok?
Next, add the font family to the CSS styles for the element(s) you want to use it on. For example, if you want to use the "Open Sans" font on all paragraphs on your page, you can add the following CSS:
css
p {
font-family: 'Open Sans', sans-serif;
}
Note that the font name in the CSS must match the font name in the Google Fonts code.
Save your HTML and CSS files and view your webpage to see the changes.
That's it! Your webpage should now be using the Google Font you selected.
How might've a mobile-first approach benefited me for this challenge?
Hello brother, well done. I'm going to express reasons why i think a mobile first approach could benefit any project. But remember that it's not absolute.If you google it, you will see things as i described and the complete opposite too hahaha. It's on your hand and we need to consider the limitations and the way we are developing our projects
A mobile-first approach to a project can offer several number of benefits, including:
Improved User Experience (UX): With a mobile-first approach, the focus is on delivering a positive experience for users on smaller screens, which can result in a better overall experience for all users, regardless of device.
Better Performance: Mobile devices typically have less processing power and slower internet speeds than desktop computers. By designing for smaller screens first, you can ensure that the site or application is optimized for performance on mobile devices.
Increased Accessibility: A mobile-first approach can help ensure that your site or application is accessible to a wider range of users, including those with disabilities who may rely on assistive technologies such as screen readers.
Increased Responsiveness: A mobile-first design approach can help ensure that your site or application is more flexible and adaptable to different screen sizes and orientations, making it easier to create a responsive design that works well across all devices.
Better SEO: Search engines, like Google, now prioritize mobile-friendly sites in their search results, so a mobile-first approach can help improve your site's search engine ranking and visibility.
By focusing on the needs of mobile users first, you can create a site or application that is user-friendly, accessible, fast, and flexible, which can ultimately lead to increased user engagement, satisfaction, and conversion rates
I had some difficulties while working on this project. One of the main challenges was understanding and implementing flexbox to properly align and position the elements on the page. However, through this project, I was able to learn and understand the different properties of flexbox, and was able to use it to create a visually appealing and responsive design. It was a great learning experience and I'm excited to apply this knowledge in my future projects.
Great job bro. I'm going to share font from where i have been learning flexbox (or learned), just in case u hadnt seen them yet.
Take your time to see them:
Positioning the frog using flexbox A Complete Guide to Flexbox
The first one helped me a lot to gain memory on container and particularly item properties for flexbox. If u hadnt seen them yet, try it...
I wish u the best. Happy coding
I didn't know how to change color of the image so it would be nice if someone could help. I would like to get criticism and know what I am doing wrong so that I can improve it in the future.
Hey... nice there...
To change the color of the image you need to set a background color for the "container" where the image is, so you change the opacity of the image. Doing this way you can see the color of the "container"where the image is set.
An example would be (CSS):
.container-img {
background-color: var(--softViolet);
}
.container-img>.img-mobile,
.container-img>.img-desktop {
opacity: 0.6;
}
Try something like this, adapt to your own code... if you don't get it, i can provide an answer based on your own coding. Apologize the bad english...
See you.. Happy coding
Struggled to get the border radius for social media icons to look just like the design. Any suggestions on how to add that ?
Thanks
WELL DONE HERE...
for the border you can use your class .fa-brands, you don't need (necessarily) a div around each icon to make it to be the border, but considering your code on github try this:
.icon-border{
border: 1px solid white;
border-radius: 50%;
}
The border property will set a 1px border around your icon, and white is the color of the border. The solid" here is like a style, u can check more about it here: Border. The border radius 50% makes the shape circled
Now try to put things in the center with due spacing for them, use the techniques u probably already know about css positioning. If i could help more, please let me know, i'm not an expert but i'll try my best. Let's learn together.
Btw, Happy New Year and Happy coding...
All feedback is welcome
Hello bro... good job u did there, nice and useful...
just a suggestion:
You could try/considerate to add some padding to the bottom of the card (maybe it could be even in the main section), so u can create more space and symmetry considering the space that already exists on the top of the card.
Happy codding, see u around...
O meu maior desafio foi encontrar uma solução para a imagem ativa, após bastante pesquisa consegui uma solução utilizando o background-image, procurei utilizar apenas CSS puro com Flexbox.
Oi Carlos, muito bom trabalho com esse card hã? Pra setar o ativo, você precisa colocar a cor como background-color no seu css dentro da classe em que estiver a imagem:
Esse é seu código em que a imagem está no html:
<div class="container-img">
<a href="./">
<img class="img" src="images/image-equilibrium.jpg" alt="">
</a>
</div>
Sugiro colocar uma classe mais sugestiva que realmente diga o que essa imagem é. Pode não parecer, mas quando um código fica muito grande, a falta de nome sugestivo pode confundir. Eu coloquei uma classe no container e outra na imagem, vou pegar o seu prórpio código pra ficar mais didático. Continuando, você faz assim no css:
.img{
background: #00FFF8;
}
.container-img>.img:hover{
mix-blend-mode: normal;
opacity: 0.5;
}
A classe .background-img coloca um background-color que fica por trás da classe .img (mas veja que você precisa ajustar a a imagem pra cobrir todo o container, senão não funciona). Agora o que faz essa cor de fundo (azul) aparecer ao passar o mouse é a class .container.img>.img:hover, pois faz com que sua imagem fique um pouco transparente (opacity:0,5), e isso faz o background colorido aparecer. Entende?
Eu não vejo utilidade na tag <a> nesse caso. dá pra deixar assim se quiser (com devidos ajustes caso seja necessário, você tem que analisar):
<div class="container-img">
<img class="img" src="images/image-equilibrium.jpg" alt="">
</div>
Tenta isso e me avisa se deu certo... Bora aprender juntos.