Postingan

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.

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.

web front-end interface design

Gambar
Here we will continue creating our calendar application. Step 1: I'm going to use fontawesome, so we need go to  Font Awesome  and sign up. Step 2: After signing up your account, you can go to Your Kits page and click the id. Step 3: Copy the code to your visual studio at line 10. Step 4: Going back to fontawesome, open Icons page and search carot. Step 5: You can pick carot left and carot right then copy the code to visual studio. Step 6: add icon after the code. Step 7: add icon code like above picture. Step 8: Download image note and save it to images folder. Step 9: Write the code like the above picture. Step 10: Save the file and this you result for today.

web front-end interface design

Gambar
  Here we will continue creating our calendar application. Step 1: Click right and Create new folder named "images". Step 2: Download image icon and save it to images folder. Step 3: Open visual studio, we going to add new link to line 9. Step 4: Input the code as above to line 13-86. Step 5: Input the background code as above to line 92-93. Step 6: Save all the data. Step 7: Open your file from file explorer and you can see our progress for today.

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.

web front-end interface design

Gambar
  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 save...