All solutions

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

This is my 8th Junior Project! 🎉

I really enjoyed making this website. I really loved the color scheme and the beautiful assets! I was able to make the website both accessible and responsive *with my current knowledge of things.

I used CSS grid to make the base layout of the website. With grid, it was really easy to make it on desktop and mobile. This is the first time I'm using a property order which I used to reverse the order of the grid. I found it on Stack Overflow and it actually worked.

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

I don't think I faced any big "difficulties". But, it was a bit confusing to create the background for the "Photography" and "Graphic Design". I tested it on my phone and the image seemed to be large in size and was not correctly positioned.

I didn't face this issue with the other images. But, these two have a small issue and I don't know why.

I didn't create the little navigation menu indicator(the little right triangle on the top left when the links are visible 😅) on mobile because it was a bit difficult with ::before pseudo element. So I left it.

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

Any suggestions on how I can improve are welcome! 😃

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

This is my 3rd JavaScript project as well as my 6th Junior project!

What I've used to build this project:

• HTML
• CSS - grid and flex
• Javascript
• Validator.js

I'm not very good when it comes to JavaScript. Since my knowledge is limited, I had to go through Google and read MDN Docs and many other websites for the email validation to work.

I have learned some things throughout the project:

• learned to make images responsive with the help of the srcset attribute of HTML.
• learned some more concepts of JavaScript for the form's working such as:
  • taking the value of input fields and storing them inside a variable.
  • updating the states of the input fields as well as the error text whenever the entered value does not meet the requirements.
  • I think I have improved a bit of my CSS too. Sadly, I forgot to use grid for this one.

I had lot of fun making this one. It was very challenging to me...

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

As I mentioned, I'm not very good at JavaScript. I don't know much about it.

E-mail validation was a bit of a challenge to me. It made me go through various MDN and GeeksForGeeks articles to implement.

Things I did easily:

• the error state when email input is empty.
• the success modal inheriting the input email address.
• switching back and forth between the modal and the form when clicking on the buttons.

How I overcame the issue: I spent hours to create it and, in the end, I had to use Validator.js library. It was pretty easy to use and implement.

But it didn't work. It just leads to the modal despite me not entering a valid email. I don't know understand how to fix it. Here's my code snippet:

• In the HTML, I imported the library using CDN:

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

• Next time, I will learn more of JavaScript concepts to make sure things work as they're intended to.
• I will start with mobile-first workflow to make things responsive in a better way.
• Learn more about useful libraries to make things easier and better.

Any suggestions are welcome! 😃

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

This one was quite interesting to build because of the amazing layout.

I wanted to start mobile-first but instead went with desktop first because I was too excited about the layout. I don't think it has affected my workflow. But I think it is better for creating such layouts.

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

The main issue was creating the navigation toggle and I'm not really confident about how it turned out. Also, I'm not good at JavaScript, I added this to my hub because of the design and not the scripting part.

• I had to replace the hamburger menu icon with the icon-menu-close, because I couldn't figure out how to replace the image source on clicking the button. I searched online about it and it didn't turn out quite as expected.
• I would be glad, if someone could review my JavaScript and help me create that hamburger toggle.
• I would like to know if there is a better way to create the navigation bar.
• I don't think my srcset actually works. I haven't gotten used to it and it still feels very confusing to me.

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

I would like to know about JavaScript and about how I can create the image toggling.

Also, I feel like I still don't know how to the use the srcset in HTML. It just doesn't work as expected. I think I'm doing it the wrong way.

I would love to know how I can improve in various aspects.

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

This is a re-upload

My 5th Junior Project!

I had a lot of fun creating this one. I think I literally fell in love with the color palette and the beautiful images provided. So, I decided to work happily on this one!

This is actually my first time using SCSS for a project on the website. I'm really happy how it turned out because it took me 2 days to complete it. I think I have put some effort to make the elements accessible to everyone! I hope it works well on your devices.

This one did help me make use of my CSS grid and flex layouts. I think this is one of the longest projects I have done so far!

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

I think I had almost no challenges here except getting the paddings right. But I managed to get it close to the design. I had spent some time on the Footer because, I didn't understand the layout quite right. But, after I had an idea about it, I managed to create it with ease.

There were some mistakes in the path of the image, some layout errors and some minor things. I got around these on my own and I'm proud of that!

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

I would like to know how responsive it is and how accessible it is. I would like to know how I can improve my CSS as well as my HTML.

Any recommendation on how I can improve are welcome!

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

I had a lot of fun coding this one because of the beautiful color palette! This one helped me get my hands on with CSS grid.

When I was trying to make it responsive for mobile, I had a bit of an issue and searched for a solution on YouTube. But, I think I need to get along with reading documentations on solving issues.

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

Making it responsive was a bit of a challenge. But thankfully, a friend on the Discord community helped me out.

This project also motivated me to learn more about CSS grid

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

I would like to know how it looks on your devices.

Any suggestions on how I can improve is welcome! 🎉

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

Zero help from Google or the Web!

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

It was not challenging, but getting the layouts right took a bit of thinking and time.

But, the image patterns on top and bottom of the screen gave a bit of challenge. But, I managed to put it into the website.

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

I want to know if it's responsive on different screens. And also, if the method I used to create the pattern images at the corners of the screen work well.

Any suggestions on improving myself is welcome!

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

I'm proud of completing my third Junior level challenge.

this is probably the second time I'm using srcset

