Latest solutions

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

Initially, I styled everything in a hurry, and when I started making edits, I got very confused by my own CSS. So, I’m proud that I took the extra time to redo and reorganize my CSS by using Sass and BEM. However, my CSS was pretty simple so I’m not sure if I used Sass effectively.

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

The greatest challenge was making my design match the Figma file as closely as possible. I had never used Figma before, so figuring out margin, padding, and other dimensions from Figma was a bit tricky. I made sure to take my time to notice all the details.

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

1 I’d like to make sure I’ve applied BEM principles correctly. I have:

/* Block */
.card {}

/* Elements */
.card__qr-code {}
.card__heading {}
.card__paragraph {}

2 This is my first project, so any tips on best practices for writing/organizing CSS and HTML are greatly appreciated. Or, if there's any part of my CSS that could have been cleaner.

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

I got to learn about

• CSS grid layout
• media queries
• background-* properties
• hover states on the element

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

It was challenge to match the blog image in the mobile layout. Mobile design was showing the scaled version of the image. Then we used background-image to fix that issue.

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

• does my work statisfy the accessibility guideline
• use of pseudo states - is this the correct way to use it

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

This challenge allowed me to review basic notions about html and css.

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

I had a problem centering the element but I was able to solve it using flexbox

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

Any suggestion is welcome!

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

I am proud that I was able to implement flexbox in my webpage design.

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

My challenge was resizing the dimensions that would fit the need of a user's device. I implemented a little formula that you can view in my css file. I used that formula to change the margins.

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

I would like to know if there is a different approach in using the @media declaration block because all I did was use that formula that is commented in my css file and copied and pastied 14 times.

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

I am most proud of the responsiveness of the page. I am sure it could be better, but making the page both desktop and mobile-friendly and having different content layouts for each device was tricky.

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

Responsivity was a challenge and to overcome the difficulty I tried many different solutions.

Finding how to detect valid emails was also challenging but I knew the solution had to do with Regex.

When I got stuck, I'd search Google and land on Stack Overflow. Additionally, I found a few YouTube tutorials on the above challenges I encountered which helped me on my way.

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

I am open to any feedback. I'm most curious about if there was a better way to handle the layout variability and responsiveness for this certain page.

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

I am proud to have built this project after learning how to properly use CSS units. This is my best work so far and I can't improve on it yet.

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

I did not know how to apply proper margins and paddings, I could not center the card as well. I searched YouTube for helpful tutorials until I stumbled upon Kevin Powell's channel.

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

I do not need help as I have figured it out with the help of online resources. This is a simple project as well.

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

Each challenge overcome gives me confidence to move forward and improve more and more in this exciting career.

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

I had problems with the hover effect, because on touch screens there is no such effect and when clicking on the link the effect remained green, but in the end I found the solution.

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

Any help is welcome.

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

I overcomplicated the solution the first time around since I had not coded HTML / CSS for quite some time. With continued experience I think I can do a better job next time. I would like to shout out a huge thanks to the people who commented on my original solution.

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

I forgot a lot of basic HTML and CSS, and utilised my Google-Fu skills to overcome them, although my solution was a bit messy at first.

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

I'm happy with this solution.

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

Avoid using media-queries by taking advantage of the natural responsivness of CSS.

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

I still struggle to properly use clamp() efficiently, but the integration itself was'nt that challenging.

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

Accessibility, always accessibility, because I lost the reflex to think about it first.

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

I'm proud I didn't spend decades on this design

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

I would like suggestions on how to make the 'button and 'a' tags sync

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

This was a long challenge since there were so many images to work with and so many sections. I am most proud of how I switched from the images on the desktop view to the mobile view.

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

The annoying thing was the colors. One of the colors was very similar to the background, making it hard to position it on the page since it was hard to see at times. It wasn't too much of an issue, but was irritating. If you do encounter an issue like that, how do you approach the solution? I overcame this challenge by using inspect element and figuring out the position with the css properties in that window

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

