Eddie Bones is an aspiring front-end developer with a passion for creating intuitive and visually appealing web experiences. With a foundational knowledge in HTML, and CSS. Eddie is eager to expand his skill set and dive deeper into modern frameworks and best practices.
I’m currently learning...about CSS, and responsive design. Also, I'm looking forward to learning about JavaScript and its framework, React.
I want to learn more about pseudo-classes.
With this project, I wanted to focus on structuring my folders and sub-folders. I would appreciate it if someone can take a look at my code and see if my folder structure is correct.
I need more help with how to use switch between different images based on different view ports.
I can't think of any specific areas of this project that I would like help with.
I don't have any specific areas within the project that I need help with. However, I need to get a better grasp of utilizing the inspect tool within the web browsers, and explore the many capabilities that this tool can offer for Front-End Developers.
One specific area of the project that I would like help with is a faster way to center and lower the attribution under the card, so that I don't have to mess with the properties too much in inspect tool.
in this code I tried to create with mobile design first which in the end it worked even though I was not used to it. maybe next I want to learn to use css preprocessor
What challenges did you encounter, and how did you overcome them?it takes too long to make this
If you need help with CSS Grid, I have two amazing resources:
1.) CSS Grid Layout by Chris House. This article by Chris House is a comprehensive guide to CSS guide.
2.) Learn CSS Grid the Easy Way by Kevin Powell. If you need to see CSS Grid properties in action, Kevin Powell does a fantastic job of explaining it.
Great Start! However I have a few suggestions:
1.) In your HTML file, you don't have a anything written in your alt text. Alt text provides better SEO because it provides more context about the content, and it helps with accessibility for screen readers.
2.) Also, in your HTML file, you have a <h2> tag above the <h1> which is not correct because heading tags should be used in hierarchical order from <h1> to <h6>. You can replace the <h2> tag with a <span> tag because <span> tags does not affect the heading hierarchy.
<span>Reliable, efficient delivery </span>
<h1> Powered by technology </h1>
Now span is an inline element. So if you want to change it to a block element just use display:block or display:inline-block.
Hope this helps.
I did this project without a layout for figma, so there were problems with indents and dimensions.
Nice work! I was looking at your code, and I noticed a few things:
body. A full css reset establishes a consistent design across different browsers by removing any default styling that each browser has.//Full CSS Reset *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } body {}
Good job! But I suggest using HSL (hue, saturation, and lightness) values over hex values because it's easier to tweak HSL values over hex values down the road. Also, start incorporating global variables in your style sheet because it allows you to code faster in your style sheet, and if a web developer ever looks at your code, they would know what your values are. W3schools further explains and shows you examples of how to use global variables in your style sheet.
Hope this helps!
Amazing start! If you want to center the container in the middle of the page. You will have to input this code in the body:
body{
display:flex;
flex-direction:column;
justify-content:center;
height: 100vh; /* vh= viewport height */
}
i did not find this project difficult, i am glad of completed this project quickly
What challenges did you encounter, and how did you overcome them?initially I had a little difficulty in vertically centering the main div with flex because I didn't remember that I had to give a height to the body
What specific areas of your project would you like help with?I would like to know if I have set css and html correctly
Make sure to have the hover effect in the h2 selector so that when the mouse cursor hovers over the text it changes the color to yellow.
