Space tourism multi-page website Using HTML SaSS and JS

Community feedback

• 

  Maksim•590

  @MaxTarasevichPosted about 2 years ago

  Hi Miguel!

  Good job!

  Pay attention to the following points:

  1.Make the body background color dark to avoid flickering when the page first loads. It takes time to load the image and the body background is white by default.

  2.I noticed that you use @import in style.scss. The Sass team discourages the continued use of the @import rule.. You should use @use and @forward.This video also can help you!

  3.Tabs on destination page and technology page, slider on crew page - I think you should use JavaScript! Loading a new HTML page every time the slider or tab state changes is a bad idea! Maybe this video can help you with tabs and this video with slider.

  4.It seems to me that for multi-page sites it is worth using PUG instead of HTML, this will significantly speed up the development process, of course you will also need GULP or WEBPACK to automate work with PUG, SASS and other routine tasks.

  I hope my feedback will be helpful!

  Marked as helpful

  2

  ---

  

  Miguel de Leon•60

  @migueldeleon012Posted about 2 years ago

  @MaxTarasevich

  Hi Maksim!

  Thank you for the feedback! i will now refactor my code.

  0
• 

  Denis•1,060

  @Mod8124Posted about 2 years ago

  Hello, Good job!

  You don't need to create many pages, you only need to change the content of your page you can create a slider, select the tags and change the content for example

  //these value are by default when the page start then you change them with your js by clicking a tag
    <h1>Space capsule<h1>
     <img alt="technology image" src="../assets/technology/image-space-capsule-landscape.jpg">
  
     <button>1<button>
     <button>2<button>
     <button>3<button>
  

   //first create an array with all the content(objects)
   const  contents = [
    { 
    title:'Space capsule',
    img:'../assets/technology/image-space-capsule-landscape.jpg',
  },
  {
     title:'Spaceport',
    img:'../assets/technology/image-spaceport-landscape.jpg',
  },
   {
   title:'Launch vehicle',
    img:'../assets/technology/image-launch-vehicle-landscape.jp',
  }
  ];
  

  //then create a variable with an index has to be a let for a change it
  let index = 0;
  
  //then select all your tags and buttons a saved them in a variable
  const title = document.querySelector('h1');
  const imagen = document.querySelector('img');
  const buttons = document.querySelectorAll('button');
  
  //now create a function for changing the content and change the index
  const handleContent = (event) => {
    index =  (event.target.innerHTML -1);
    title.innerHTML = contents[index].title
    image.src = contents[index].img
  };
  //minus one because the arrays start from zero
  
  //then assign a click event to the buttons 
  buttons.forEach((button)=> button.addEventListener('click', handleContent))
  

  Seems like more work but it doesn't if you do it in this way you don't have to create that many pages just only 4 and you can apply the same theory to the project also is reusable I hope you understand if you want to see more visit How to create a slider and javascript dom also you can improve a lot your HTML by using semantic elements also if you try to scale your css you can read about css-methodologies and CSS Architecture

  Marked as helpful

  1

  ---

  

  Miguel de Leon•60

  @migueldeleon012Posted about 2 years ago

  @Mod8124

  Hello Denis,

  Thank you for the feedback! I was thinking of the same thing, but since frontend mentor gave me the template with all the pages i thought that i needed to use as less js as possible. I will proceed by doing a slider as you've suggested.

  Thank you!

  0
• 

  Bryan•130

  @MamieNorrisPosted about 2 years ago

  Hi Miguel,

  I am not as skilled as you (yet :p) so I am not able to review your code but I still wanted to say that the project looks amazing ! Bravo !

  Have a good one :D

  1

  ---

  

  Miguel de Leon•60

  @migueldeleon012Posted about 2 years ago

  @MamieNorris

  Hi Bryan,

  Don't worry you will be able to catch up in no time! i'm still not as good as a normal software dev too, and thank you for the compliments regarding the project!

  Have a good one :)

  1