This was an annoying challenge since there was so many position absolutes to work with in regards to the images. I don't even think if I got them all right. Aside from position absolute, what would be the best way to position the images in the correct position?

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

I took my time to organize my SCSS as best I could and it really paid off in the end when I was adding all the media queries.

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

.

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

.

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

.

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

.

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

.

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

Getting to grips with the dark-mode toggle was a challenge but super rewarding when it finally worked.

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

Setting up the toggle button appearance in Tailwind was new ground to me and took a minute to figure out.

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

I used this as an opportunity to try some animations. I'm mostly happy with how they turned out.

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

I had to refactor a couple of times because of the animation. I also tried to keep ability to toggle between original and bonus modes.

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

I think I'm getting better at semantic structure. If anyone has any comments, please feel free to make them.

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

None.

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

This project, being basic, flowed easily.

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

.

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

.

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

.

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

I really enjoyed learning more how to use CSS and HTML, it's satisfying to see progress happening and I would have started this task sooner if I knew it would be easy.

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

I really didn't know how to create tables in CSS, I had to research and watch videos to just discover that you just need to use two different tags, programming is complicated.

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

I would like to know how to better organize yourself in terms of margins and positioning of elements and I would also like to know why my image is not loading

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

Estou satisfeito

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

eu estava indeciso se eu criava duas paginas html ou se eu usava a class hidden no fim usei hidden porque eu percebi que fazer uma pagina pra cada tela daria o dobro de trabalho desnecessário

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

Each challenges has its complexity in structure and visual design. Personally, it pleases me to match all the details as closely as possible to the original.

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

The colors and shadows. I think I need glasses. :P

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

When capturing the screeshot, I noticed that the main header did not take the CSS style in Firefox, but it did in Chrome. I was using the Font in its variable type, I decided to use a static style and the problem was fixed. Any feedback about this subject is welcome!!! ;)

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

I really liked this layout, it's very modern. I love writing CSS and seeing the page transform as I go. This was the first time I used variables within CSS, and it's super practical.

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

My biggest challenge in this project was fixing some divs because I got lost in the HTML construction, but in the end, everything worked out fine.

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

I need to practice a lot building layouts using div; I'm still not comfortable with it.

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

I am proud that I was able to accomplish this exercise and continue to refresh my skills.

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

I did not have any challenges with this exercise.

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

I do not need any help at this time.

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

Found this one quite easy! Started to use rem instead of px... Could that be why scaling up from mobile to browser wasnt as painful as previous?

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

Still building on a mobile which has added complexity, no live server or device viewports, no inspect/dev tools etc.

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

Using rem/em amd vh/hw... still a little unsure what best practice is and whats the easiest way of doing it

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

Found a solution to create a mobile page by adding an additional div to style it. Feels a bit awkward building the desktop and then mobile one.

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

Styling the mobile version after doing the desktop one. I thought about the solution a few days and it turned out it was an easy, 2-minute thing. :)

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

I think I need more help with the strategy, how to tackle the project rather than smaller, technical things.

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

Wins:

• Fastest development of solution due to pre-planned process
• Minimized repetitive processes
• Used Chrome Developer Tools to analyze design in the absence of a Figma file to follow

Improvements

• Improve the website by adding functionality via Javascript or at least use anchor tags to link to the social pages

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

NA.

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

NA.

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

How to make the div be at the center of page, especially for top-bottom

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

How an intermediate+ web dev write their code to make it short and clean -- I've been unsure where to put @media

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

1. Use grid-template-areas and adjust areas depending on screen size.
2. Use grid-auto-column: 1fr; to decide the default size of the grid column. (specifying the size of the grid columns that were created without having an explicit size)
3. Implementing the whole page myself without help.

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

Choosing the best layout to organize the design,

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

Changing layout dynamically based on the screen sizes.