It was a bit confusing to use but I hope it works as expected. I'm actually really happy about making this website responsive. I think this is the most complex project that I have created(the layouts, image-sizes, paddings, etc.) and I have also made it responsive for smaller screens.

After this project, I have fallen in love with css grid!

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

Maybe the paddings and the layout in general was a bit confusing but the Firefox DevTools did a great job helping figure out and fix my paddings and layout.

The hard part was optimizing it for smaller screens. I wanted to make it work well on iPads, but that somehow messed up the whole website on mobile screens. So I had to spent an hour just to edit the whole file. Thankfully git had my back and I could just cancel all the changes and fix this error.

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

I had a lot of confusion regarding the position/visibility of the Mac computer. I tried many ways using position: absolute and padding-right. But it messed up that whole section. So I cancelled all those changes.

I have tested it to work on Samsung Galaxy Note 20, Galaxy Note 20 Ultra, Galaxy S10 and S10 Plus, Galaxy S20 and above, iPhone 11 models and above using Firefox DevTools.

Aside from these, I would like to know how well it works on other devices such as iPads, iPhones and different Android devices.

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

I'm proud that I solved the responsive design issues myself!

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

I had a bit of challenge regarding the layouts, but chrome's Developer Tools helped me inspect it well and resolve it.

I didn't know how to make the SVGs white for the footer social icons. So I had to use a bit of work for that too by manually editing the SVG source file.

Also, I have not added the JavaScript because, I didn't know how to. I'm know very little of JS and I'm not confident to do that email address error.

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

On accessibility, responsiveness and anything! If someone could explain the JS part, I would be glad to know.

Edit: In the generated screenshot, there is a whitespace at the bottom of the screen. I would like to get help with that

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

Completed it and learned how to google for things that you find difficult. That's all :)

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

I didn't know how to get the rounded borders around the icons. So did a bit of Googling and Luckily, Stack Overflow helped me solve it.

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

I'm not really confident about its responsiveness. It might not be perfect for bigger displays because it is my first time trying mobile-first workflow completely.

I would like to know if I did well with the CSS. Thank you!

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

What I learned:

• I learned how to fix text and image sizing for smaller screens and optimize the content for it.
• I learned some complex layouts in the project.
• Better use of flex, grid and @media

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

I was lost while making it responsive. Sometimes, it would overflow on right side of the screen. But, I managed to look into it and fix it. Now, It works fine.

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

I would like to know if it works well across different screens. Whether everything's aligned perfectly or not.

Not just that, I would welcome any suggestions or helps!! 🎉

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

Successfully completed the mobile-first workflow!!

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

I'm happy that this time around, I faced no challenges. I think the mobile-first workflow really helped me solve many of the problems that I had faced with my previous submissions.

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

I'm pretty confident this time. But it might not be perfect. I would like to get info about the viewing experience on different devices.

Any recommendations are welcome!!

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

Successfully completed the mobile-first workflow!!

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

I'm happy that this time around, I faced no challenges. I think the mobile-first workflow really helped me solve many of the problems that I had faced with my previous submissions.

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

I guess I dont need help this time.

But, any recommendations are welcome!!

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

Didn't Google! I found the solution by myself and tried to take it further.

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

The positioning of the popup was a bit challenging to accomplish. I used position: absolute to make it. But, It may appear a bit off on Mobile screens. The sizing of the image was not a big deal but was a bit confusing.

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

I would like recommendations on my javascript code. As I'm just getting started with it, my code may not be good enough.

Any recommendations are welcome!

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

Finished it with 0 help of Google!

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

I haven't faced any difficulties this time.

But, I'm not really confident about the validity and accessibility of my code.

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

I would like to learn more about accessibility of website and how to improve it.

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

I'm happy that I could complete it without much confusion!

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

I couldn't get an idea about the image's appearance. So, I couldn't do it right on the mobile view. The nutrition table do look a bit different.

I feel like I have forgotten some concepts of both HTML and CSS. But, I did manage to put it together.

I think I need to dive deep into the complex uses of both flex and grid.

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

I would like some suggestions on the image as well as the font-sizing of the project.

I feel like the CSS is too much. Is there a way to simplify stuff? If possible please tell me how to. It will help me write better code.

Also, I do doubt the accessibility features in this project. So, if you notice something off, please tell me and I will try to change it. Thanks!

Hello there! I completed this project in almost 6hrs. I was able to make it look as same as possible, Except the image is still on the left side of the page on Desktop View. As I'm still getting used to CSS Grid, I couldn't figure out How I could align the image to the right side of the Container. Can anyone help me fix the image position? Thank you.

I built this with the help of Kevin Powell's video. Even the class names are actually the same as his. But I did not just copy the code. I understood every aspect of the code he wrote. Now I can use those techniques in my own project.

Hi there! I have doubt about the button's position on mobile screens. It's shown close to the bottom of the container in the preview design files. But my button is a bit lifted to the top. Can anyone help me fix it?

Thank you!

Hi there! I have done a lot of work on this one. Or maybe a bit too much. I feel like the code is just too much. I would be glad If anyone could look into the code and tell me how I can simplify my CSS and write better code.

Also, This time I have got a perfect validation report from the site. I'm happy about that. Thank you!

Hello, I have a doubt on centering the .wrapper on the screen for that, I used

The .container is the parent of .wrapper

<div class="container">
<div class="wrapper">
</div>
</div>

.container {
position: relative;
height: 100vh;
}

.wrapper {
display: flex;
flex-direction: row;
max-width: 800px;
max-height: 400px;
padding: 30px;
position: absolute;
inset: 0;
margin: auto;
}