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.
I was reviewing your code, and I noticed that the background color for the page is incorrect. It should be: background-color: #d5e1ef; Also, you need the custom font that is in the style guide in the Starter Files.
Gave me feedback!! & if you want to know how to use cursor IDE so message me I will help you to use cursor IDE in your daily coding projects.....
It looks amazing! but you are missing the line-spacing property for your h1 and p selectors in your stylesheet. That information can be found in the design Figma files. Also, use em instead of px units because px units are not responsive. You can read more about px vs em units by Grace Snow
You're off to a really great start! but I noticed there are a few things that is missing in your code. One of them is the background color of the page.
body{
background-color: #d5e1ef;
}
Also, the custom font family Outfit is missing in the head section of the index.html file.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
Once you copy and paste the code above in the body section of your html file. You will be able set the font family to Outfit in the h1 and p selectors in your stylesheet. Also, you have to change the font-weight to what is shown in the Figma Style folder they provided.
Hope this helps 😁