Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Typemaster Pre-Launch Landing page with SASS partials

#sass/scss
DanielK 440

@DanK1368

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys. It has been a while since Ive done a challenge.

First things first..

Can someone help to actually display my page. I get the 404 error. I used SASS partials for this one with Parcel. Parcel created a dist folder for me which I understand is the one that is suppose to be used for final production. However, when I use the url from github pages it displays the error.

Now regarding this challenge...

I used SASS partials for the first time to practice making a better file structure using the 7-1 pattern. Not sure if I over-complicated things for this challenge. But Im wondering if you guys can have a look if I am structuring it right. I feel like I am not haha :)

Also, if you notice that on the desktop version the text "Mechanical Wireless" header is suppose to be inline with the images. It is not. How can I get that component to be in line with the images using Grid? I ran into a few issues with that as I was transitioning to bigger screens and wanted to modify the layout. Because some of my components were in divs that had their own grid system. So another question I have is, how do I move a component that is part of another grid system out of it, like that header? Or is it better to structure my html differently so it makes it easier to move things around later on.

Appreciate all the help, and hopefully someone can tell me how to get my site to actually work haha :)

Community feedback

@Jank1510

Posted

En que framework desarrollaste el proyecto ? Y como estas montando el proyecto en github pages ?

0

DanielK 440

@DanK1368

Posted

@Jank1510 Hey bro..sorry I dont speak spanish. But Google Translate does haha

I used github bash to mount my files to my github repository

0

@Jank1510

Posted

@DanK1368 HAHAHA OK.. visit your repository and i think you are using a framework, what is it?

0
DanielK 440

@DanK1368

Posted

@Jank1510 mhmm..i dont think I am. Or maybe I do not understand what you mean haha

0

@Jank1510

Posted

@DanK1368 What I am trying to tell you is that if you use a framework like angular, react or other?

0
DanielK 440

@DanK1368

Posted

@Jank1510 ah, no I am not...no framework whatsoever.

0

@Jank1510

Posted

@DanK1368 So keep something in mind... when you push a project to the github pages, the index.html has to be outside any folder for github to read it, but you have it inside a folder called src... that's why I asked if you use a framework because most of the time frameworks organize project content that way... and sorry if it is a bit difficult to understand I made an effort with google transalte

0
DanielK 440

@DanK1368

Posted

@Jank1510 wow I finally got it to work. You were right. So I placed the index.html file outside for github to detect. However, at first it did not pick up the css file. So I noticed that the file path was not updated correctly. I had to manually add adjust it from href="/main.77bb5cfd.css" to href="typemaster_pre_landing_page/dist/main.77bb5cfd.css"

There must be a better way to achieve this.

0
Hania B. 1,360

@techanthere

Posted

I think you should reconfigure the pages settings for the repository, probably pointing to the root folder, choose the other folder instead.

0

DanielK 440

@DanK1368

Posted

@techanthere So I can point it to a docs folder, but since I dont have a an actual docs folder do I just rename it dist-->docs ?

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord