Profile Card Component With Position Fixed Background Bubbles
Design comparison
Solution retrospective
The background for this one was exceptionally difficult. I started dabbling in background images which is a fascinating topic in and of itself. It took me quite the while to figure it out.
Basically, the idea was to fix the background in place so that it stays behind the card component in a frozen state just like it is in the design regardless of screen size.
Hopefully others find this solution helpful. You can check out the git for a more in depth explanation in the README.md.
I also discovered Josh W Comeau's Shadow Palette Generator! Man, what a great tool. His websites are amazing and his knowledge almost godlike.
Community feedback
- @samanthewebdevPosted over 2 years ago
hey! did u make it all by ur own?
1@ArthurPogPosted over 2 years ago@saman2620 Hey, Saman! Yes, I did it all by myself after watching Kevin Powell's video about how backgrounds work in CSS. It was a fantastic tutorial. Even he said that it is sad that there is no quick way to position an element from the centre of the container. By default it is left and top. So I tried moving it 50% from the left and 50% from the top and that centred it, I then tried using the
calcfunction to offset it from there and it worked. Then I set thebackground-attachmenttofixedwhich glued it stiff :)1@samanthewebdevPosted over 2 years ago@ArthurPog awesome i made this page too with the help of u tube video but i'm not able to make pages or websites all by my own and looks like ur beginner too like me any tip how can we learn fast and work our own?
1@ArthurPogPosted over 2 years ago@saman2620 Thank you, my good man :) I did my best!
How can we learn fast and be self-sufficient? That's a great question and to be honest I have never tried to answer that question before in my life, so I'll do it now. I apologize in advance for the wall of text. TL;DR at the end.
Yeap, I am at the very beginning. I started learning HTML and CSS about 2 weeks ago with my girlfriend. It is hard to say that if something works for me that it will work for you too, but here is the gist of what works for me:
I do whatever I need to learn frequently. The more I do it, the better I become. The better I become, the more I enjoy doing it. The more I enjoy it, the more I do it. It's like a snowball rolling down the hill :D
-
Enjoy the journey: There is a great book that I read by Josh Waitzkin called The Art of Learning and the most important thing about learning anything, he says, is enjoying the journey. Just enjoy the process of making components, websites, writing HTML, CSS and JS. Don't mind the result. Good results will come in time. Trust the journey :)
-
Focus: This is self explanatory. I know a lot of people are going to say "Don't rush it!" but in all fairness, you have to rush, if you want to learn something. I don't mean doing things really fast and vaguely and skimming over everything. No. What I mean is the right amount of rushing is needed when we focus hard on things. When you're working on something (and if possible, without any distractions around like phones) try and do things at a quick pace you'll see that you're suddenly asking interesting questions about the subject. Don't ignore these questions! You need them answered in order to truly understand whatever it is you're learning. Try and find answers to them online - like some of the things that I was asking:
What does the <!DOCTYPE html> stand for?
Why is there a difference between how browsers render different elements? The heading, body and margin for example look completely different on Chrome as opposed to Safari or Firefox.
What's XHTML?
Why don't people use <em> and <strong> tags as much as <span>?
What's the difference between a block and inline element?
-
Reflect: Then when you finish your project, spend some time thinking about it, reflecting - just try and summarize what you've done and learned in your head, so that you make sure things are clear to you. Take neat notes in a notebook or something, by hand. Be patient when doing this. I know it sounds boring, but I enjoy doing it and this alone has helped me understand and memorize so much!
-
Put theory into practice: When I started I went to Khan Academy (free learning website) and enrolled in the Computer programming course called Intro to HTML/CSS: Making webpages. Whenever I learned something I went to CodePen and tried doing the things I learned at Khan Academy there on small mock-up projects. This helps a lot too!
-
Be relentless: Don't stop when you can't find the solution to your problem. When you do, don't be satisfied! Ask WHY the solution works the way it does. If you understand the foundation of the solution you can even apply that solution somewhere else to solve a completely different problem!
So, TL;DR:
- Do it frequently, if not every day :)
- Enjoy the journey of learning
- Focus
- Apply your knowledge often, just like you're doing here on Frontend Mentor
- Be relentless - never give up!
1@samanthewebdevPosted over 2 years ago@ArthurPog first of all thank u so much that u took a time to wrote this it really is helpful and no-one literally i have been learning html,css,js more than about 6 months but no-one did told me these tips neither i saw anyone talking about it, These tips are awesome surely will follow the guide line and i'm amazed that in just 2 weeks u did learn a lot that u can even work ur own. If u don't mind can we connect on twitter if u have one for better learning i actually like to connect with smart n hard working ppl who inspire me and ppl with whom i can learn something valuable :)
1@ArthurPogPosted over 2 years ago@saman2620 You are most welcome! I unfortunately don't have Twitter. I've got a Facebook account, but that's probably covered in cobwebs. I'm only here, it seems :D For now at least.
I've had some people help me out here and I was so grateful for the feedback that I decided to help out at least two people, in-depth, for every challenge that I finish.
It is not only because of altruistic reasons. I am doing it because of point four - Apply your knowledge :D I applied my knowledge by helping you and in turn it helped me to better remember these things :P
1@samanthewebdevPosted over 2 years ago@ArthurPog that's very cool good luck in ur journey!
1 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord