Frontend Mentor | Kareemah Ajina's profile

@devmothegSubmitted almost 3 years ago

I have some questions regarding accessibility...

What are the main things that I need to consider about it when building a website?
Any recommendations for a good source to learn it from?

huddle-landing-page-with-single-introductory-section

@Kareemah-codesPosted almost 3 years ago

Hello, so for accessibility you need to think of a bunch of things. I think it would be too long to type all. Freecode Camp has a nice section in their CSS course on accessibility (https://www.freecodecamp.org/learn/responsive-web-design/#applied-accessibility). I used that in conjunction with this https://www.telerik.com/blogs/web-accessibility-guidebook-for-developer . It's not something you can learn in one day, so try to aim to spend at least a few days to a week. I myself am not done reading the article. But the free code camp section helps a lot in fastening up the learning curve.

Some main points that I have learned are as follows:

Don't rely on only sound to convey information. That means if you have a video make sure it comes with captions or a transcript for deaf people.
When picking colors use a contrast checker so that people with low vision can differentiate your colors.
Write semantic HTML for people who use screen readers to be able to use your website comfortably. 4.Add alt tags to all images that convey a message.
Use tools to check if a person who has color blindness will still be able to navigate your webpage. A great resource I use is let's get color blind(https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck?hl=en)
If you need to post animations on your website, make sure there is a way to disable them (cause some people with disabilities can get a sensory overload from them).
Always put a label for all input tags. ....That's a summary of what I know so far. I hope it is helpful. Also, please could you follow back so we can help each other out in the future?

Marked as helpful

0

Kareemah Ajina•120

@Kareemah-codesSubmitted almost 3 years ago

This is my second attempt at this challenge. I have two important questions that I would appreciate if anyone is to answer.

I want my "validateEmail" function to only run when the div with the id of "form" is clicked but I can't seem to figure out how to do this. I am new to javascript. I don't even really have an idea of DOM, Jquery, or frameworks, so simple solutions will be appreciated here. If the problem will be too difficult with vanilla JS, please tell me.
I actually learned CSS Grid for this project, so I am not sure if I went about using it the right way. Any suggestions on how to better go about using Grid will be highly appreciated.

You don't have to answer 2 of the questions. Answering any one of them is already a saving grace. Any other pointers or suggestions will also be appreciated.

Responsive Landing Page using CSS Grid, flexbox.

2

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Wow, Thank you so much. This was so helpful. I actually thought I knew enough about event listeners, turns out I don't . I will make sure to correct my code. Thanks a lot once again. I really appreciate it!

1

Udochukwu Amaefule•570

@UDsGitHubSubmitted almost 3 years ago

I was not able to figure out a way to make the image full width in the mobile layout without negative margins and calc compensation... I used that originally, but it cost be later as I ran into an issue where the negative margin was causing some unknown overflow and messing with the size of the body. If anyone can help, I would like to know how I could have done that better.

Responsive Layout with email input validation

2

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Great!, I am really glad it helped.

0

Udochukwu Amaefule•570

@UDsGitHubSubmitted almost 3 years ago

I was not able to figure out a way to make the image full width in the mobile layout without negative margins and calc compensation... I used that originally, but it cost be later as I ran into an issue where the negative margin was causing some unknown overflow and messing with the size of the body. If anyone can help, I would like to know how I could have done that better.

Responsive Layout with email input validation

2

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hello there, you could try removing padding on the "left" class. Then you could try adding that padding (the 2.5rem) to each of the items in your inner-container elements individually except the image. The problem is that the padding for the "left" class is affecting everything inside it so it invariably affects the "inner -container", therefore affecting the picture. Let me know if this was helpful. Also, could you follow me so that you can also correct me on whatever solution I post? I am a newbie :).

Marked as helpful

1

Raphael Peuckert•40

@RappeuSubmitted almost 3 years ago

What could I improve?

Order Summary Component

1

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hello, I wanted to help check out your code, but it seems the link to the git repository is for another project.

