@Abbassher55
What are you most proud of, and what would you do differently next time?
Hi community, in this challenge I built with React JS and React router and grid flexbox CSS. In react hooks I use useState and useReduis. and I use data JS and javascript map, any feedback is welcome.
@Abbassher55
Posted
Hiii.. Great job but i have some suggestion for you. On mobile screen when the menu is open it have issue, i think its due to z-index. Also check the timeline as it is not like the given design.
@waldohidalgo
Submitted
@Abbassher55
Posted
Hii
You have done a great job. However i have notice that image with alt="bg-pattern-bottom-desktop" cause some issue on ipad air and ipad mini etc , this issue is caused due to display block and left 30% so adjust it on these devices according to need.
Keep up the good work. Regards: Abbas Sher
Marked as helpful
@varonalearns
Submitted
@Abbassher55
Posted
Looking nice but add a hover color to the button which is given in orignal design
Marked as helpful
@yogesh-stack-dev
Submitted
What are you most proud of, and what would you do differently next time?
LEARNINGS
some of the major learnings while working through this project. Writing is a great way to reinforce our own knowledge.
code snippets, see below:
/* fonts.css */
@font-face {
font-family:'YoungSerif' ;
src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}
.title {
font-family: 'YoungSerif';
font-weight: 400;
font-style: normal;
}
What challenges did you encounter, and how did you overcome them?
CHALLENGES
The colour provided is in HSL (Hue, Saturation, Lightness) format, which is not directly compatible with Tailwind CSS configuration using HEX or RGB.
Solution:
To address this challenge, convert the HSL color to HEX format using Google's default color picker.
Example:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customColor: '#XXXXXX', // Replace with your HEX color
},
},
},
};
I encountered a challenge while working on the project regarding font integration. Instead of using the Google Fonts API, I opted to include TTF files directly.
Solution:
Successfully addressed the font integration challenge by utilizing the @font-face CSS rule. This solution allows for custom font definition directly in the project, providing greater control over the font rendering.
/* fonts.css */
@font-face {
font-family:'YoungSerif' ;
src: url('../assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
}
.title {
font-family: 'YoungSerif';
font-weight: 400;
font-style: normal;
}
@Abbassher55
Posted
Your solution looks great but i have some suggestions according to your challenges. First: if you want to use colors in hex,hsl,rgb etc and vice versa and you dont have the given format then write it in vs code css file which have its own converter and will change it directly in ur editor for you from one format to another. Second : To use other font in tailwind u can make changes like below in tailwind.config.js file.
In tailwind.config.js
theme: {
OtherProperties....
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
'mono': ['ui-monospace', 'SFMono-Regular', ...],
'display': ['Oswald', ...],
'body': ['"Open Sans"', ...],
}
Then u dont need this in ur css
.title {
font-family: 'YoungSerif';
font-weight: 400;
font-style: normal;
}
Now after this u can use font-sans, or font-mono .... classes in your project.
And also for font weight we have these tailwind classes.
font-thin => font-weight: 100;
font-extralight => font-weight: 200;
font-light => font-weight: 300;
font-normal => font-weight: 400;
font-medium => font-weight: 500;
font-semibold => font-weight: 600;
font-bold => font-weight: 700;
font-extrabold => font-weight: 800;
font-black => font-weight: 900;
Happy coding
Marked as helpful
@almamarie
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
Many of the fields were missing in some countries data e.g, some countries did not have borders, capital, currencies, etc. This caused errors when running the application. I had to randomly click on countries to try and fce the errors so I know where to model the application to catch those errors.
The Documentation on the rest-countries API website does not contain much information. Response objects and fields are not explained
What specific areas of your project would you like help with?
@Abbassher55
Posted
Your solution seems effective, but I noticed that when a user clicks on country so the inner country detail page is not responsive on mobile device
@flaviare1s
Submitted
What are you most proud of, and what would you do differently next time?
Feedback are welcome!
@Abbassher55
Posted
Hi. Your solution seems good, but I noticed that when a user enters an incorrect email address, the message "Please provide a valid email address" is appropriately displayed. However, even after the user corrects the email address to a valid one, the same message persists.
@Rubaalnadi
Submitted
@Abbassher55
Posted
Assalam.o.alikum.
You have done a great job but i have some suggestion that will help you to get the desire goal of design. Between the QR code and the top add some padding according to design. Make the title text center so it will match design styles. Add a little padding bottom after last pharaghraph. Also you have to applied background color same to design.
Marked as helpful
@IvanCsCz
Submitted
These are my first projects, I would like to know any advice to improve my coding. Thanks in advance <3
@Abbassher55
Posted
Hi. Good job so far. But I will give you some tips. Use (h1) tag instead of (p) tag which have class title card. As h1 is necessary for every page and it is good for SEO as it give main site info.
Change the div with class card into main tag. It is good practice and with this your html code will be Semantic.
Marked as helpful
@yusufskebbe
Submitted
@Abbassher55
Posted
Hello, great job overall! However, I noticed a couple of issues:
In the design, there is no border radius applied to the right side of the image and applied to both left top and left bottom side ( You have applied to the top left and top right ).
In the active state of the design, the "Add to Cart" button should change its background color to a darker shade of green.
Apart from that, you have done a good job.
@pBaptiste
Submitted
@Abbassher55
Posted
Hi Pierre, your efforts are commendable.
However I've noticed that while hovering on Learn more, it appears that the size increases, which doesn't match the active state of the design, as both the active and inactive states have the same sizes. One solution is to add a white border in the inactive state so that in both states, they will have the same sizes.
Marked as helpful
@CaruajulcaMartin
Submitted
@Abbassher55
Posted
Hi.
Your solution look great. But i have notice some changes according to the given design.
You can use flex box or grid on main container to center the card.
In design when the card is in active or hover state the drop-shadow increases to 16px from 8px in both x and y directions which looks like the card pops up.
Check the font color and font weight of published date with design.
Apart from this your solution is awesome 👍
Marked as helpful
This was a fairly simple challenge, mainly used to brush up on my vanilla HTML & CSS before jumping in to more complex challenges.
I would particularly appreciate any feedback on elements of responsive web design. I have tried to use responsive units wherever possible but there may be some applications I have missed.
@Abbassher55
Posted
Hi. Your solution look great.
However i have point out that in design when the card is in active or hover state the drop-shadow increases to 16px from 8px in both x and y directions which looks like the card pops up. Also on hover the heading color change to yellow color. Also check the color and font weight of published date with design.
Apart from this your solution is awesome.
