All comments

PY Chua•40
@PY-ChuaSubmitted 7 days ago
Mobile-first QR code component using CSS Flexbox
1
Chamu•13,130
@ChamuMutezvaPosted 7 days ago
Congratulations for taking your first challenge.

Include landmark elements in your code as they are very essential. Such elements include main, header and footer. In this project you need the main element, it is an element that you would expect in almost every project as that should contain the content central to the site's main purpose. Check the MDN docs for further explanation.

Keep the specificity as low as possible by using classes and targeting the exact element
0
Muhammet Yıldırım•20
@myildirimdevSubmitted about 1 month ago
What are you most proud of, and what would you do differently next time?
In fact, there is nothing I am proud of, I have been developing back-end for a long time until today, I was sure that I could not develop front end, but while doing this project, I realized that I never needed help from the web, it seems that I will only need a little practice.
What challenges did you encounter, and how did you overcome them?
I had a bit of a problem with the padding, I think the content was slipping, but I couldn't understand the problem and it didn't cross my mind that there could be a problem with the padding because it looked very accurate, next time I will check the first padding.
What specific areas of your project would you like help with?
As you can clearly notice, there is a problem with the fonts, I adjusted the fonts by paying special attention to the design details in the figure, but it didn't work very well and I didn't need to write responsive codes because when I checked it with the tool on chrome inspection, it had no problems with other device sizes.
flex, position
2
Chamu•13,130
@ChamuMutezvaPosted about 1 month ago
Greetings.

Congratulations for taking on your first challenge.

HTML

Do some research about landmark elements. The best resource will be Landmark elements. They are very important for the structure and organisation of your site. For this site , you need to have the main element which is responsible for identifying the primary content of the page. That is to say the div with the class container should be the main element . You can also use the footer element for the code with the class attribution

All images in your HTML should have an alt attribute where , when the image is decorative the value should be alt="" , other than that , the value should be descriptive bringing out the message carried in the image.

Use semantic elements always to improve the accessibility of your site, among others , you would need a heading element. Since this is just a component from the main page , you should have an h2 heading element instead of the span element with the class title. The other span should be a p element. Refer to the MDN docs for guidance

CSS

Seaprate your CSS from the HTML by creating a separate css file and then importing it into the HTML

Do another research on a modern css reset stylesheet which you need to normalise your webpages. One common one is written by Andy Bell

Other centering methods includes flex and grid , that is just to increase your choices when it comes to centering elements

Avoid setting the height of containers as that can cause some issues if the content fails to fit . Let the content decides the height to use as for the width you would need to have a combination of max-width in rem so that the element can extend to a certain width and the width property can be a percentage.

Line height should be unitless , so in this case instead of 140% it should be 1.4
Marked as helpful
0
Nasif Fuad•190
@NasifuadSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
I have completed this challenge in one go. I thnik I can now understand how to start building with CSS without panicking
What challenges did you encounter, and how did you overcome them?
Had some problem with the background positioning. Then I solved it
FAQ accordion
2
Chamu•13,130
@ChamuMutezvaPosted 3 months ago
Hi Nasif Fuad

So far so good with your project, but here is my take:

One of the building blocks of a website are Landmark elements, which provide a powerful way to identify the organization and structure of a web page - this is very useful for assistive technology users as information will be conveyed. Such elements include main, header and footer . For this project I would use the div with the class wrapper as the main element.

This challenge requires interactive elements since it involves what is known as the disclosure pattern. EventListeners can only work effectively with elements such as buttons, an image is not an interactive element - hence it should not be associated with eventListeners. In other words , use semantic elements.

Separation of concerns - let your html , your css and your JS be on separate files . You have some inline styles in your html and that can complicate maintainability if bigger projects. The use of the !important is something that should be avoided as well.

For font sizes , at least you should use rems , using px has some disadvantages as explained in the attached article - Why font-size must NEVER be in pixels

Hope that helps
Marked as helpful
1
meredithincode•90
@meredithincodeSubmitted 3 months ago
What specific areas of your project would you like help with?
The responsiveness between desktop and mobile works in every browser except Opera. I'm struggling to figure out a solution as my code is correct, but even after inspecting it in Opera, there are no errors in dev tools, and everything looks correct. I'm curious how to solve this.
Product Preview Card
4
Chamu•13,130
@ChamuMutezvaPosted 3 months ago
Hi meredithincode

