Frontend Mentor | Mageshwari Balaguru's profile

@AdamullaOsasSubmitted 2 months ago

html sass

@Mageshwari-BalaguruPosted 2 months ago

it is perfect , responsive website. i actually don't know scss. I've heard about this. could you suggest some tips since i'm a beginner.

0

Arsh•290

@arsh-deSubmitted 3 months ago

What are you most proud of, and what would you do differently next time?

I was able to use JS

What challenges did you encounter, and how did you overcome them?

Try to get the position for the share button content, but I unable to make that small arrow.

What specific areas of your project would you like help with?

How to make that small arrow.

Article Preview Component

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 3 months ago

Hi

Congratulations for completing the challenge! I don't know about tailwind CSS - However, when i click preview site i couldn't see your styles and Js renders on the page. I checked the link element in HTML that was Okay. I am not able to find where the issue was.

I checked the Js file and the logic is good. it should display the content when the button was clicked.

0

MoYaMi•30

@MYM200519Submitted 4 months ago

What are you most proud of, and what would you do differently next time?

"I think I did a good job as a newbie."

What specific areas of your project would you like help with?

Any help is welcome!

QR code component

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 3 months ago

Hi, Congratulations on completing the challenge!.

Overall the code done its job. using flex for centering the container is good. There is no repetition in your code. I like the code.

I've some suggestion,

Use semantic HTML elements - header, main, section, footer
in the <img> tag, give appropriate alt content.

0

sweatylolz•30

@sweatylolzSubmitted 4 months ago

What are you most proud of, and what would you do differently next time?

I got it looking very similar the design with a lot more ease than I thought.

What challenges did you encounter, and how did you overcome them?

I did get some challenges with flexbox and getting it to work as desired. But once I figured out the dynamics it was very useful.

What specific areas of your project would you like help with?

Importing google fonts

QR code using CSS flexbox

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

Hi, congratulations on completing the challenge! Importing google fonts - we can import google fonts in two ways. we can add link to our HTML head tag or import at CSS file.(Recommended one is adding to HTML head ) add these lines to your HTML head

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">```

Steps:
1. Google - type google fonts search
2. to the first search list - type your desired font name and search
3. Click get font
4. Click get embed code
5. you can see two links over the right side. (copy and paste as your wish)

I've some suggestions to your code.
1. include HTML semantics (header,main,footer)
2.you don't need to mention all the child elements to display:flex; its already in a flex-container.

Thanks.

happy coding! :)

0

Craowx•180

@CraowxSubmitted 4 months ago

Testimonial grid section

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

Hi, I've viewed your site. Responsive, same like the design. :) If i able to view your code i can boost my skills.

Thanks.

0

bobyanov•100

@bobyanovSubmitted 4 months ago

Four cards

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

Hi, congratulations on completing the challenge :) I have some suggestions.

Avoid unwanted indentations - try to use prettier Extension in Vs code.
Avoid using Pixel/percentage values for all the attributes which is hard constraint for flex/grid layout. try to use unit values ems/rems. 3.Missing of semantic elements. - Kindly google it to know its importance.
Try to use Grid Layout to center the child elements which will reduce the size of the code.

I hope this will help!

Thanks. Magi :)

Marked as helpful

0

naufaluqh•90

@naufaluqhSubmitted 4 months ago

HTML CSS responsive with google font

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

I think its perfect. congratulations!

0

manzii07•40

@manzii07Submitted 4 months ago

What are you most proud of, and what would you do differently next time?

I'm most proud of the perseverance and dedication I showed while learning to code. It wasn't an easy journey, but overcoming challenges and seeing my projects come to life has been incredibly rewarding. If I could do something differently next time, I would focus more on seeking help and collaborating with others earlier on. I realized that sharing ideas and getting feedback from others can accelerate learning and lead to even better results.

What challenges did you encounter, and how did you overcome them?

I faced numerous challenges during my coding journey, particularly with understanding complex concepts and debugging errors. One of the most significant challenges was staying motivated when I hit roadblocks. To overcome these, I broke down large problems into smaller, manageable tasks and celebrated small victories along the way. I also joined coding communities and forums where I could ask questions and learn from others. This support network was invaluable, providing both technical assistance and encouragement to keep going.

What specific areas of your project would you like help with?

I would like help with optimizing the responsiveness and layout of my website across different devices. Ensuring that the content looks great and is easily navigable on both desktop and mobile devices is crucial. Additionally, I'd appreciate guidance on improving the overall performance of the site, such as reducing load times and enhancing accessibility for a broader audience. Any tips on best practices for maintaining clean and efficient code would also be highly beneficial.

Recipe page using CSS and HTML

2

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

Hi, congratulations! you have completed the challenge.

I've some suggestions I am sure it will make your design more look a like a template design.

- Font-family : h1 ,h2 elements are young-serif, body content are outfit.

- Image border radius : on your .recipe-image class add the below .recipe-image{ border-radius:10px; }

preparation time : It has background color and border radius.

list items have some space on the left.

.prep-time{ background-color:#fff5fa; border-radius:5px; } .prep-time ul{ padding-left:50px; line-height: 2.5rem; list-style-type: square; }

- list-style-type : All the ol, ul having list-style on the template. on your code, only ingredient's part reflecting the CSS. use list-style-type instead list-style. .prep-time ul, .ingredients ul, .instructions ol { list-style: none; padding: 0; }

- Font-color : Kindly review readme file and use the text colors.

- Table : inside tr element add two td elements like below. -also use class to bold the second td element. -add only border bottom to all your td elements. -Wrap the second td content in strong element.

<tr> <td></td> <td class="bold"><strong>content</strong></td> </tr>

.bold{ color:brown; } td{ width:40rem; border-bottom: 1px solid grey; }

I hope it will help. kindly feel free to contact.

Happy coding:)

0

imranhossainemi•245

@imranhossainemiSubmitted 4 months ago

Social links profile with vanilla css

2

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

Hi imranhossainemi Improvised code. Impressive!. I don't have any suggestion actually i've learned another way of design this social-link-profile. the button elements background was lighter in the design, you've used darker color it is pretty much good than the actual design. Happy coding! :)

0

Gakii•560

@G-GakiiSubmitted 4 months ago

What are you most proud of, and what would you do differently next time?

I am glad I was able to create a responsive website using Bootstrap.

What challenges did you encounter, and how did you overcome them?

I did not know how to add svg images in HTML.
I overcame this by googling how it's done.

What specific areas of your project would you like help with?

While making my page responsive, I noticed the background colour is lost. I tried adding the background colour in the media query, but it still is not restored. How can I fix this issue?

Responsive blog preview card using bootstrap

1

Mageshwari Balaguru•170

@Mageshwari-BalaguruPosted 4 months ago

1.Does the layout look good on a range of screen sizes? the layout looks exactly same as the design. 2.Is the code well-structured, readable, and reusable? yes, it was well-structured. and i learned new way of designing the card layout. I used the below CSS grid property to design the card layout. display: grid; place-content: center; min-height:100vh;

also i've compared the code. the below border styling not working in my .card class. i'm not sure why? So, i used outline property. .container-fluid { border: 1px solid black; border-bottom: 10px solid black; border-right: 10px solid black; }

0