web front-end interface design

 







Step 1: Open VS Code.







Step 2: Open File Explorer then double click to Create Folder.

Step 3: Swipe the folder to VS Code.







Step 4: Double click and Create a New File.







Step 5: Write index.html for the file name then Enter.








Step 6: As seen in the image above, we will begin our first code by typing "!" and press Enter to display the next code.







Step 7: We can also change the title name to "This is My First Web-APP".







Step 8: Now we'll add "<meta http-equiv="X-UA-Compatible" content="IE=edge">" on line 5.















Step 9: Now, we need to type the style and body of the code like the image above. Be careful when typing code because there are tons of things to be typed. You can also change it to any color you want.












Step 10: If you already type the code then you can save the file.












Step 11: We're moving to File Explorer and find the folder that we created in the second step.

Step 12: Open the folder and you can see the file that we just saved.











Step 13: Open the file and this is your Design.




      

Komentar

Posting Komentar

Postingan populer dari blog ini

web front-end interface design

Gambar
 Here we will continue creating our calendar application.   Step 1: Click right and create new folder named css. Step 2: Create two new files under css folder.  Step 3: Move the body of the code to main.css file. Step 4: Move the current day of the code to current-day.css file. Step 5: Put the link under the meta. Step 6: Input the code as above. Step 7: Save all the data. Step 8: Open your file from file explorer and you can see our progress for today.
Baca selengkapnya

web front-end interface design

Gambar
  Here we will continue creating our calendar application. Step 1: Delete "open" and add "hidden" like picture above. Step 2: Create a New File named "testRWD.html". Step 3: Type "!" and press enter to display the code. Step 4: Then change the title name to "test RWD". Step 5: Type the code like above pictures. Step 6: This is the test RWD result.
Baca selengkapnya

web front-end interface design

Gambar
 Here we will continue creating our calendar application. Step 1: Create new files under css folder.  Step 2: Move the style of the code to calendar.css file. Step 3: Create the link. Step 4: Create code for color options. Step 5: Type the code like above picture. Step 6: Type the button code. Step 7: Type the code for add note. Step 8: Type the code like above pictures. Step 9: Create new files under css folder.  Step 10: Move the style of the code to model.css file. Step 11: Create the link. Step 12: This is the progress for today.
Baca selengkapnya