The challenge has 2 images for the image-product , one to be displayed on small devices and another to be used for desktop devices . One of the recommended method to use is the picture element - mdn doc. You have listed both images at the moment as img elements and then used CSS to interchange the display of the images based on the screen sizes - this is not a recommended approach and some of the reasons are that resources that the user will not use will be downloaded. For example , if I am on mobile both the desktop and mobile images will be downloaded even though the mobile image will be displayed. Hence that is a waste of data for the user as well an increased loading time for the application . The picture element will only allow the required image to be downloaded.

Heading elements should follow a sequential order - you can not have an h1 element after the other heading elements (h2, h3 etc) - that is the order should be that the first heading element should be an h1 element and that can only be followed by an h2 element . Then an h2 element can be followed by an h3 etc. Read the following heading elements structure - mdn for more clarity. But since this is just a component , you can do away with the h1 element and just have either an h2 or h3 element

It is important to always use semantic elements everytime , if the element is a button , then just use a button. Using a div for a button as in this case <div class="purchase-btn"> has not added benefit but rather it has a drwaback. The button in this case is not accessible to assistive technology users

Your CSS should always include a modern reset style sheet so that the site can be normalised between different browsers.

style using a class instead of an id , that will keep your specificity low and also the id is meant for js manipulation

when styling using mobile first , your inital styles will target the small devices and then use the min-width in your media query - you won't need the max-width
0
Iván Fernández López•230
@IvanFdez01Submitted 3 months ago
What challenges did you encounter, and how did you overcome them?
- I had problems customizing the radio-inputs (only with the check circle).
- Then, the selection of the best DS for the script was tricky, but I think the best in this case is mapping the three main inputs. This means a map like:
```
  i:{
    'input': DOM' input type-text
    'icon': DOM' icon of the input (pound, percentage...)
    'err': DOM' error message (This field is required)
     },
  i+1: 
    {
    same for the next input element
    }
 } 
```
So with just being careful with the i you could deal more comfortably with the inputs to make them interactable around errors and user' attempts, achieving active states.
- Finally, the web isn't responsive yet, I focused on JS :)
Data Structures in JS: Map. Custom html inputs (text and radio)
2
Chamu•13,130
@ChamuMutezvaPosted 3 months ago
Hi.

Having gone through your project, here is my observation:

there is 3 css files that you are linking in the html file, which can affect perfomance . Among other thinks it increases the load time due to the number of http request that are required to load all the CSS and secondly CSS files are render blocking such that when the browser encounters the <link> tag for a CSS file it pauses rendering the page until the CSS is fully processed.

It is very important to use semantic elements in your site , for example <p id = "clearall" class="clearall header">Clear all</p> . Since this element is supposed to clear all the fields - it is an interactive element and should therefore be a button element.

All images should have the alt attribute , where when the image is decorative, the alt should be written as alt="" and in all other instances should carry a message that is in the image . The alt value should avoid words such as image, picture, icon etc as those are picked up by assistive technology automatically

I see you have nested interactive elements as shown in the code below - in short interactive elements should not be nested

<button id = "interestonly-button" class = "type-button input"> <input type = "radio" id = "interestonly-check" class="type-input"> <p class = "interestonly">Interest Only</p> </button>

A CSS reset styles should be used , so as to keep your site look the same in almost all browsers

The site is not responsive - I cannot view it on my mobile phone

Conclusion

The project is missing some basic fundamentals which you can improve through the Frontend Mentor Learning path. Ask for help in the discord channel as well to speed up the learnig process and check other solutions upon completing yours
Marked as helpful
1
Ved Jain•380
@vedjain773Submitted 3 months ago
Expenses-chart (my first project on linux!)
1
Chamu•13,130
@ChamuMutezvaPosted 3 months ago
Hi Ved Jain

Here is my observation after going through your project:

The component should have a heading element - since it is not a full page , I would expect a heading level of either h2 or h3 (usually an h1 is the first heading element of a website)

alt values for images should always avoid words like image, logo, icon, graphic etc as those are implied by the fact that the element is an image. An alt value should be focused on the content of the image (the message carried in the image) . If the image is decorative then just leave it as alt=""

It is important to make one project per repository, having one repository with plenty projects is a source of disaster in the near future in terms of maintainability, recruiters wanting analyse you work, a break in code in one project may cause the others to misbehave (especially when you start using frameworks and libraries)

keep css specificity as low as possible. Use classes for styling not id, avoid nesting your css in most cases. It is better to apply nesting for pseudo classes

The site is not responsive , check using dev tools between 451px and 820px , the bars are oveflowing from their parent

