The hometown homepage is my first project of Scrimba Front-End course, in this course I build web designs from scratch and structure the code to finish the layout design.
The Hometown Homepage is my first static website in which I introduce my hometown spots and brief information to visitors who can review and knowing more about Taiwanese culture. Welcome to contact me if you need a local tour guide.
I start the Scrimba Module 2 course- Web dev basics and learn how to use basic HTML & CSS knowledge. At the end of the course, I follow the Figma template to finish my hometown page where you can know more about me, take a look at the → My Hometown Homepage.
- Ensure all points are taken into consideration from Figma Template. → Figma Template from Scrimba
- Having a materials preparation document where I collect pictures/text information/text font/color to match a better visual communication and coherence in one page.
- It's important to brainstorm the HTML structure before starting coding, this step helps me save time.
- Use the "DRY" concept (Don't Repeat Yourself), so that I learn from tailoring the developer's code and learn from it and Scrimba course.
- To show the completed work between a Web and a template, I prefer refining the CSS code to make sure the project can align the design.
Designing a hometown homepage website requires following some rules and taking into consideration that the project is not only a graphic project but a web project too. The next sections are crucial for any web project.
-
HTML is "HyperText Markup Language" It defines the meaning and structure of web content. The Web Designer should keep the structure simple and the similar content should be grouped together to make sure it can be read clearly.
ℹ️ [HTML] GET to know more about the definition. → MDN
-
Be familiar with the HTML Tag.
-
Before working on each website project, I can build every template with my own structure concept. Building the structure before everything else will facilitate my work afterward.
<div class="container">
<div class="row">
<div class="col-sm">
</div>
</div>
</div>You can "SAVE" your color preference in your account. → Color Palette
-
All colors used in the creatives are named (RED: #E63946, LIGHT: #F1FAEE, AQUA: #A8DADC, LIGHT BLUE: #457B9D, DARK BLUE: #1D3557) which are provided by Scrimba course so that they become the basic color guideline to use in my project.
-
All of the most important/used colors contrast in the design to allow text with the background can be easily read.
Fonts are an essential part of every design.
It is recommended to organize the font size and style in the design process. There are several websites where the designer can download the font. (Google font).
-
Using the technique @font-face in CSS, the link is embedded in the CSS.
Resources:
-
The Web Safe Fonts is an important concept. Web-safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web-safe font stack to choose several fonts that look similar and are installed on the various systems that you want to support.
- How to host your website, there are several ways. 1. Netlify provides next-generation web hosting and automation that's very affordable. Is can be integrated with Github for publishing the web easily. The alternative is using Github Page, my way is to use Github Page. → Comparison of Github Page and Netlify
It is recommended to master the flex-box concept, it usually combines with different Property like flex-direction: column; align-items: center; .
Define what condition to use the flex-box, it influences how the content displayed.
Before launching your website, be sure to review all your code and make sure the text layout and comment it's easy to read for another programmer.