Any suggestions on approaching fluid layout will be greatly appreciated.
Thanks!
I would appreciate any feedback that will help me improve the following:
Thanks!
Any advice on how to improve the code in terms of standards, accessibility and responsive design principles will be greatly appreciated.
Any suggestions on improving the HTML CSS in terms of accessibility will be appreciated.
Any insights on improving the HTML and CSS code are welcome.
Finished it with 0 help of Google!
What challenges did you encounter, and how did you overcome them?I haven't faced any difficulties this time.
But, I'm not really confident about the validity and accessibility of my code.
What specific areas of your project would you like help with?I would like to learn more about accessibility of website and how to improve it.
Great job on the solution! overall it looks great and all the required functionality has been implemented.
Since you asked for feedback on accessibility, an improvement that can be made is to change
alt="avatar-jessica"
to
alt="Jessica Randall's avatar"
The reason for this is because screen readers read out the alt content to people who depend on them to describe the content of the page and Jesica Randall's avatar sounds better than avatar-jessica (imagine robot voice reading this to you)
I hope you find this comment helpful.
Keep on coding!
J
I'm proud that I have gotten better at coding in general
What challenges did you encounter, and how did you overcome them?Styling it to fit mobile view and adjusting the font width to match perfectly and also determining what font color to use
What specific areas of your project would you like help with?I would love to know how the numbers 1-6 were styled, I tried but I couldn't do it
Hi @DammyFaffy,
As per your request regarding making your design responsive you need to use a media query to apply different layouts such as the one below:
.container {
max-width: 375px;
}
@media (min-width: 768px) {
.container {
max-width: 736px;
}
The code above takes a 'mobile first approach' and sets the maximum width for a container - for mobile the max-width is 375px and on screens larger than 768px, the max-width is 736px.
The key is to use media queries to define styling for specific screen sizes. Starting with the mobile first approach and moving up screen sizes helps to simplify the process.
You can learn more about mobile first here
I do have a question for you though, what resources are you currently using to learn web development?
I hope you find this useful
Keep on coding and learning! J
I am having trouble with the height view (or viewport height), so I will appreacite some advice to fix this. Thanks :)
Hi Rowan, Your solution looks great!
It works on mobile and desktop but not for tablet - this is because margin is being used to position the card. A better way to position items like this is to use Flexbox or CSS Grid.
You could use CSS grid as follows and reduce the code required to centre the card:
body {
color: var(--white);
background-color: var(--off-black);
font-family: var(--Inter-font-family);
display: grid;
place-content: center;
height: 100vh;
}
Keep going! J
Maybe I can frame the divs better
What challenges did you encounter, and how did you overcome them?Media query, Responsive design
What specific areas of your project would you like help with?Css grid
Hi @vitorialrd,
Congratulations on submitting your solution!
I noticed that you did use flexbox in your solution and thought the following resources will be helpful - I included CSS Grid because you asked about grid:
The trick is to have a container that takes up 100vh (100% of the viewport height) and 100vw (100% viewport width) and then to centre the child element in the container element.
In your code this can be done with the following changes:
body { background-color: hsl(212, 45%, 89%); font-family: "Outfit", sans-serif; /* margin-top: 40px; */ } .container { /* display: block; */ /* margin: auto; */ height: 100vh; display: flex; /* align item vertically */ align-items: center; /* align item horizontally */ justify-content: center; }
Note, I commented out the unnecessary code above and included some comments on centring the content for convenience.
To answer your question on CSS Grid, you can achieve the same effect as follows:
.container { height: 100vh; display: grid; place-content: center; }
I hope you find this feedback helpful
Keep on coding! J
I could do it myself without help
What challenges did you encounter, and how did you overcome them?No challanges
What specific areas of your project would you like help with?Nothing in particular
Hi @DammyFaffy, Congratulations on submitting your solution!
I noticed that it is not centred on the page so took a look at the code and noticed that you used margins. I assume that using those settings it looked good on your screen, but unfortunately there are may screen sizes that need to be considered when implementing a design - to get elements centred on the screen there are two good options to use:
The trick is to have a container that takes up 100vh (100% of the viewport height) and 100vw (100% viewport width) and then to centre the child element in the container element.
In your code this can be done with the following changes:
body { height: 100vh; background-color: rgb(213, 225, 239, 255); /* width: 1440px; */ display: grid; place-content: center; } .container { /* margin-top: 200px; */ /* margin-left: 760px; */ /* margin-right: 700px; */ background-color: white; height: 500px; width: 325px; padding-left: 20px; padding-top: 20px; border-radius: 20px; /* overflow: hidden; */ }
Note, I commented out the unnecessary code above. I do have a question though - why did you set 'overflow: hidden'?
I hope you find this feedback helpful
Keep on coding! J
Hi @rowanDeveloper,
Great job submitting your solution! - I took a look at your code - it's pretty clean and well docuented - I like that you added comments on the decisions you made, this is really good, keep it up.
Also your level of commenting is good - you only comment on what needs explination and don't state the obvious. One thing that can improve is to keep your comments consistent in terms of placing them on the line above the code line so that there's no need to scroll right - this will help the legibility of your code.
Also you may be interested in applying some BEM to your projects going forward - you make good use of naming and I think BEM could be a good fit for you. You can check that out here.
Last thing, I noticed you tagged the solution with sass/scss but I noticed the style was in CSS - are you using scss for other projects?
I hope you find this feedback helpful!
Keep up the good work and continue improving! J
