What are you most proud of, and what would you do differently next time?
I feel like I am getting more comfortable with CSS grids!
What challenges did you encounter, and how did you overcome them?
Nothing serious for this one. Aside from some positioning struggles here and there.
What specific areas of your project would you like help with?
I tried using data attributes to dynamically (sort of) color my cards and paragraphs inside it. I was wondering if there's a clean way to right the css part without copy pasting it. Maybe some sort of mapping or something similar? If anybody can nudge me in the right direction that would be appreciated!
What are you most proud of, and what would you do differently next time?
I tried reworking this as I want to refresh my css grids.
What challenges did you encounter, and how did you overcome them?
Wanted to center the whole thing vertically but can't seem to make it happen for whatever reason.
What specific areas of your project would you like help with?
Just want some clarifications or nudge in the right direction on why my page wont vertically align.
I am using grid with place-content: center which works for me in most cases but not on this one. I am pretty sure I am just missing something but I can't seem to figure it out.
What are you most proud of, and what would you do differently next time?
I am really happy that I was able to immediately apply what I learned about using the picture element to change image src depending on some media query. I was also able to apply usage of data attribute to add an icon inside a button with help of pseudo elements. Lastly, I was able to add some screen reader support to the pricing!
What challenges did you encounter, and how did you overcome them?
I wanted to figure out if it's possible to change css variables value through media queries and as it turns out it was! So with it, I created some locally scoped variables to dynamically adjust some padding since the design calls for it!
Additionally, I was trying to see if I could use the data attribute to help me decide what icon should be using in my button as I try to setup a button class with the intention of possibly using it elsewhere (this is for possible bigger project where button class can be a utility class). Through some trial and error, I was able to add it with the help of pseudo-elements and got to use background image property again.
What specific areas of your project would you like help with?
I'd like to have feed back on the way I added screen reader support through a visually hidden class that I came across with from CSS tricks website.
Additionally, feedback for my semantic usage is appreciated as well. That is something I am trying to improve as I do more of these challenges.
What are you most proud of, and what would you do differently next time?
I've learned that I can use color-scheme and just set it to dark and the text color was automatically set to white! Will probably explore this more as I get deeper into theming.
What challenges did you encounter, and how did you overcome them?
None.
What specific areas of your project would you like help with?
Since this is a single page only I opt out in using h1 on the name as my main title. Also on my markup, I also just use a div for the card. But I was wondering if article is better? Since I can imagine this can be put in any website to an aside or a list of some sort since content is independent and reusable.
I am still learning the dos and don't of html semantics and I wanna make sure what I am making a habit of doing are the right practice.
What are you most proud of, and what would you do differently next time?
Got to learn about some things about hierarchy selectors. Will definitely try to learn more about them.
What challenges did you encounter, and how did you overcome them?
Not being able to select some elements/classes. Turns out I was doing it wrong since I didn't even consider the dom structure.
What specific areas of your project would you like help with?
As usual, mark ups and whatnot.
I used an article since I thought this can be put in any website as a standalone component. Not sure if my assumption is right but from what I've learned so far it should be. Please let me know otherwise.
What are you most proud of, and what would you do differently next time?
Even though I hate doing positioning like this, I am glad I was able to come up with a solution that I am okay with. Hopefully in the future I'll have a better solution in doing things like this.
What challenges did you encounter, and how did you overcome them?
I had a hard time figuring out how to do most of the positioning stuff. Because of this, I wasn't able to finish adding the background images as I'm a bit checked out for today. I will consider adding them at a later time.
What specific areas of your project would you like help with?
If someone could point me into an article or a yt video in regards with the following:
Creating the arc like at the bottom of the div. I've search a bit and found that I could've use path but I couldn't grasp the values inside it so I just did a trial and error using pseudo-elements for now.
The positioning of the founder section wherein you have an image and some text. I couldn't figure out to have a fully responsive solution so for now I opted out in doing some max-width of some sort so it doesn't look ugly at some breakpoints.
Any help in finding materials for the above is greatly appreciated!
What are you most proud of, and what would you do differently next time?
I got to learn a thing or two about pseudo elements! Never knew I could style a list that way and add custom content on it using some for of counter!
What challenges did you encounter, and how did you overcome them?
I am still having a hard time in confidently structuring my html document. So this time, I tried to focus on that to maybe have a better understanding on how I should structure it. Fortunately enough, this challenge doesn't have that much of a difference between mobile and desktop design.
What specific areas of your project would you like help with?
I am still having trouble with learning to properly structure my html document so any feedback on that is much appreciated!
I had fun doing this one. As usual, I set my expectation on how long I think it would take me to do this and my expectations are more or less accurate. That being said, I am definitely rusty and in need of many more challenges to get back on groove!
Specific part I would like to get feedback here is the socials part. I was wondering what other approach or what the best approach is to put it on the lower right with the rest of the items still dead center. My approach was using absolute positioning but I feel it's a bit scuffed. I can't shake the feeling that there is definitely a better approach.
That being said, I am excited to see how my fellow developers implemented their solution!
As usual, feedback and constructive criticism are definitely welcome and appreciated. Thank you!
After a long hiatus I am back with practicing and exploring front end development.
I've skip a lot of stuff in this challenge (i.e., fonts) as my main focus here is to explore tailwind css. I will be using frontend challenges like these to learn and apply what I am learning along the way on the usage of tailwind css.
Feedbacks are greatly appreciated as I am really planning to start using tailwind css in most of my upcoming projects as I am currently trying to learn next.js, shadcn ui, and tailwind css.
I got lazy and only did the screens exactly for 375px and 1440px. Still, feel free to suggest and give me constructive criticism as I am still learning html and css. Thank you!!!
Feel free to comment on what I should do to improve my code base. I'm currently diving in web development so correcting me or giving me instructions on what are the best practices is highly appreciated. Thank you!
Feel free to comment on what I should do to improve my code base. I'm currently diving in web development so correcting me or giving me instructions on what are the best practices is highly appreciated. Thank you!
Feel free to comment on what I should do to improve my code base. I'm currently diving in web development so correcting me or giving me instructions on what are the best practices is highly appreciated. Thank you!
