responsive-blog-webpage

Main Web Page

^{ASP.NET Web Design}

---

Software Requirement:

• Visual Studio Community 2019 or higher

---

Procedure:

1. Open Visual Studio and create a new empty project.
2. Type the project name in this format: NameOfWebsite_LastName_FirstName. Then, click Create.
3. In the Solution Explorer, right click on the name of your website, select Add > New Item. Then, choose Web Form. Set the name of the web form as default.aspx. Then, click add.
4. To add the functionalities of the bootstrap, you can download the files or add the links below in the .net file.

a. CSS

i. <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap
.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">

b. JS

i. <script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.j
s" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

ii. <script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.
bundle.min.js" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>

1. You can also get those links from the official page: https://getbootstrap.com/docs/4.6/getting-started/introduction/
2. Use Boostrap 4 only for the stable version.
3. Create a simple responsive blog web page for this activity. Add appropriate images.
4. Your blog can be about any of the following:
   • Food
   • Animals
   • Nature
5. Apply the grid system to produce a responsive web page.
6. To check if the page is responsive, right click on your created web page and choose Inspect.
7. Click the toggle device toolbar and to select a mobile phone size.

1. You can also choose the dimensions for responsive or different devices.

---

🖥️ Prelim Laboratory Exercise for my 3rd-year college course “Advanced Web Programming.”

SY2324-2T

💙 Instagram: @izzyluuuuh