Task 5 - Make CNN.com Layout (1st Assignment)

Assignment No. 1
Title: Create CNN Layout using CSS/HTML (do not use Bootstrap)
Due Date: Mar. 10, 2019
Total Marks: 10

How to Upload? Replace your images' src attribute to online image URLs e.g. use images' URL from CNN/or any other website. If you have written CSS in external file, move it to head section inside style tag. Rename your file to "your registeration id - your full name".html and upload it to Google Classroom. When I run your HTML file in my browser, it must load images and apply CSS properly, any mistake of putting CSS or image URLs incorrectly would result into 0 marks. So test it before uploading. Late submission is strictly not allowed. If you could not submit by deadline, your assignment would not be accepted.

Create cnn.com layout, overall look & feel must be same e.g. paddings, borders, colors, margins, font family, hover effects, font-size, section headings, etc. of different widgets. You don't need to use all content and images to mimic as-is, select few news and images (5-7 shall be enough) and use in different sections, repeatedly. You must write all CSS and HTML by your own, do not copy CSS styles from CNN website. Assignments done using Bootstrap would be rejected.

You should particularly focus on following points:
  1. Navigation bar and logo design and placement.
  2. All horizontal sections e.g. 3 column of different width, 3 columns of same width, 4 columns section (same and different width, both), "In Case You Missed It" section, complete footer (6 columns footer and last footer).
  3. Padding and margin of headings of different sections, links, images and contents contents.
  4. Text displayed on images using positioning/tranparency.
  5. Your assignment must be responsive. 100% accuracy on extra small devices and cross browser compliance is not required but your layout shall adjust for at least small and large devices.
Though it should be obvious what are you supposed to do. But my previous experience with web students is not good, in last semester, different students worked at different level of detail and missed things whatever the didn't liked. This time, I have explicitly described what I require from your side. Below I have briefly written what you should focus on or care about in each section of the page. I have also placed the images, to make it clear.

In navigation, the background color is used at 100% width, the content's width is less and centered aligned. The logo overflows the container. The whole website is centered aligned. It remains in center, even if you zoom-in/out.

First column is large, other two columns' size is equal. Use images as used above and use same heading for column 2 and 3 with same color.

In this section, first and last column are equal, centered column is comparatively large. There are 2 styles of images in first and last column, one with 100% width (with respect to container) and the small images placed at left section of news. Observe the top-right arrow in first column heading and look at center image i.e. the text is placed on top of image with transparency so that image at background become transparent.

Again 3 columns of equal size with one image at top. Heading must be shown as-is.

Section headings must be same. You see, now there are 4 columns. First 3 columns follows same width and each cell contains an image/video and text. You may use video or text, no issue. But last column layout is different, there are two sections of last column, top contains one full width image and bottom section has 4 images placed at news' left.

Very clear from view. 2 sections. Follow same style and background color, as above. 

There are two footer sections. Above is section 1, it has 6 columnn of equal size. The section contains different links. And there are 2 links' rows. Your work must be same, including the color scheme.

This is footer section 2. Do not skip it. Very clearn what you are supposed to do here.

If you click on icon on top right, an overlay menu of 100% width opens. It contains two rows of links with section headings. Whole container is transparent. You may not display on-click but when user mouse-over that menu-icon, the overlay links' section shall open. When user mouse-out from the section, it shall disappear.

Your selected media must be decent, avoid using vulgar images/news/videos as you would be working in labs too. You may discuss with your fellows about how the templates are created and learn stuff you missed in lectures e.g. positionsing, divs, floats, navs, etc. but your code should NOT match with your fellows, not even news (you may select news from any news website to be unique). If I found similarity in code, all involved would get -20 marks.

There would be 4 assignments, each assignment marks would be used in theory and lab both. In theory, assignments' weight is 30%. So students who are considering to copy are planning to fail, if you understand the basic algebra.

If you have any question, feel free to ask in below comments, so that others may also learn.


  1. A. O. A sir,
    What do you mean by "do not copy style classes from CNN"?
    waiting for your response.

    1. WS. When you inspect an element, browser shows all CSS properties being applied on that element. You may see that CSS but do not use them as-is. Write your own selectors, classes, and properties.

  2. A.o.a! Sir is there any restriction as far as the content/image etc sizing properties are concerned?There can be a little bit variation in them but they would look similar to those which have been used in the original CNN website,and the properties can vary to a certain extent right ?

    1. WS. The images/sizes may slightly vary but it must generate overall look & feel same and must be responsive for at least 2 screen sizes e.g. small and large.


Post a Comment