TUTORIAL OF CREATING A BLOG ON WEBSITE

 Assignment of Web Front-end Interface Design

Tutorial to Create Personal Blog

 27 September 2023

 

For creating a personal blog on a blogger page by using a code, the following steps are the important footstep to comply with.

 Step 1: 

Before writing a code, need to create a file on Visual Studio Code page as: 

click "New file" > on Visual Studio Code > type "index.html"
 
Visual Studio Code page

 

 Step 2:

After pressing Enter button, there will show a screen of place to create a folder for saving codes as personal preference area on computer.
 
Press Enter > File name: index > Folder name: 0927 (customize) > click Create File
 

 

Step 3:

Then, there has a cursor to type codes for creating a page. Herewith example codes with a demonstration page for a reference.
 
Visual Studio Code page

 
Codes on Visual Studio Code page

Step 4: 

On Step 4, need to save codes on a folder where is created in Step 2.
 
File > choose Save > click "index" file
 

Web is created under index name with specific location on the computer


Step 5:

On the last step, the codes that typing on the visual studio code file: "index.html" will show the following result on a website.
 

 
 















 

 

 

 

 


Comments

Post a Comment

Popular posts from this blog

Image
  11th Week Homework  Part 4 - Build an App with Responsive Features For this 11-week homework assignment, I am excited to delve into the development of a Responsive App or Responsive Web Design App, building upon the code from our previous homework on the Chrome website. Let's explore and create together! To create a Responsive Web Design Application on the Chrome website, utilize the following CSS and HTML codes within the Visual Studio Code. These codes will ensure a responsive layout, seamlessly transitioning from landscape to portrait styles and ensuring that elements are displayed side by side. It is recommended to leverage Developer tools on the website for optimal implementation. The provided codes encompass features such as My Calendars, color options for selecting a favorite color, and a Post-it note to enhance the overall user experience. For clarity, I am attaching a video to elucidate the main points of creating the Responsive Web Design. 
Read more
Image
  9th Week Homework  Part 2 Calendar – Calendar CSS Formatting Regarding the 9th-week homework, there's a requirement to include background text, caret icons on both the left and right sides of the calendar month, enhance the current-day cell with icons and color, insert customize icons on the date, and integrate post-it notes settings from the previous calendar lesson. To assist with this, I've included notes and provided images of the relevant code snippets for your reference. Let's tackle this task together to ensure a comprehensive understanding and successful implementation.  To begin, insert the following codes under the <style> <head> <body> in the existing code from the previous lesson. Ensure to update the year from 2020 to the current year. CSS Setting Code After inserting the initial codes, make adjustments to the CSS settings using the provided codes in Visual Studio Code. Depending on personal preferences, both numbers, font-size, ...
Read more
Image
  10th Week Homework  Part 3 Calendar – Add dialog, color option, and popup (Modal) In this week's assignment, I've upgraded the HTML code for the color selection dialog in My Calendar. The improvements include formatting enhancements for color options, button styles, and the addition of a checkmark feature for selecting personal favorite colors. The overall appearance of the color selection dialog box has been refined, ensuring a polished look with attention to detail, including the presentation of the selection symbol. As a finishing touch, I've inserted a post-it note dialog to enhance the user experience or make notes for anything. Firstly, I will be incorporating dialog codes into the existing HTML from the previous homework assignment. Meanwhile, I will be making adjustments to the data information, such as modifying dates, months, and the overall calendar layout. Dialog codes Dialog codes adjustment Secondly, I will be integrating color-option codes into the ...
Read more