The bars are not consistent, Mon has a value of $17.45 is way taller than Sun which has a value of $25.48
Marked as helpful
0
Cleyrol Santana•120
@cleyrolscSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
I was able to do it in under 3 hours. I thought it was going to take me a lot more to do it.
What challenges did you encounter, and how did you overcome them?
How to travel through the DOM, I had to check on some documentation and review some previous courses to get to do it correctly.
What specific areas of your project would you like help with?
DOM traversing is an area that I need to keep working on to get better at it
Mobile-first design using bootstrap and flexbox
2
Chamu•13,130
@ChamuMutezvaPosted 4 months ago
Hi Cleyrol Santana

I have gone through your project, here is some issues to look at:

One of the images has the following alt value alt="star-icon" , in my opinion this image should have an empty value because it is just a decorative image. An alt value has more to do with the content of the image (the message carried in the image) rather than what the image is. The alt value has to be descriptive such that in the event that the image fails to load , the meaning presented by the image will still be clear.

Use semantic html where possible to improve the accessibility of the site, the elements that you used for the questions and answers are not accessible when using a keyboard. The user should be able to use a keyboard only if that's the preference of the user. One quick solution is to use the details summary element. You may then not need the javascript

Generally , it is important to set min-height: 100vh; on the body element instead of height: 100vh; , as that allows content to be scrollable if it does not fit the body.

The main element has width: 380px; , explicit sizes can cause responsive issues , where like in this case devices under 380px will not be able to view the page in full

Font sizes should be in either rems or em, see the following article for a detailed explanation font sizes
0
Chidinma•10
@ChidiinmaSubmitted 4 months ago
What challenges did you encounter, and how did you overcome them?
I encountered a lot of challenges. One of them being making the code responsive. I haven't still mastered this yet but I used "rem" instead of "px" and I also used percentages in the width of the divs and image. I also used a little bit of media queries. I found difficulty in centering my texts and images. For the texts, I used "text-align" (phew) and for the image, I majorly used "margin". I haven't still perfected the centering of items. All these I did with the CSS.
What specific areas of your project would you like help with?
I would like help with media queries and centering items. "justify-content" and "align-items" didn't seem to work even after I've used the "display:flex". Help!
Responsive QR code using HTML and CSS.
2
Chamu•13,130
@ChamuMutezvaPosted 4 months ago
Hi Chidinma

Congratulations for taking your first challenge, here is my opinion after going through your project

make use of semantic elements where to improve the accessibility of your project. These are elements designed to serve a certain purpose and can be read assistive technology users. In this challenge I would expect the elements such as main and maybe footer as shown below

<main class="code"> <img src="./images/image-qr-code.png" alt=""> <h2>Improve your front-end skills by building projects</h2> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> <footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/Chidiinma">Chidinma</a>. </footer>

The main element - provides the primary content of the site. You can read more here layout landmark elements

The image in this case is carrying a message , hence the alt value should be a message not an empty string

Format your code - the large white space between your content is not necessary

there is need to have a reset stylesheet , that ensures that your content is styled correctly between browser.

in your body style , you have height: 100vh; , change it to min-height: 100vh;, that is important as that allows content to scroll if it does not fit the screen. Still with the body, add flex-direction: column; so that the content flows top to bottom as per design. Apply some padding as well, to allow some space on mobile devices between the body an the content
0
Ezekiel•10
@Ezek-ielSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
I understood column, column offset and column size in bulma. I will try to use them more often rather than creating 3 columns and choosing the one in the middle like this
```
  
  Hi
  
```
I will rather do
```
```html

  Hi
