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
Hi @DavidManiIbrahim,
I saw your solution come up in my feed with the tag 'web-components' so I decided to take a look at how you implemented web components for this solution. Unfortunately, the solution is not using web components - you can learn more about web components here:
I hope you find the resource helpful and hope to see some web components you develop in the future!
All the best! J
I have try different display layout for this like CSS Grid, CSS Flexbox. I will use Firefox for CSS debugging, it suits me.
What challenges did you encounter, and how did you overcome them?I initially faced a challenge centering a QR code without a container div or flexbox/grid. I realized that using flexbox would make this task much easier. This is a common challenge when working with HTML and CSS, and flexbox is a powerful tool for overcoming it.
What specific areas of your project would you like help with?I am happy with this method.
Hi @viveknagesh21, Congratulations on submitting your QR Code solution! the design looks good.
I see you managed to centre the card nicely with FlexBox and having read your comment on how you got to that solution, I agree, FlexBox is great for achieving this goal.
I tried looking at the code repo but the link is broken so I used the browser to take a look at the code and have the following suggestion:
.container { display: flex; align-items: center; justify-content: center; height: 100vh; /* margin: auto; -- you don't need this if you set the width*/ width: 100vw; border-radius: 10px; }
An alternative solution is to use:
.container { height: 100vh; width: 100vw; border-radius: 10px; display: grid; place-content: center; }
I hope you find this feedback helpful!
Keep up the great work! J
Congrats on submitting your solution!
Thanks for clarifying what feedback you're looking for - this is very helpful to reviewers.
In response to your concerns:
This really depends on whether the height should be fixed or responsive - generally a good way to go is to work top down, get your HTML structured then apply layout to that.
You can read all about that take on stack overflow
What are landmarks?
Either way is fine - just pick one and use it consistently
One of the most popular methods is 'mobile first' where you build out your default layout for mobile the add breakpoints at each screen width increment you need ton modify the layout.
Using CSS Grid and Flexbox are good technologies to leverage for responsive layouts - Flex is great for row/column - dimensional layouts where Grid is best for 2-dimensional layouts
I hope you find this response helpful...
I found this challenge much easier then the one before and I'am happy for that also I have no idea about the responsive version I'm going to learn it then make an update on github waiting for your feedback
Good work submitting your solution!
I reviewed the preview site and the desktop layout looks great. The mobile layout has not been implemented.
I looked at the code and it seems that you have a media query to wire up the layout change at 375px - I suggest you use a higher breakpoint for the mobile view and also that you try following a 'mobile first' approach to implementing the design.
Another thing you can do to simplify your code is to use the picture HTML5 element or use srcset on a single img to handle multiple images.
I hope you find this helpful...
Carry on coding!
Give some reviews on it; it will help me in building my career.
Great job submitting your solution.
Your solution looks good on mobile and desktop, but what does not work well is using 375px as the breakpoint - I suggest this be bumped up to a level that can handle the larger screen width.
Otherwise the solution looks good and you solved the tricky parts - so good going!
On the coding side - I noticed you used 2 <img> tags - a better approach would be to use the srcset attribute on the img element.
I hope you find that feedback helpful...
You're doing well! so...
Carry on Coding!
First try to complete a challenge. I've only been learning for 6 weeks so any feedback is welcome.
Your solution really looks great!
I noticed you are using some semantic HTML5 markup - good going on that!
Just one suggestion I have is to rather user the article element to markup a 'self contained component' basically it can be used to group anything that can appear on it's own in a document.
Other than that, you're doing great!
I hope you find that feedback somewhat helpful...
Carry on Coding!
