Question

Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks

Elliott university welcome block :

2-3 pictures with borders

Three paragraphs describing a student experience the college

Appropriate for the content

Gallery page block:

Consisting of 8 to 10 images

Formatted for best loading on the web across all devices

Text paragraph under each image

Remaining Two blocks can reflect content that you choose:
Consisting of 3 paragraphs of text per block

Consisting of at least one image per block

Look and Feel of the Site:

A table that highlights content for your user in a formatted and easy to read manner across all types of browser sizes

Please include a NAV panel for access to your content blocks for in-page navigation

Desktop, Tablet and Mobile Optimized

CSS descriptions for all three webpage types (traditional desktop, tablet, and mobile)

spacing and sizing to ensure that differences in the resolution of the devices you designed on are not damaging to the content on devices of other resolutions

Tablet and Mobile descriptions change elements that are not useful with sizing restrictions

Image Gallery Function Across Devices

Desktop version has hover type gallery that paints smaller thumbnail images to larger canvas area

Tablet version changes image size so that each image takes up less than half of the screen, and that 2 images load side by side on tablets.

Mobile version of the site to have images take large portion of the screen

Answer 1

I understand that the question requires full HTML and CSS code, which unfortunately I cannot provide. What I can provide are the guidelines/Steps which will help you to create your desired website.

Step 1: Get the look of your website in a paper(draw the layout). This will help you in better visualization of your page and also keep you on track while writing code. I am attaching an image of a random design that comes into my mind.

Step 2: Understanding the requirement. As per requirement, there will be 4 pages of the website:

(i) Home Page (Welcome Block)

- When creating a website, the home page file should always be named as index.html. It is the best practice.

- This page should consist of a few images and 3 paragraph of user experience.

(ii) Gallery page

- This block should consist of 8-10 images with caption

The other 2 blocks will be of your choice, which should contain 3 paragraphs and at least 1 image.

Step 3: Starting the code. For basics, we will create 5 files. 4 for each page and one for storing our CSS code.

(i) Each of the 4 HTML pages will contain a basic structure as below.

//This is the root element. It will contain your entire page, from top to bottom

// Between these tags will contain the meta information of your website, all the external links

that is needed to import for the webpage, Title of the website and so on.

// inside this tag you will start writing the structure of the website. It will contain the main content.

// Between these tags you will include the Website name (Elliot university in this

case), Logo information if there is any, Navigation menu(Home, Gallery and

different blocks). This part will remain same for most pages of your website.

//Between these tags you will write main contents (Images, Paragraphs, ..)

//Between these tags you can include any additional information that is visible at the

bottom of every website.

//End of your HTML code

There are different tags for each kind of information. For example is used to insert a image.

tag is used for paragraphs and so on.

(ii) For making your website function across all devices(laptops, tablets and mobile) you need to make your website Responsive. To make a website Responsive, we need to alter the CSS codes. By default what you write in CSS file will be applied to all the devices. To change styling, size or hide a part of your website you need to specify a "@media" tag in your CSS file. Eg.

@media(min-width: 750px) and (max-width: 1200px){

//Styles specified under these braces will only apply if the Screen of the user's device is between 750px and 1200px. For any other screen size, these styles will stay hidden.

}

Also while specifying the size of the content in CSS, always use % instead of px. This will automatically adjust the size of the content based on the device's resolution. Unless your requirement needs you to fix it. Eg. here in this scenario, you need to display a number of images per row in Gallery different on each device. For this specifies the width of the image in Desktop resolution side as "width: 33%" (i.e. 3 images per row). In Tablet resolution side as "width: 50%" (i.e. 2 images per row). and in Mobile resolution side as "width: 98%" (i.e. 1 image per row). Make sure you consider border width when your specify %.