The project looks differently a bit missed up when I close the dev tools, but while the dev tools is open all breakpoints works perfectly with media queries..
Hello H-Keshk,
nice to see your solution to the challenge.
I would the first div, to have a class which describes the module you style like a ".card" or something similar. so the div wouldn't be :first-child, but div.card. So you'll be able to other divs on the page, than only that one.
You should use a button only, when there is a real action, like open/close/formsubmit anything like that and for the profile links, a list ul/li with a tag links in each child.
in image alt tag, dont use 'image of/picture/image'. For the screenreader and user it is already known that its an image.
instead of have that many different sizes for the overall card, it might be, without media queries, enough to have width: min(380px, 100%); which basically means, the element will be width: 380px, if there is enough space, otherwise 100% width.
Hi, guys ! I am very proud with my project, because this is the first time I ever build something without the help of Youtube. I know that my code is messy and all this rem % and px are not very clear to me, and probably you will find so many mistakes, and discrepencies with the real photo, but overall I can't even describe how happy and proud I am with myself. I will go to buy me an ice cream to reward myself :D Please guys and gals, dismentle me, its only up and forward from where I am, so I can't wait.
What specific areas of your project would you like help with?some easy way to remember and understand how to use css units and also responsive design is not very clear to me yet
Hey xristevich,
nice that you finished a challenge. We all went once the same way you do now. Sometimes people forget about that :)
General Measurements: I would just recommend a external site for difference about measurements, like this one https://www.freecodecamp.org/news/css-units-when-to-use-each-one/ Maybe just build a test page put some divs and child ones inside another put different background colors on it and experiment with different units described in the article.
social-links-image:
In the avatar image part, you tried to center the image with flex, which is overall a great approach, the smallest part you should know in the beginning to make this part, without usage of padding-left is how flex-direction: row | column changes the way align-items/justify-content work. Default if you use display:flex is flex-direction: row, even if you don't define it. if this is given and you do align-items: center, it will center the child vertically (try it by give the parent .social-links-image a height for testing purpose) and when you change flex-direction to column, align-items: center will center the child nodes horizontal. justify-content will work vice versa.
#container-social-links
Instead of every element to have a padding left, you could do a padding on the hole container mentioned, and your divs text-number-X could than just have a width of 100% percent, which you'll learn in the above article is seeing relative to its parent.
just read through some of your raw css:
in your p tag you tried to use align-items: center;
but this and justify-content will only work, when you use it together with display: flex;
EDIT: the block level / inline was not that relevant here
.text-number-X
Instead of divs you should use an unordered list ul >li (list-style: none) the including links a, to have a real list of links to your profiles. Also for identical type of items you can use all the same class. in your solution the only one difference visible is the padding-left. So dont repeat yourself. you need to learn how to overwrite and extend css. just put the sharing part, all equals into one class like ".text-number" and then add a second value to attribute class like 'github'. the more precise css will overwrite less precise (, or on same level, the later will overwrite the first expression)
ex.:
//HTML
<div class="text-number github">bla</div>
<div class="text-number frontend-mentor">bla</div>
<div class="text-number linkedin">bla</div>
//CSS
.text-number { all the stuff, which is always the same }
.text-number.github { padding-left: 10px; }
.text-number.frontend-mentor { padding-left: 5px; }
best regards
I think I'll do it the same way ...
What challenges did you encounter, and how did you overcome them?The challenges I'm facing right now are related to animations, which I'm not really familiar but I'm able to add by researching a bit on internet.
What specific areas of your project would you like help with?CSS animations
Hey Gonzalo Tejada! I very like your solution, especially the navigation nav tag. I did forgot about in my solution at all.
Hey Eman Salama! Good to see your solution.
I would recommend to put anything around an image, like a div, if it is on the same node level like another div. It might help prevent other issues. This was also the base for my real tip :D => also without a div around the image, if you put a line-height: 0 on .box you remove the (not wanted) space between img and .content
Hello Megan McNeill! Welcome to FE Mentor, hope to see more of your solutions :) - Overall your solutions is very well readable. (pls be aware, if my answer is some kind of rude, but this is only my second language)
On body you use margin-left and margin-right "auto".
It is not needed, when you use flex (with flex direction column)
and align-items: center.
You used <b> in the topic <h4>. <b> is only to make something bold, without importance, but it is used in a headline element, so it is important. Also the standard of headline elements are, that they are displayed as bold by default.
Hello Enziu,
I like your fully integrated BEM structure. You could change the way of your alt tag. (while I sometimes dont stick to this, either). Just explain whats in the image, but dont use 'image of' in it. For example the author image could stick to 'Author [NAME]'
I figured out how to make GitHub pages to deploy the files for online server.
What challenges did you encounter, and how did you overcome them?Making a layout was a bit of challenge for me, but with modern CSS properties like flexbox and grids, I could make it very easily.
What specific areas of your project would you like help with?Because this project is for beginners level, I assume that it already refined, and well organized design files, Figma, help to create Fronend page fast.
Hello JackEG,
while its not mandatory, the accessibility test says, the site should work on width: 320px viewport, too.
I would recommend (like to use myself) to set the size of the card to: width: min(320px, 100%); //320px card size if enough space, otherwise 100%
