How can I write it so that I don't have to hard-code the width of the text box(class subtext)? The main box uses auto, but when I do that for the text, it stretches the main box.
Hey,I think your code looks really good especially for a beginner but I don't think you should be putting your css file into a folder like that. I also have other great tips like using hard reset on your css file with " *{ box-sizing:border-box; } " If you find this comment helpful Mark it as helpful and give a positive reply
Congrats on your first project but here are some great tips don't use px for font-size instead use rem which you can get by dividing your pixel value over 16 and you should check the style-guide to know the text-font needed for a project If you find this helpful Mark this comment as helpful and give a positive response
You're a queen at what you do but I think you should use box-shadow property on the project or you did it deliberately if you find this helpful give a good response
This project looks really nice but I think it'd look better if you reduce the font weight of the paragraph text because it looks too grey and doesn't match the design Hope you found this helpful
Nice to see a fellow Nigerian here I know by your name Akiheri Here's a tip😉 for the text under change the font weight to make I look lighter If this helped mark this comment as helpful
I am most proud of myself for being able to use HTML and CSS to create a social profile links, this shows that I am gradually learning how to become a better web developer.
Hey, nice work on your project, it looks really good but I think social section anchor tag will look better if you increase the font-weight by 700 and dont use pixels for font size I like you used transitions on your project makes it look really good. Hope you found this comment helpful : ~ )
Hey overall nice work on your project I really like it and how you made your name in the challenge a different color
But I think you made some common mistakes like naming your css file samo.css
instead of index.css like your index.html file because i think if you work for bigger companies youd be making different html files and css files you would need to link to and giving them different names would be a hassle and confusing.
""
Also I noticed when you were using media-queries on your container you gave it a max-width and didnt give your width value a percentage value.
""
The use of a max - width according to what I know is to make sure your element doesnt pass a specific limit when you put a percentage value like 100% of your page
and the min-width value vice-versa.
""
Also use rem values instead of pixel values when putting font-size.
""
An extra tip I would think would be nice for you to know is the box-sizing property as it can be helpful and you should also know about the css hard reset where you can apply this
E.G"
*{
box-sizing: border-box;
// an example of the box-sizing value
}
'
If you found this helpful or you learnt anything could you do me a favor and mark this comment as helpful
''"
Thank you and nice work on your project
able to work on flex and grid
What specific areas of your project would you like help with?media queries and javascript but i'm watching tutorials on it
Nice work on your project it's always nice to see my fellow Nigerian here The image needed for this project in your code can be gotten through this direction " <img src="/assets/img/avatar-jessica.jpeg" alt="jessica-img"> " It's always important to add information to the alt of the image It would also be better if you put a percentage value and max and min width value for your social link container to make it responsive on different screen sizes 😉
You should also try doing this as it might help you when coding and having problems with paddings and borders " *{ box-sizing:border-box; } " This helps so padding and border is part of the width when coding and it's really helpful . If you want more info go watch this video below" https://www.youtube.com/watch?v=WlGQdgy-M6w" If you found this helpful can you mark this comment as helpful
Been able to get everything all centered
What challenges did you encounter, and how did you overcome them?No challenge
What specific areas of your project would you like help with?None
Hey ,congrats on your first project. It looks very close to the design but I want to point out the fact you should use rem and not pixels when using font-size because its useful for scaling CSS elements in relation to the size of the root element . You can calculate by dividing your pixel value over 16. Again nice work on your first project🔥🔥🔥 If you found this helpful Mark this comment as helful
Hello, I noticed you wrote your css within your html file but I would like to tell you that it's better to write your css and link it to your html using the "
<link rel = "stylesheet" href = "index.css"> " Because it becomes possible to maintain a cohesive style, minimizing duplication and simplifying global styling update.It also helps avoid extraneous information and makes HTML files tidy and small . It will be really helpful when working with big projects so you won't get confused.
Also , I want to tell you that it's not recommended to use to use standard values like pixels when setting font-size in webpages but rem because it reference the size of the root element. To further explain, in different people's browser they can set the default font sizes and using pixels will show no effect and mess up the layout of your webpage. To calculate from pixels(px) to rem you divide your pixel value by 16 to get the rem . Note you can also use rem for margins. Nice work on your project🔥🔥🔥🔥👌👌👌
If you found this helpful mark this comment as helpful if you learnt something
Congratulations on completing your project, it looks very close to the design 👏 I want to bring up the fact you should not use standard values for font sizes when coding webpages. REM allows you to scale the size of elements up or down easily by adjusting the root font size which you cant achieve with measurements like pixels. Unlike pixels, REMs are relative to the font size of the root element. This means that if the font size of the root element changes, all REM units throughout the document will adjust accordingly. If you want to get Rem you can divide your pixel value by 16 which is the standard font 😉 Once again nice work on your project👏
I think the solution is good enough for a Newbie Challenge. I focused mainly on the site's structure and ensuring all components behave as expected.
What specific areas of your project would you like help with?I would mainly like some feedback on my structure:
What are other better alternatives, for example? What are the potential issues with my approach?
Nice work on your code but i would want to say you should use rem instead of fixed values like pixels. REM help ensure consistency across different devices and screen sizes. Since REMs are based on the root font size, they'll adjust automatically to fit the size of the device screen. You can use rem by dividing your pixels values by 16 which is the default. Also your font-family is not the same as the one needed for the project. Example: @font-face { font-family: "Inter"; src: url(Inter/Inter-VariableFont_slntwght.ttf); } and u can target by : p{ font-family: "Inter"; }
