Intro to Web Development
Before you read
You can check out most of the code and documents I have done for this course on this GitHub Pages .
You can view my final project site on GitHub or 'Archived lwdService Page'. However, as I am exploring and implementing more web applications, many links on that site are no longer work anymore. Still, the basic function is working that you can learn my design.
The idea behind this project is to use what I just learned to create a landing page for myself. The landing page will lead visitors to three places: my web resume, social link, and my various self-hosted services. I believe it is a great way to demonstrate the skill I gain from the course. It also provided an interactive way for people to view my existence on the web.
There are a few things I created for this project to help me create the structure of the website.
The sitemap is a document disclosing the structure of your site, providing the relation of each page. This document is often generated by software in form of an XML file for the search engines to generate an index of the website. However, Sitemap I created is slightly different than Sitemap used to be. It is a sitemap plan used for website designers like me to lay out the structure of the site. It is like creating an organization structure diagram in an organization. It helps me to sort out the relation on each page.
The wireframe is one of the basic prototype methods when designing a website. It often provides a straightforward visualization of what will the site look like. Using wireframe can help developers and designers know the expected layout of the site, the function will be implemented. The Wireframe I created for the site helps me a lot when I write the code.
Essentially this project is a static site. It is easy to implement. All I have to do is extract the site folder to the server, configure server software, and it is good to go, It is even easier to implement on services like GitHub Page, which are not only convenient, it also free to use.
More to read
In the advanced web design course, I have learned a new way to use WordPress, introduce a new technology stack: JAMStack, a new framework: Next.JS. It brings me...