Looking to hire developers?
@markuslewin
@akash02ab
Submitted
What specific areas of your project would you like help with?
I was getting accessibility error [role='img'] elements must have an alternative text
For I which I need to add aria-label to ion-icon tag to get rid of the error.
But it's parent element also requires an aria-label.
I think if we add aria-label on both the screen reader will read the same thing twice.
What would be ideal solution in this case?
Buttons and links can get their accessible names from their content, so you only need to label either the link or the icon in this case. If you label both, the link will get its name from the label of the link!
Chrome has an "Accessibility" tab in the DevTools where you can check the calculated name if you're ever unsure.
Both of these should work:
<div class="socials">
<a href="https://facebook.com" target="_blank">
<ion-icon name="logo-facebook" aria-label="Ping on Facebook"></ion-icon>
</a>
<a href="https://twitter.com" target="_blank" aria-label="Ping on Twitter">
<ion-icon name="logo-twitter" aria-hidden="true"></ion-icon>
</a>
</div>
Marked as helpful
@Kingkobi01
Submitted
What are you most proud of, and what would you do differently next time?
How I rendered two components into the DOM without refresh and without reactjs.
What challenges did you encounter, and how did you overcome them?
how to use an external js while using Vite. All the relative URLs break after the build so I had to write the js in a script tag in the HTML. I don't like it but I did it anyway. C'est la vie.
What specific areas of your project would you like help with?
How do I add an external JS when I'm using Vite
It should be as simple as:
<html lang="en">
<body></body>
<s cript type="module" src="/src/script.js"></s cript>
</html>
(FEM doesn't let me write script)
The <input onclick="handleSubmit()" /> will break since it can't find handleSubmit, so you'll have to move the form.addEventListener() out of that function. After doing that, the form will listen for submits as soon as the page loads:
// `/src/script.js`
const submitBtn = document.querySelector(".submit-btn");
const emailInput = document.querySelector('input[type="email"]');
emailInput.addEventListener("input", () => {
emailInput.checkValidity()
? submitBtn.classList.add("valid-email")
: submitBtn.classList.remove("valid-email");
});
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
document.querySelector(".form-card").classList.remove("form-card-visible");
document.querySelector(".form-card").classList.add("hidden");
document.querySelector(".success-card").style.display = "block";
});
document.querySelector(".dismiss-btn").addEventListener("click", () => {
document.querySelector(".success-card").style.display = "none";
document.querySelector(".form-card").classList.add("form-card-visible");
});
@AlexStraton
Submitted
What are you most proud of, and what would you do differently next time?
I think there's a big problem with GitHub hosting the site, it look completely different to when I use the live hosting on VS code. Has anyone else had the same problem?
I can't get the font sizes right if they become disproportionate after I host the page.
What specific areas of your project would you like help with?
I think there's a big problem with GitHub hosting the site, it look completely different to when I use the live hosting on VS code. Has anyone else had the same problem?
I can't get the font sizes right if they become disproportionate after I host the page.
Hmm, it looks the same for me. Maybe you've zoomed in/out (with Ctrl +/-/mouse wheel) on http://localhost and forgot about it? That's a classic.
@tusharshah21
Submitted
What are you most proud of, and what would you do differently next time?
used zod insteal of using various conditions
What specific areas of your project would you like help with?
while deploying it on vercel faced error
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
even added the external dependency the website varies on rendering because of this try to run it locally. and it would be please if someone would guide me to resolve it
You want zod to be part of your JS bundle, so you shouldn't have to change your vite.config.js at all. 🤔
Try removing the external property:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
@CipiVlad
Submitted
What are you most proud of, and what would you do differently next time?
I like the folder-structure. I enjoyed separating content in "data" modules from rendering "components" on"pages", as well as having my stylesheets in "scss" files. It seems to me well structured and clean. I didn't face any problems losing myself in my own code.
I decided to combine "localStorage" with the "useContext - Hook" for user input storage. Simply because 'till now I either worked with JSON-Server or MongoDB. Since I haven't used localStorage for a while now, I thought it'd be a great chance for this project. Then I added the useContext - Hook for sharing the input data between the routes and passing it either forward towards the finishing site, or for going back and updating data. You can look up the browser dev tools "application" for what has been stored inside Local storage. This also hepled me for dev - purposes, so that there's no need to uncommend the required fields of the first page when jumping back to it.
I really enjoyed getting my styles done with sass variables.
***Start with the mobile-first workflow and style the app first, rather than getting both, logic and styles done at the same time. ***Dockerizing my web app. Found a helpful post on dev.to by Lester Diaz Perez
What challenges did you encounter, and how did you overcome them?
styling
I found it somehow cumbersome to adapt the container size styling on mobile / desktop version, when i.e. toggling between monthly or yearly plans. Working here and there with fixed widths and browser Inspect tool worked for me. I found working from time to time with the tsx inline styling and ternary operator is a great thing, i.e. toggling between active - inactive classes.
logic
working with ts and localStorage has also led to irritation for me. For example, on the finishing page I get my object saved in localStorage: name: ['Customisable profile']. I had previously selected this on the addons page and it is saved in localStorage with setItem.
When I call getItem on the following finishing page in console.log(typeof getItem("addons")), I get: "object".
If I log console.log(getItem("addons")) I get: {price: Array(1), name: Array(1)} name: ['Customisable profile'] price: ['$2/mo']
In order to be able to use it type-safe in my children component and pass it to my parent component, I call the following in my FinishCard, for example:
type FinishCardProps = { getItem: string[] } But I get the following message in vscode: This expression cannot be called. The type "string[]" has no call signatures.ts(2349)
So I continued working with "any" as a transition, but that misses the point of TS, doesn't it? Because getItem is defined as an array of strings in the FinishCardProps type, but I'm trying to use it as a function by calling getItem("addon"), I need to set it to a function in FinishCardProps. But it's still not working with "getItem: (item: string) => void". I'm missing some crucial point...
What specific areas of your project would you like help with?
Regarding the types, I think Fully Typed Web Apps does a great job explaining some approaches to these types of problems! The TLDR is that you can use a validation library (like zod) to parse objects you can't know the shape of:
// zod schema
const personInfoSchema = z.object({
name: z.string(),
email: z.string(),
phone: z.string(),
});
const PersonalInfoCard = () => {
// Read initial state from localStorage
const [inputs, setInputs] = useState(() => {
try {
// Parse string
const rawPersonInfo = JSON.parse(localStorage.getItem("person")!);
// Parse object
const personInfo = personInfoSchema.parse(rawPersonInfo);
// const personInfo: {
// name: string;
// email: string;
// phone: string;
// };
return personInfo;
} catch (error) {
console.error("Error setting localStorage:", error);
// Default values
return { name: "", email: "", phone: "" };
}
});
};
Marked as helpful
@carisaelam
Submitted
What are you most proud of, and what would you do differently next time?
I attempted to use what I learned about HTML structure from previous challenges to make this one a bit better. I used the mobile-first technique starting from a screen width of 320px. Before submitting my design, I adjusted the screen resolution and font-size on my computer to check for accessibility and readability across the different screen sizes in devtools.
What challenges did you encounter, and how did you overcome them?
I wasn't sure what to do about the background image svg. I'm not familiar with svg, so I just treated it as a regular image and changed the background color alongside it to match the design jpg the best I could.
What specific areas of your project would you like help with?
Is there a better, more complete way to check for accessibility on top of what I already talked about doing? To adjust my font-size, I did System Settings > Displays > Larger Text, went with the largest option, and then viewed my design in my normal browser AND through responsive design in devtools. I also looked at the live page on my phone. Everything obviously looked fine on my end, but I worry that I am missing something by not checking a certain setting.
Sounds like a great process!
I like to also browse through the page with a screenreader to make sure buttons and images are announced correctly. Screenreaders have lots of key shortcuts for navigation, but I find just using tab and the arrow keys eliminates a lot of guesswork regarding the HTML. I'm on Windows, so I use NVDA.
Lighthouse inside Chrome DevTools can catch some accessibility issues as well! It usually complains about color contrast.
Marked as helpful
@Lemirq
Submitted
What are you most proud of, and what would you do differently next time?
Pretty easy app. Made extremely fast with million.js.
What specific areas of your project would you like help with?
I need to learn how to edit css paths during build time. Currently I have to push it to the repo, and then grab the entire url. For example:
I want to display an image:
This URL is not going to work in production as it will point to my main site: https://lemirq.github.io/images/rock.svg and not to the subdirectory: https://lemirq.github.io/rps/images/rock.svg
Hey!
Vite exposes the base path as import.meta.env.BASE_URL, so you can use that variable to build the URLs if you need to, e.g.:
const getImg = () => {
const base = import.meta.env.BASE_URL;
return type === "r"
? `${base}images/icon-rock.svg`
: type === "s"
? `${base}images/icon-scissors.svg`
: `${base}images/icon-paper.svg`;
};
You can also import the assets and let Vite optimize them:
import p from "./icon-paper.svg";
import r from "./icon-rock.svg";
import s from "./icon-scissors.svg";
const getImg = () => {
return type === "r" ? r : type === "s" ? s : p;
};
The CSS paths should work with the --base flag:
<motion.div className="bg-[url('/images/bg-triangle.svg')]" />
@VickyAzola
Submitted
What specific areas of your project would you like help with?
Hi there! 👋 This was a fun challenge! 😊
There was just one thing I couldn't do: add the active state to the current page on the navbar. I'm new to React and React-router, so if you have some tips on how to make this, please let me know.
thanks! 🤗
Hi!
<NavLink>s know whether they're active or not!
<NavLink
to={item.link}
className={({ isActive }) => {
return `styleLinks.base ${isActive ? styleLinks.active : ""}`;
}}
></NavLink>
They also enable client-side navigations - similar to the <Link> component - for smoother transitions between pages.
Marked as helpful
@tlanettepollard
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud that I finally learned how to use data from a json file to populate information for each planet when the navigation links and planet buttons are clicked. (Yay Me!)
I am also proud that I learned how to override Bootstrap default styles within my SCSS files. That took some trial and error, but I was able to get the colors set for each planet.
What challenges did you encounter, and how did you overcome them?
I'm still having difficulty with designating the page for Mercury as the Home page while using React Router. I want users to see that page if they refresh after viewing another planet's page.
What specific areas of your project would you like help with?
I would like some help with setting the home page to Mercury while using React Router. I know the solution is out there.
Maybe I'm misunderstanding what you're trying to achieve, but wouldn't that defeat the purpose of having a router? Don't I want to see the page for Jupiter when I browse to /jupiter? I think it works as expected!
@ArthurResendeC
Submitted
What are you most proud of, and what would you do differently next time?
I'm really getting better at the Media Queries thing. I didn't put much effort to this project because I'm focusing on a JS course I've been doing (which progress you may be able to see in my HelloWorld public repository) so this doesn't represent my full potential, and that makes even more excited.
What specific areas of your project would you like help with?
I need help
I couldn't get the active status to match up the challenge's preview. I don't know how to put a "!" symbol at the end of a input field without having to use position absolute, which would make my site very not responsive, so if anyone has a better idea I'd be grateful to read and add it to the project!
I think absolute positioning sounds like a great idea. As long as you manage to contain the "!" inside the text field, the page shouldn't get any less responsive! You could also use a 2-column grid to layer the elements.
Marked as helpful
@kaamiik
Submitted
What specific areas of your project would you like help with?
Is the structure of my HTML page correct in this challenge? Is the use of radio buttons correct? How can I make my page more accessible?
Is it correct to use one CSS file for both pages? There were commonalities between the two pages and that’s why I used one CSS file.
I used local storage in my JS. Are my JS codes correct? How can I improve my codes?
When my index.html page gets smaller, instead of the page getting narrower, it overflows at some point. How can I solve this problem?
Regarding the HTML, the "How did we do?" text should be a h1, like what you did on the "Thank you!" page. Labels are mostly used to label form controls. div.feedback-form__ratings could be coded as a fieldset with a legend inside to group the radio buttons.
The radio buttons are very close to being accessible! The only problem is that they're hidden with display: none. That declaration hides them from keyboards and screenreaders as well. You only want to visually hide them. You can copy the sr-only class from Tailwind to achieve this. You'll know you got it right when you can select a rating with the keyboard.
The page overflows because there's not enough room for the radio buttons and the gap between them. You could try reducing the gap on the .feedback-form__ratings, and space the radio buttons with justify-content: space-between instead. flex-wrap: wrap would make the buttons wrap to another line when necessary. It depends on how you want them to behave.
The CSS and JS look good to me! In case you ever need to get the values of a form in the future, you can use FormData:
formEl.addEventListener("submit", function (e) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const value = formData.get("rating");
console.log({ value });
});
Great job!
Marked as helpful
@diwakharpandyan
Submitted
What specific areas of your project would you like help with?
Hey Guys! I have concentrated more on page responsiveness in this project. I have set media queries for multiple breakdown points like 1024px, 900px, 500px just by trial & error method...But between 2 breakdown points like 1024px & 900px if i drag the screen slider pixel by pixel, the layout gets disturbed towards the end of the next breakdown point(900px)...So, I just want to know whether writing media queries for standard screen size break points(1024,769,425) is enough or should i write media queries for every breakdown point at which the layout gets collapsed...? because the phones in landscape mode have different widths and heights than the standards...Enlighten me with the best practices...Also Pls check the responsiveness of my page and give ur valuable feedbacks... Thanks...
Hey!
Yes, it's usually enough to have breakpoints for the standard sizes! Usually, you start "mobile-first", and then add a @media (min-width: <tablet breakpoint>) for the tablet styles, and then add another breakpoint for desktop, if necessary.
The image in the solution gets distorted because it's set to have width: 100% and height: 100%, which means it has to stretch to fill its parent container. If you remove height: 100%, the height can be calculated automatically from the image's width.
You might then want to add align-items: center to the .grid-container to have the image align nicely with the text!
Marked as helpful
@memominguez
Submitted
What challenges did you encounter, and how did you overcome them?
Refactored the application, retrieving data directly from data.json, by fetch("./data.json").
Will do similar in future vanilla JS application.
The data file is already hosted together with the other files, though! You can see it at https://memominguez.github.io/results-summary-component/data.json.
On your computer, you can't fetch the file straight from the disk, so you'll need a tool that provides a dev server, such as Vite or Live Server. With Vite, you can import the JSON file as if it was another JS file: import json from './data.json'.
Marked as helpful
@TedJenkler
Submitted
For some reason my background wont come into the deploy it only works localhost cant figure out why. Feedback is welcome
I think it's because in the build step, Vite will try to find the image after Tailwind has created the CSS rule inside index.css, so you want the url() inside tailwind.config.js to be relative to index.css. It might also work to use an absolute path from the project root.
// tailwind.config.js
export default {
theme: {
extend: {
backgroundImage: {
"pattern-dark": "url('./assets/images/bg-mobile.svg')",
"pattern-light": "url('./assets/images/bg-mobile-light.svg')",
"pattern-dark-tablet": "url('./assets/images/bg-tablet.svg')",
"pattern-light-tablet": "url('./assets/images/bg-tablet-light.png')",
// or
"pattern-dark": "url('/src/assets/images/bg-mobile.svg')",
"pattern-light": "url('/src/assets/images/bg-mobile-light.svg')",
"pattern-dark-tablet": "url('/src/assets/images/bg-tablet.svg')",
"pattern-light-tablet": "url('/src/assets/images/bg-tablet-light.png')",
},
},
},
};
Marked as helpful
@OsatohanmwenT
Submitted
could someone help me with the identify the problem with the javascript i wrote being check and can't seem to find the problem
You have to remove the errors before you check the values again, right? 🙂
confirmBtn.addEventListener("click", () => {
cardNumberInput.classList.remove("error-border");
cardNumberInput.nextElementSibling.innerHTML = "";
cardOwnerInput.classList.remove("error-border");
cardOwnerInput.nextElementSibling.innerHTML = "";
cardExpiryMonth.classList.remove("error-border");
cardExpiryYear.classList.remove("error-border");
cardExpiryYear.parentElement.nextElementSibling.innerHTML = "";
cardCVC.classList.remove("error-border");
cardCVC.nextElementSibling.innerHTML = "";
error = false;
if (cardNumberInput.value === "") {
cardNumberInput.classList.add("error-border");
cardNumberInput.nextElementSibling.innerHTML = "Cannot be empty";
error = true;
}
// other checks
}
Marked as helpful
@andrewras58
Submitted
This project made me realize that I needed to use less classes and use more id in HTML. So for now on whenever I make a container or a message that I'll only be using once I'll make sure to use 'id' to label it rather than 'class'. My only roadblock in this project was working with SVG, and I never figured out how to resize them properly. I was able to have a workaround and add a wrapper to the star SVG to add its background though. I also noticed that my background doesn't look the same as the sample and I couldn't figure out why.
Hi! #id raises "specificity" in CSS, which'll make that rule more difficult to override when you need to. It's better to use classes for styles when possible, and use IDs to link elements together, for example:
<label for="the-id"></label>
<input id="the-id" type="radio" />
If you specify the width and height of the SVG inside the viewBox attribute, you can change the size with CSS:
<!-- Remove `width` and `height` -->
<svg viewBox="0 0 17 16"></svg>
The design uses a radial-gradient() for the background instead of a linear gradient. I think that's why it looks slightly different.
Good work!
Marked as helpful
@Mike-Dave
Submitted
I have successfully completed this challenge and I am open to receiving any feedback or corrections. After deployment, I don't know why the cyan coloris not displaying. Other than that I did enjoy working on this project.
It's because .bg-cyan-700 is declared before .bg-softRed in the generated CSS of Tailwind. It doesn't matter if you write className="bg-softRed bg-cyan-700" or className="bg-cyan-700 bg-softRed", the red will always override the cyan.
You could instead write:
<div className={`${items.day === "wed" ? "bg-cyan-700" : "bg-softRed"}`} />
That way, the logic applies either cyan or red!
Marked as helpful
@ratul0407
Submitted
I set the background images and gave them a position of
background-position: right 50vw bottom 40vw, left 50vw top 50vw;
And I was wondering if there is a better way of doing it 🤔 cause in certain breakpoints the background image won't show up🙁
So if someone could tell me a decent solution to this problem I would be very grateful
And of course All feedbacks are welcome✔✔
I think using viewport units is a great idea, but you probably want to use vh instead of vw for the values of top and bottom, so that the images are positioned relative to the width and the height of the viewport.
body {
background-position: right 50vw bottom 40vh, left 50vw top 50vh;
}
Marked as helpful
@Einaroks
Submitted
The numbers reference the grid lines surrounding the rows! 4 rows result in 5 lines:
--- 1
row
--- 2
row
--- 3
row
--- 4
row
--- 5
Marked as helpful
@amyspencerproject
Submitted
During this challenge, I learned so much about forms, radio buttons, accessibility, and customizing CSS.
I am not sure how to create the dark gradient background used for the form. I know how to make a linear-gradient but I am unsure of the colors to use. I have the Figma file and it shows a radial background with the same color for the gradient points.
The "hide" class with a display:none will not override the display:flex for the form after a user successfully submits a rating. Not sure if I should write everything in JSX and not use the trick of removing the "hide" class.
I could still do a bit more customizing on the :focus-visibility as it still has the primary blue color showing through.
I appreciate any and all feedback. Let me know what you think.
I managed find the color by clicking on the color name, "edit style", then the square that shows the color preview. I was 3 dialogs deep at that point, but it's there! It might be easier to find in the new dev mode.
.hide {
display: none;
}
.thankyou-wrapper {
display: flex;
}
.hide and .thankyou-wrapper both have the same specificity, so the order of the rules determines which declaration will be used. In this case, display: flex overrides display: none. It should work as expected if you move .hide below .thankyou-wrapper!
Marked as helpful
This was fun 🤠
Quick recap:
I kept media queries to a minimum by using clamp()s. I do like clamps. 🤓
I used a main.scss file again, with over 300 lines it's pretty bloated. I should look for a way to organize it better.
Since the sections need different background-colors, I didn't know how to keep the inline-padding for them. Setting a padding on the body would also push the backgrounds. I went with a mixin for padding-inline and set that on each section. Probably not the best approach.
Because I can't really target all the content, I was unable to set a max-width for it. Consequently, the website does not appear well on very large screens. 🤔
I'm not sure if anything needs to be added to the HTML for accessibility either.
Please let me know what you think or if you see any potential for improvement. ✅
Thank you 🙂
I like to wrap the content in <div class="center"> in cases like this! The background of the section reaches the edges of the page, but the content has some max width.
.center {
box-sizing: content-box;
max-inline-size: 69.375rem;
margin-inline: auto;
padding-inline: 2rem;
}
@Thewatcher13
Submitted
Hi all, I finished my first bigger project.
A few questions:
Please take a look at my note in the css :-)
If I change my font-size in Chrome, the hero__image and founder__image are not on the same place anymore, how can I improve this? The hero__image is covering the button so that is a problem, the other image don't cover anything. When I use the zoom function in Chrome, it looks all good.
I had two ways to provide semantic for SR on my social links, which is the best?
Any feedback is welcome.
I had a look at the note in the CSS. Is the question why header::after is displayed on top of header, even though header::after has a smaller z-index than header?
It's because the header's combination of position: relative and z-index: 1 creates a new stacking context.
If you remove all z-indexes, the elements will be stacked in order of occurrence:
.wrapper (white)header (red)header::after (blue)Add header::after { z-index: -1; }, which sends it to the bottom of the stack:
header::after (blue).wrapper (white)header (red)Add header { position: relative; z-index: 1; }, which creates a new stacking context. header::after will be sent to the bottom of that stacking context:
.wrapper (white)header (red)header::after (blue)I think the reason the images gets positioned differently is because of the mix of units for spaces and sizes. I believe the fix could be as simple as converting the values of declarations like top: 32px to top: 2rem, so that they use the new value of the font size.
You dont need to include "Link to" for the accessible name of links, since they are link elements. NVDA + Chrome reads the social links as "Link, Link to Twitter". For this project, using the alt attribute would be enough, just as you've done for the logo link. This would be read as "Link, Facebook".
Marked as helpful
@vishnu-31
Submitted
i found it difficult to make a span element behave like a word with equal spacing from right and left in a paragraph.
is there a simplere or easier way to do it other than specifing margin for the span?
any feed back is appreaciated.
It sounds like you want the default behavior for inline content, which means you can remove display: flex from .bubble, and the margin from #scored
Marked as helpful
@lmarchesoti
Submitted
I almost got it XD
I know of one code smell and one bug:
I'd be thankful if anyone could help me with either of these points!
Did you try the code inside the comment? It looks good to me, except the selector is probably meant to be written footer::before.
Usually, you'd write responsive stylesheets mobile-first, and then add the tablet/desktop rules with media queries. That way, you don't have to repeat shared styles in each stylesheet:
footer::before {
/* mobile declarations */
}
@media (min-width: 768px) {
footer::before {
/* tablet declarations */
}
}
/* desktop */
@media (min-width: 1300px) {
}
You could have the section separator stay where it is, but with a larger z-index than the footer. Don't forget to give the circle a background color, so that you can actually see it on top of the footer!
.section-divider {
position: relative;
z-index: 1;
}
.section-number {
background: white;
}
Marked as helpful