@Yazdun
Posted
Hello Guilherme ! Well done on this challenge. I studied your approach a little bit and here are issues I found :
GIT ISSUE
- Before we get to the solution itself, There is a issue with your repo. I suggest you to create a main branch and put each solution on separate branch, so it will be easier to maintain the repo and also other people can contribute to your code more easily !
SOLUTION ISSUE
- You don't need two media queries, first write your style for mobile and only then, write a media query for desktop.
- Instead of
span
, You must usediv
for block level elements, for example.text-content
is a block level element so you must usediv
instead ofspan
. - for stats, You'll be better off with something like
<ul>
<li>10k+<span>companies</span></li>
<li>314 <span>templates</span></li>
<li>12m+ <span>queries</span></li>
</ul>
instead of using div
and span
and heading
. using ul
is more efficient in this case IMO.
- html elements are block level by default ( also this is one of the reason for why approaching mobile first is better ), so you won't need
display:flex
andflex-direction:column
for initial style, you get the column by default. - Specify two font families in your styles, so if one of them is not supported by user's browser, the other one will be loaded and your design won't break.
- Instead of
.page-container
, Use
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
on body
to centralize your element.
- Instead of giving
h1
andp
text-align:center;
, give their parenttext-align:center
and all children will inherit it. - You have access to the initial style you write for a element in media queries, so you only need to change parts that need to be changed, for example you don't need to specify
font-family
in media queries, it will remain the same anyway unless you want to change it. - Use
prettier
extension on your IDE to format your code.
ā Also I opened a pull request to your repo which will fix some of these issues
I hope this was helpful
Marked as helpful
@guilherme-dm
Posted
@Yazdun Thank you so much Yazdun. That was VERY helpful. I'll take a look on these topics you mentioned and at your pull requests.
About the Git issue. Is it possible at this point to separate the challenges i've already made into branches? Having each challenge in a different branch, can I still have a direct link to them? Thanks once again š
@Yazdun
Posted
@guilherme-dm Glad I could help š¤ ! for git issue, Github pages supports only one branch for deployment, so you have two options :
- First is creating separate repository for each challenge which will get messy and hard to manage overtime.
- Second is creating one main repo, put each challenge on separate branch, and then deploy each branch on NETLIFY which is free and really useful ! All you need to do is create a free account, then sync your github with netlify, and each time you create new branch on your main repo, netlify will sync it and you can deploy it with one click on their website.
I do the same with my challenges repo
This way you can sharpen your git skills too which is great in the long run !
Marked as helpful