All solutions

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

I'm proud that I persisted in trying to get every section of the website to look relatively smooth and responsive (360px and above). There were times when I could have just left the design as it was but I took significant time to try and make little improvements on spacing and general responsiveness to the website.

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

Getting the download cards to be slightly offset from each other in the desktop design. To accomplish the offset effect, I increased the number of grid rows and adjusted their sizes for precise positioning of the elements mainly through trial and error.

 display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(20, 25px);
      grid-column-gap: 2rem;
      grid-row-gap: 0px;

 .smol-card-component:first-child {
    @include mq(medium) {
      grid-row: 1/15;
     
     }

    
  }

  .smol-card-component:nth-child(2) {
    @include mq(medium) {
      grid-row: 3/17;
     
     }

    
  }

  .smol-card-component:nth-child(3) {
    @include mq(medium) {
      grid-row: 5/19;
      
     }

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

Questions:

1. How common is it for developers to cater to users with screen sizes of 320px? I imagine that the majority of users are no longer using devices like the iPhone 5, for example.

2. How far should you go when it comes to accessibility. I will add alt text and labels to buttons and other interactive parts of the site and test it with a screen reader but I have noticed that there are so many other things to follow when it comes to true accessibility, like focus trapping, form labels etc. For your average website should you be aiming to follow something like "The European Accessibility Act (EAA)"?

A good challenge that caused me to stop and really think about this site's layout and how I could structure the HTML to easily transition between mobile, tablet and desktop.

The background images on each sections of the 3 page website also proved a bit of a challenge at times, but I managed to get them as close as I could to the design files.

This is the Second site I have made using an API. It was quite challenging to figure out some of the logic. I feel that the code may be a bit bloated in some areas, particulary with the CSS as this was also the first time I attempted to create a light dark theme switcher without looking up how it is done online. Overall I feel that it was a good challenge and a good introduction into APIS and how they work.

Overview: This is the first time I made a website using @use and @forward rules instead of @import. The biggest challenge was making the mobile background image and background pattern scale smoothly while staying close to the top navigation bar. The final result looks fine on desktop and mobile devices, but may need some optimization for tablet screens and very large screens.

Things that could be improved / worked on:

• Tablet screen optimization.
• Fading effects on the button elements. I wasn’t able to figure out how to apply a transition from one background linear gradient to another. For example, from background: linear-gradient(135deg, #33D35E 0%, #2AB6D9 99.58%); to background: linear-gradient(135deg, rgba(51, 211, 94, 0.4), rgba(42, 182, 217, 0.4)); I couldn’t apply any transitional effects to buttons with these gradients.
• Alignment between sections on very large screens.

Questions:

• Is it possible to apply transitions to elements that have background gradients?
• Hovering over the 3 CTA buttons ‘Request invite’ appear to cause some sort of slight shift in the surrounding layout, what might be causing this?

Any sort of feedback would be greatly appreciated!

Overview: The layout of this site looked fairly challenging with the overlapping elements, so I chose it in order to practice using CSS grid. The main struggle I had was getting the tablet / desktop layouts to look correct with CSS grid. I managed to get my site somewhat close to the original design, though not 100%. I used the mobile first approach.

Things that could be improved / worked on:

• The slider only works for the images, (I did not notice the changing text until later) I only managed to get the text to change with the pictures using basic if / else statements, but I ran into problems with the logic of the code and ended up having the text match with the wrong image after clicking a certain number of times.

• The box that contains the text 'Brand naming & guidelines' is too small for the desktop size as I had some problems getting the design to match up with CSS grid.

• The desktop site and its content has a max-width and does not stretch out on larger screens. I forgot to take this into consideration when defining the basic HTML structure and making the grids. If I were to attempt this again, I would redo the main section with a better grid system that would stretch out to the edge of the browser rather than having everything centered.

General Questions:

• When is it better to use the <picture> tag instead of an <img> tag?
• Should rem be used for height or width of elements instead of px, I'm aware that rem is preferred over px for font-sizes due to accessibility.
• Is there a way to add a bold font effect on hover to <a> links without them shifting because of the difference in size?

Any sort of feedback would be greatly appreciated!

This is the third premium challenge I have attempted on Frontend Mentor. I thought I might use this template as a temporary portfolio for my work so that is why I decided to do this challenge. There are definitely areas to improve on and I feel that my CSS might be a bit bloated in some areas. One other thing I still need to work on is making custom messages for forms when the fields have not been filled out correctly. I do not know much about form validation, so this is something I will look at before starting the next project and hopefully update on this project in the future.

I was not sure how to make the slider extend slightly beyond the max width of the container without breaking the layout (using absolute positioning) or taking the slider out of the container. I suppose that I could have let the swiper fill the max width of the container and limited the width of the the rest of the content, but that seemed a little inconvenient.

This is the first premium challenge I have attempted on Frontend Mentor. I chose this challenge because I liked the look of the website and how the site layout and elements changed a lot between mobile, tablet and desktop. I decided to limit the size of the content so it didn't stretch too far on bigger screens. The header and footer stretch slightly further than the main content.

This may be the 5th site I have built with the mobile first approach, I found it much easier than writing for desktop first. I find it a little challenging at times to foresee how the design is going to change from mobile to the desktop site and write my HTML accordingly. I think I am getting a little better each time.

I wasn't exactly sure how to toggle my mobile navigation menu to not only animate in, but also animate out. It doesn't animate out because I am just toggling a class called 'active' which displays as a block and displays none when off.

What is the best way to add a simple fly in and fly out animation for the mobile navigation?(using the hamburger menu). What method can I use to achieve this using basic CSS / JS ?

took the mobile first approach, made a few mistakes with the initial structure of the HTML which caused a lot of problems for the desktop design. I struggled with this but learnt a lot.

Practiced / learned :

• Loading JSON data into web pages.
• Flex ordering
• Making custom elements (header)

Problems: -Navigation scrolls out on very large screens (not centered) -Destinations page is moving when clicking between planets. -Titles on destination and technology pages for desktop don't move with the main layout when resizing.

• Design on desktop does not completely match with design files.
• Some overlapping of elements on resizing browser window.

First attempt at mobile first. Desktop Nav is incomplete. I could only figure out how to get one drop down menu to appear for the mobile navigation. I'm not sure how I can add an event listener for each link and make the sub menus appear depending on the one that is clicked.