Marked as helpful

1

Muzhda Noorzad•30

@MuzhdaNSubmitted almost 3 years ago

Feedback of any kind would be greatly appreciated :)

Order Summary Component Using HTML & CSS.

3

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Thank you!

0

Muzhda Noorzad•30

@MuzhdaNSubmitted almost 3 years ago

Feedback of any kind would be greatly appreciated :)

Order Summary Component Using HTML & CSS.

3

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hello, so I have a few pointers if I may:

Try using semantic HTML, going to your code there is just a lot of divs in places that could be semantic. For example, instead of using divs for buttons, you could just use your button tag. It offers the same functionality but is just a bit more readable. Semantic HTML is also best for accessibility purposes. You could dedicate two hours tops to learning it, it's really not that difficult.
Asides from that, I think you are good to go. If I wanted to get nitpicky, I would say that the space between the "annual plan" area is too close to the "change" area. I looked through your code and it looks to me like you made a mistake in the divs. There is a div whose class is "left-part", I am guessing change is supposed to be in a div with a class "right-part" so that you can properly space them out. I may be wrong though.

I am a beginner, kindly consider giving me feedback on the projects I have completed. I would really appreciate it.

0

Solomon Yahwin•40

@Auto-YahwinSubmitted almost 3 years ago

Please let me know how how it looks and how to improve it. I'd really appreciate your feedback, thanks.

Responsive landing page using HTML and CSS

3

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hi !, I am glad my feedback was helpful. So for the font, It is really quite easy. Here are the steps you should take:

Click the link.
To your right, there will be some sort of menu. Look towards where you have "link" and "import". Side note: "link" is for if you want to enable the font through your HTML file, while "import" is for the CSS file. They both do the same thing, so you can pick anyone, but I prefer to use import and put it in the CSS file(I also notice it is the same for other people I know). If you prefer to use CSS, good design practice is to put the @import link as the first thing on your CSS file.
Once you are done with this, copy the CSS styling and paste it into your CSS file or style tag.

Voila!, you are done. I would advise going to the google font website (https://fonts.google.com/) and trying to implement a font of your choice for a previous project you have done, just so the process sticks. Try reading this article for a better explanation, https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/

Marked as helpful

0

Hansal N.•40

@hansalScriptsSubmitted almost 3 years ago

if you can rate the work from 1 to 10, what will you give it? why?

Custom Order Card using plain HTML5 and CSS3

1

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hello, your work is pretty great. Maybe try to use google fonts to change it to the actual font used in the design. It should be in the style guide. The only point I have is to focus more on the design and try to replicate it. There are some things (just like the font) that aren't like the design instructed. For example, the size of the order summary text is nowhere close. If you look closely at it, the font weight of the 59.99 text is pretty light in contrast to yours which is a lot darker. I don't want to get nit-picky, so try to just focus more on these seemingly minute details cause they go all the way in making everything look cohesive. Hope I was a bit helpful! Side note: If I post any projects, could you please give me some pointers?, we rise by lifting others. Cheers!

Marked as helpful

1

Solomon Yahwin•40

@Auto-YahwinSubmitted almost 3 years ago

Please let me know how how it looks and how to improve it. I'd really appreciate your feedback, thanks.

Responsive landing page using HTML and CSS

3

Kareemah Ajina•120

@Kareemah-codesPosted almost 3 years ago

Hello, you did great. Here are a few notes I have:

Try to make your class names more readable. Naming them "class4" or" class5" doesn't make the CSS easy to read by you and others. Something I like to keep in mind when naming classes is to give them names that describe what they do.
Use google fonts, I think the font for this challenge is Roboto. That's about it!

Marked as helpful

1

Kareemah Ajina•120

@Kareemah-codesSubmitted about 3 years ago

Hello everyone!, This is my first project on Frontend mentor, any tips will be highly appreciated. I am also not sure if it is fully responsive across all devices. If I can get some help with that, it would be really appreciated . Thank you!