
Solution retrospective
I'm most proud of successfully deploying my website and making it live using GitHub Pages. It was a great learning experience and seeing my work accessible online feels like a huge accomplishment. I also learned more about version control, hosting, and troubleshooting along the way. Next time, I’d focus on making the site even better by adding more features and refining the overall look. I’d also work on making the process smoother so I can deploy even faster without any hiccups.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I faced was working with Git and GitHub. At first, pushing my code, managing branches, and handling commits felt confusing, and I ran into issues like merge conflicts and failed pushes. I had to go back and properly learn Git commands, watch tutorials, and experiment until I got comfortable with the process.
Deploying the site on GitHub Pages was another struggle. I had issues with my site not loading at first, and I wasn’t sure if my files were in the right place or if I had configured everything correctly. I troubleshooted by checking the repository settings, adjusting the file structure, and making sure my index file was correctly placed. After some trial and error (and a lot of refreshing), I finally got it to work!
Overall, these challenges helped me understand Git and GitHub much better, and now I feel way more confident deploying projects in the future.
What specific areas of your project would you like help with?I need help with selecting and implementing the correct fonts to match the design specifications. Specifically, I’d like guidance on how to properly import and apply them in my code to ensure consistency with the original design.
Additionally, I would greatly appreciate it if others could review my work and provide feedback to help improve the project
Please log in to post a comment
Log in with GitHubCommunity feedback
- @catherineisonline
Hello, nice solution! The fonts that you need to use are always indicated in the file called
style-guide.md
. For this project it says that you need### Font - Family: [Outfit](https://fonts.google.com/specimen/Outfit) - Weights: 400, 700
There are several ways to add fonts to the project.
👉 #1 Link the font
As you see the project provides the link to the font you need. You can go to this link and click on the very top button Get Font. Then you will have options like getting embed code or downloading. If you click the embed code it will have all the code ready that you simply need to copy and paste. The link tag needs to be inserted in the HTML file, specifically
head
tag, so for you it will be<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
The part
wght@100..900
is where you add the font weight, by default it includes all.Once done so, you simply use it in the CSS like so
font-family: "Outfit", sans-serif;
Instead, you can also try to find a font hosted on CDN. CDN will be even faster because it finds the closest server to the person using the website so this can make the process much faster.
👉 #2 Import
You can also import the font which can be added to the CSS file. Just make sure it's added to the very top of the file.
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap')
Then you use it the exact same way. This one is worse compared to the link because it will slow down the font parsing, so better to use the link.
👉 #3 Downloading the font
You can download the font and it will be even better because you don't rely on anything external but for such small projects usually it's extra hassle, at least for me. To use the downloaded fonts, you need to add them to your projects folder and then create something like this
@font-face { font-family: 'Outfit'; src: url('./fonts/Outfit.woff2') format('woff2'), url('./fonts/Outfit.woff') format('woff'); font-weight: normal; font-style: normal; }
You will apply this font exactly as previously
font-family: "Outfit", sans-serif;
There is also dynamic loading but it's extra at this point. In any case, give it a try! I hope it helps 🔥
Marked as helpful
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