All solutions

Hello, Frontend Mentor coding community. This is my solution for the Profile Card Component.

• I had a lots of fun with this challenge! Feel free to leave any feedback to help me improve my solution or make it clean!

Hello, Frontend Mentor coding community. This is my solution for the Profile Card Component.

• I had a lots of fun with this challenge! Feel free to leave any feedback to help me improve my solution or make it clean!

I made it a some time ago forgot to submit it. something that i don't understand rn is that how are we getting the data from the form? like sure we can validate the form at front end and submit it but what happens after that? We don't have a backend here but imagine if we did then how would i connect my form with the backend to actually get those value?

** Hello everyone.**

I was not coding for 2 weeks so i ended up spending a lot more time styling it then i should have.

• Added a fade in animation for the social links window.

I wanted to practice media queries, but didn't know what breakpoints i should use. I decided to go with the breakpoints that bootstrap uses. Now my issue is that, i finished this challenge with a default CSS targeting the mobile first approach, and then i have CSS for 4 breakpoints, targeting small, medium, large and extra large devices. And Of course after having so make break-point, i think my sass looks kinda messy. Plus the final CSS file is huge!! So i was thinking, isn't it ridiculous that I've to write this much CSS for such a small component like this. Am i writing too much or this is how it should be?

Feel free to leave comments on how I can improve my code. Thanks!

Hello everyone, This is my solution for this challenge.

I would say, this was my first time using sass, I'm not sure if im organizing my sass correctly. I learned a lot about forms and validation from this challenge. I don't have much experience with forms and im still learning java-Script.

One thing that i don't understand is the code i copied, it checks if the email format is correct or not.

function isEmailValid(email){
    return/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
}

I understand the java script part of it but, I don't understand that line of random characters. I know what's it doing but i don't understand how its doing it. So like am i really supposed to know this or can i just copy it every-time? Let me know if there's anything i can improve on.

Thanks!

Hello everyone, This is my solution for this challenge.

This was my first time working with forms in a piratical way. I spent a lot of time making it responsive, as the picture on desktop was creating some problem while changing the width of the screen. I fixed it by applying min-max width for the picture. The HTML structure I've used here works, and I'm aware that its not correct, as i can't use it while dealing with multiple inputs. I was having doubts about it so i watched a video, and i understand it now.

I'm still writing pure CSS. I'm kinda feeling lost, i don't know if i should use SASS, bootstrap, or if i should make my own custom classes for different purpose and apply these multiple classes to the element for styling. I know how bootstrap works, but I'm avoiding it because i fear that by using it i might be able to make good and responsive websites but i won't really understand how these CSS properties work and react to one another. and about Sass, i used it and i was having trouble with organizing my sass. I read some articles but then i was like "okay so im i supposed to write the layouts in one module and not define the typography, color and stuff here, and then select these elements again in another module to define the typography and stuff??" It seems time consuming, and i don't know if this is really how im suppose to do it. I would really appreciate some help with this.

Thanks!

Hello everyone

This was a challenging project, At first i thought it was just an easy position absolute and that's all but positioning it wasn't as easy as i had thought. Also i don't know java script and DOM manipulation so it helped me look into it.

I made it a while ago, i think I'm using classes to switch between mobile and desktop pictures. That's because at the time of making it i didn't know how picture tag works. However i know it now and I've used it another challenge which I'll submit later.

I finished it and it looks okay i guess, but I'm not really satisfied with it. Firstly, the image is positioned at the center so it snaps when opening and closing the accordion in order to maintain it centered position, sames the case with background as its size is bigger then the container but i think that's okay. Its the image that i have a problem with. Second, I feel like this problem would be solved if we can open only 1 accordion at a time, but i don't know how to make the logic for that in JavaScript. I also wanted to add an opening-closing animation by changing the height of the panel, i tried doing it but i was tired so i didn't put enough effort.

If you find something I can improve let me know! Thanks!

I'm not really sure about HTML Semantic here! Any suggestions are welcome!!

I consider this my first grid related challenge, Ive used grid before but those were not as griddy. i don't really know grid I'm still learning. Ive a few questions:

1. I feel like im writing too much unnecessary CSS. So i would like to know if that's really the case.
2. I write in SCSS, but when i look at the CSS i see a lot of selectors as i wrote it by nesting it. So is it a bad practice to have too many selectors again and again? wouldn't it slow down the website?
3. If we are importing fonts and images from the internet, then should we import it through HTML <link> tag or through @import in style sheet?

what i don't like about my solution is the scroll bar on desktop. This is what i usually struggle with. I end up making the page easily but end up having a bit of scrolling and i don't like it because then i spend a most of my time fixing it and adjusting everything to it. Sure i can just disable scrolling but I'm not sure if that would be the right approach. Any suggestions are welcome!

The thing i don't understand here is the background. I don't know how am i supposed to position it. For some reason it wasn't accepting % values for both X and Y axis at the same time, so i had to use "vh" for y-axis. It also keeps changing position on resize, i still don't know how to fix that, it could be bcs i used percentage values for background-size.

the reviews are actually overflowing, i would like to know if its a bad thing or not. Any suggestions are welcome!

I used SCSS for the first time here. I don't know much about it, i wanted to get started with it because i found out we can nest things here. Ive a question! I could be wrong but i think most people would initially think abt writing SCSS the same way they write HTML by nesting every single element. but wouldn't it be wrong?? bcs when it gets transpiled then there would be too many selectors and the browser will have to go through all that making it a bit slower? does that make any sense?

It was an easy challenge, but changing the color of the picture was a bit tricky. Ive used the "mix-blend-mode" only once before so it wasn't the first thing i could think of. Any suggestions are welcome!

I tried the mobile first approach for this challenge. It was my first attempt, any suggestions are welcome!!

This was my first time testing Media Queries. All feedback are welcome. If you have any suggestion on how I can improve it, feel free to leave your comments! Thank you!

This is my first project, and i really don't understand when to use which unit so i went through a try and error hell trying to guess the size of my card. I want to know if its a normal thing for everyone or its just me? Any recommendation or advice is welcome i want to learn!