```
What challenges did you encounter, and how did you overcome them?
Centering the component
What specific areas of your project would you like help with?
Making it better and more responsive
QR code component using bulma columns
2
Chamu•13,130
@ChamuMutezvaPosted 5 months ago
Hi Ezekiel

Congratulations for taking your first challenge. Here is my take after going through your work.

HTML

getting the basic right will go a long way in your journey . A website should be created using among other things - semantic html. That is to say, wherever possible use the right element that was created for that specific task. If it is a title/heading make sure to use correctly the available heading elements. A heading element is important in a website the same way that a Novel should have a title and chapters that have heading and so forth.

still on semantic elements, landmark elements which includes elements such as header, main, footer etc are important for the organizational structure of your website. With this site , I expect that it should have at least the main element

an img element should have an alt value , where when the image is decorative it can have an empty value , eg alt=""
Marked as helpful
0
Ridwan Hasan•400
@Ridwan10000Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
I am proud of learning and using the media-queries. I will have a much strong hold on this topic. In future I will try to make fully responsive and accessible projects
What challenges did you encounter, and how did you overcome them?
I encountered problems regarding make this project responsive and good looking. I took help from chatGPT and learned about media-queries. Then added some break-points for different screen sizes and it showed up as somewhat responsive
What specific areas of your project would you like help with?
Give me tips about making pages responsive. Also, please answer my below questions-
1. Should I always take mobile-first approach.
2. What units in which context should I use to make my pages more responsive
3. I used rem and em units only while learning. I know what they mean. But what are their use-cases and How can I have great skill regarding in their usage?
Basic HTML mark-ups, CSS flexbox and media-queries
2
Chamu•13,130
@ChamuMutezvaPosted 5 months ago
Hi Ridwan10000

Having gone through your project, here is my observation

HTML

find out more about landmark elements, which are very important in the structural organisation of your site. For this challenge , I would include the main element as it identifies the primary content of the webpage.

the alt value of an image element should exclude some words such as image, picture, logo etc as these are automatically implied and will cause a repetition of words when using a screen reader

CSS

you will need to reset your styles using a modern reset stylesheet

this challenge does not need a lot of media queries , infact you can do it without any media queries. Instead of the explicit width on the container width: 350px; , use max-width - it allows your component to scale . Also for sizes , use rems in most cases instead of px
Marked as helpful
1
Carlos Maracara👷👨‍💻•800
@MaracaraCarlosSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
Hello everyone, I took this challenge as part of the beginner learning path. I'm excited because I started using ✔️Sass and the result was very similar to the design provided by the Frontend Mentor team.
testing Sass on QR code page
1
Chamu•13,130
@ChamuMutezvaPosted 5 months ago
Hi Carlos Maracara

Having gone through your project, here is some points to consider

instead of using <section role="main" class="container"> , html has the main element that should be used.

the image in my view carries an important message , therefore it should not be used as a background image . Preferably use img element with a description in the alt value

setting the body element in the css to height: 100vh; works , but for best practice instead use min-height: 100vh; - this does allow scrolling if the content does not fit

keep specificity as low as possible by simply appying styles to the target class. The following body .container .codigo-qr , is not necessary as that would cause maintenance and debugging problems especially in big projects. You can just use .codigo-qr

using fixed heights and widths in your container elements will cause responsive issues, for example

body .container { height: 500px; width: 320px; border-radius: 20px; background-color: #ffffff; padding: 15px; }

For the above the height will cause content to be cut off , if it does not fit the container. Let the content decides the height by using the size of the content, paddings and margins where necessary. For width , using max-width to allow the container not to exceed a certain width instead of a fixed value. Also font sizes and these dimensions should be in rems not px, the following article Why font-size must NEVER be in pixels can help you understand the reasons behind the suggestion
Marked as helpful
0
ramneekdev089•30
@ramneekdev089Submitted 8 months ago
What are you most proud of, and what would you do differently next time?
This was my first project with JS and I did it very quickly.
What challenges did you encounter, and how did you overcome them?
The most challenging part was assigning the navigation buttons, I assigned the enter button but not the up and down buttons.
What specific areas of your project would you like help with?
I would like to get help with the up and down navigation buttons, how can I assign them?
FAQ accordion page using HTML, CSS and JS
1
Chamu•13,130
@ChamuMutezvaPosted 8 months ago
Hi ramneekdev089

I have gone through you project , below is my suggestion:

HTML

They are recommended methods that should be used when you are using more than image that should be displayed depending on screen sizes. Such images should be displayed using the srcset , picture element or as background images. Refer to MDN responsive images on how to implement these. Another point to note , is that images should have a meaningful alt value. The alt value should carry a descriptive message that can be interpreted by screen readers or in the event that the image fails to load - the message should be clear. If the image is decorative - then the alt value should be blank.

interactive elements such as buttons should have readable text , that is the only way assistive technology users are able to tell how they should handle the button. A button without text is confusing to users.

read also the following article on how to create an accessible disclosure pattern

CSS

a modern reset stylesheet is needed so that the site can be adaptive to various browsers

font sizes should be written in either rem or em, px values are not recommended since they are not responsive. The following article can explain better on the reasons why font sizes should never be in px values
Marked as helpful
0

Chamu

All comments

Mobile-first QR code component using CSS Flexbox

flex, position

FAQ accordion

Product Preview Card

Data Structures in JS: Map. Custom html inputs (text and radio)

Expenses-chart (my first project on linux!)

Mobile-first design using bootstrap and flexbox

Responsive QR code using HTML and CSS.

QR code component using bulma columns

Basic HTML mark-ups, CSS flexbox and media-queries

testing Sass on QR code page

FAQ accordion page using HTML, CSS and JS