Typemaster Pre-Launch Landing page with SASS partials
Design comparison
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
- @Jank1510Posted almost 3 years ago
En que framework desarrollaste el proyecto ? Y como estas montando el proyecto en github pages ?
0@DanK1368Posted almost 3 years ago@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@Jank1510Posted almost 3 years ago@DanK1368 HAHAHA OK.. visit your repository and i think you are using a framework, what is it?
0@DanK1368Posted almost 3 years ago@Jank1510 mhmm..i dont think I am. Or maybe I do not understand what you mean haha
0@Jank1510Posted almost 3 years ago@DanK1368 ahhahaha google translate doesn't help much
0@Jank1510Posted almost 3 years ago@DanK1368 What I am trying to tell you is that if you use a framework like angular, react or other?
0@Jank1510Posted almost 3 years ago@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@DanK1368Posted almost 3 years ago@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@Jank1510Posted almost 3 years ago@DanK1368 Me alegra poder haberte ayudado.. ! Animo para la próxima
0 - @techantherePosted almost 3 years ago
I think you should reconfigure the pages settings for the repository, probably pointing to the root folder, choose the other folder instead.
0@DanK1368Posted almost 3 years ago@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
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