Getting more comfortable writting the code in React, and then deploying on live is a big win for me at the moment!
What challenges did you encounter, and how did you overcome them?Posting the site live
What specific areas of your project would you like help with?Any advice on how to prevent the errors to occur to a React project is welcome!
Hey this is awesome! Nice use of context api, to improve this you could use useReducer to make managing complicated states easier. Your method works though.
I dont see any react specific errors. good job on completing the challenge.
I have learnt how to effectively use React Router to navigate through the website pages(routes).I have also learnt how to use and customize react tabs while using data.json file to populate the website from the destination,crew and technology data objects.
What challenges did you encounter, and how did you overcome them?I have had a challenge applying different background images depending on the route selected.I will be doing more research on how to improve the website.
What specific areas of your project would you like help with?I will appreciate some help on displaying different background images for different routes as it is in the challenge design.
pretty cool!!!
To change the bg just used scss and depending on the section id I changed the image url. I found this to be the best way. you can check out mine to help you get a better idea
https://github.com/edwinc73/frontend-mentor-advanced-css/tree/master/05-space-tourism https://space-tourism-spa.vercel.app/
You can also have the image with a repeat none and change the object fit of the image so it doesnt tile.
you could use max-w-7xl mx-auto which will define the max width to 1280px and then center the containers. This is good so it limits how far apart elements are in a screen.
i think in some elements there are some strange border radius values I think this is because of border-radius: 50%, the 50% will make it so a rectangle will become an oval shape.
I have learnt how to effectively use React Router to navigate through the website pages(routes).I have also learnt how to use and customize react tabs while using data.json file to populate the website from the destination,crew and technology data objects.
What challenges did you encounter, and how did you overcome them?I have had a challenge applying different background images depending on the route selected.I will be doing more research on how to improve the website.
What specific areas of your project would you like help with?I will appreciate some help on displaying different background images for different routes as it is in the challenge design.
pretty cool!!!
To change the bg just used scss and depending on the section id I changed the image url. I found this to be the best way. you can check out mine to help you get a better idea
https://github.com/edwinc73/frontend-mentor-advanced-css/tree/master/05-space-tourism https://space-tourism-spa.vercel.app/
You can also have the image with a repeat none and change the object fit of the image so it doesnt tile.
you could use max-w-7xl mx-auto which will define the max width to 1280px and then center the containers. This is good so it limits how far apart elements are in a screen.
i think in some elements there are some strange border radius values I think this is because of border-radius: 50%, the 50% will make it so a rectangle will become an oval shape.
More familiarized in how to setup React with Tailwind CSS, how to use media queries and variable in tailwind css, and how to setup transitions, hovers and other styles just in tailwind!!!
What challenges did you encounter, and how did you overcome them?Settin' up React. I make the confusion to combine Next.js with normal React🥲
What specific areas of your project would you like help with?For some reason, it doesnt deploy my favicon. I tried to see if the path is correct(it is), and then tried to change the extension, but without any success!!
favicon looks good to me! Good job setting up the project! I can see that you have hard coded a lot of things in. When it comes to react you want to try reuse a lot of the elements. for example the list items can be a single component with different props.
Any feedback to improve will be appreciated
Good attempt,
some notes on your website:
General website -
Font needs to be imported,
text needs to be align better
when screen is super wide you can use a max width so your elements arent far apart.
class = "max-w-6xl mx-auto"
Home page -
explore button should link to destinations
the bg-image is to be more reponsive. try changing the breakpoint triggers around to see whats best.
crew page- buttons not working
technology page - Buttons not working
looks like you have some more work to do. Good luck!
It's working.
What challenges did you encounter, and how did you overcome them?There were some problems when I tried to make a github page
What specific areas of your project would you like help with?I need help with mobile menu. It's kinda default and I don't have much control on customization here
Hey @sergiy
Nice work on this challenge.
Some notes for desktop. Long lines of text usually makes it more hard to follow, you can try use a max-width: 24rem... etc to limit this.
On switching tabs I dont think the content should shift due to different image heights, you can try defining a height of its container so when the image change the container is still there and therefore the height does not change
in terms of accessibility the red and white buttons on the design doesnt actually pass contrast standards. You could try adjusting the colors but but find just changing the color:black
For the mobile version Some elements should be display: none, for example, the more info buttons in the features section
you could increase the padding left and right you give more white spacing around each sections. Actually in mine I tried to use a reusable wrapper called Section which held all my styles for section. This allowed me to create consistent section elements throughout the site.
For the navigation I would use react to conditionally render the side nav. this sidenav would render in 100vw and 100vh and reuse the nav items
I understand some of the react logic!
What specific areas of your project would you like help with?The only problem is that I can't make the React work with my current tools(look in my code). To be more specific, npm is installed properly, but for some reason, it doesn't work for React(same with Yarn) -- and with Tailwind CSS was difficult to set up, but I make all the work manually(taking the code i needed, and it worked -- and it was easier because is not my first project in Tailwind). 🤔 Maybe is too early to learn React, but I'd appreciate any advice, and maybe I'll retry this challange with React after I finish all the current learning path. Thank you in advance!!😊❤️
Hello, The index.html is not set up for the react app. inside the body you should have
<div id="root"> </div>
this is the element the app will be rendered in. without it your react code means nothing.
Then under the #root element add in this script
<{delete this}script type="module" src="/src/index.js">
Any feedback to improve i will appreciate
Its looking quite nice! A few things to consider: The site is a newsite, as such I would expect the articles to be clickable. You could use an anchor tag instead of div tags.
I would check if all interactable elements are keyboard navigateable.
Try use the lighthouse tab in chrome, it will show that some elements in your New section has low contrast
I am proud of the CSS and how it looks. In the future I have to take management of projects more seriously because nearing the end it was a big mess.
What challenges did you encounter, and how did you overcome them?The one and only challenge - CSS. Thats why I'm proud of it. I almost tore my hair out
Hey good job completing the challenge! This one is deceptively long due to many smaller interactions to style. Time management takes experience and even then you could go way over time working on a small element.
I would suggest to use something like a wrapper to help you center and define content width.
e.g
HTML
<div class="wrapper"> THE REST OF THE CONENT </div>
CSS
.wrapper{
width: 1200px;
margin: 0 auto;
}
margin 0 auto helps to give margin right and left the maximum value therefore centering the page.
be very careful what types of units you use. e.g 10% padding on the header. I have a large screen so the padding was huge
On the other hand the nav items could use a little more padding around it so less dexterious people can still easily use it
nav ul li{
padding: 10px 5px
}
the navbar should contain links, which should be done using anchor tags this will have the added benefit of allowing for keyboard navigation.
<< EDIT >>
I have included my submission for this challenge so that you could see how i styled it and made structure the sematic html.
Hello guys 👋, my name is Divine and this is my solution to the Interactive rating component challenge on Frontend Mentor.
🛠 Built with
👨💻 What I learned
This is my first Javascript project 😜, and I learned a lot from it. I do hope, you take some time to give some feedback, I'd appreciate it. Thanks.
Nicely done. You could try adding some padding on the numbers so they appear centered.
When i view it with the mobile inspection, the width of the card doesnt change and actually overflows horizontally. To prevent this you could use media queries to change the width of the card respectively.
Another thing is that the radio inputs can not be accessed by keyboard
lastly the button should be orange with /black or darker text as the contrast is low for orange/white
I'm proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?I struggled with animations and how to add them, but in the end I figured it out.
What specific areas of your project would you like help with?Anything that can help me improve.
I like the animation for the images however the text animating in seems a bit distracting, maybe just have translate animation on the image container and a opacity 0-1 animation of the text.
I defined a hover-underline-effect mixin to add an underline animation on hover for links
@mixin hover-underline-effect {
&::after {
content: "";
position: relative;
display: inline-block;
width: 100%;
height: 2px;
background-color: $White;
transform: scale(0);
transition: transform 0.3s ease-in-out;
transform-origin: right;
top: -12px;
}
&:hover {
&::after {
transform: scale(1);
transform-origin: left;
}
}
}
Ensuring that the correct image sizes were displayed based on the device screen size
@HostListener('window:resize', ['$event'])
onResize(event: any) {
this.isMobile = window.innerWidth < 768;
}
ngOnInit(): void {
this.isMobile = window.innerWidth < 768;
}
getImgSrc(creations: any): string {
return this.isMobile
? creations.imgSrcMobile
: creations.imgSrcDesktop;
}
I would appreciate feedback on how to improve the accessibility of my project
Impressive work! For accessiblity consider changing the gray text to something darker as the contrast is quite low.
The website breaks on tablet* view, you could add some more media queries to fix this.
Within the nav you could add role="menubar" and role="menuItem"roles to the ul and li items respectively.
You can add aria-labels to the button so screen readers can read it.
edit: fixed spelling table* view
