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

Article Updated On: Jan. 15, 2021

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

Before you submit, replace your images' src attribute to online image URLs e.g. use images 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 <student-registeration-number>-<student-name>.html. When I open your HTML file in my browser, it must load all images and apply CSS properly, any mistake of putting CSS or image URLs incorrectly would result into marks deduction. So must test before uploading.

Create cnn.com layout, overall look & feel must be same e.g. paddings, borders, colors, margins, font family, hover effects, font-size, section headings, achor font etc, etc. of different widgets. You don't need to use all content and images to make as-is website, select a few news and images and use them 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 do/apply particularly 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 e.g. two design, one for below 500 and other for above 500px width. 
Though it should be obvious what are you supposed to do but in last semester, different students worked at different level of detail and missed things they didn't likes. Here, 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 -15 marks.

If you have any question, feel free to ask in below comments or send me an email.


  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.

  3. Sir kindly tell me as u said about unique content i didn't get it kindly explain it. And question 2 is do we have to link the pages too ? Or just have to create a front end design only ?

    1. Unique content is better, but don't bother much about this. You can copy any content from any news website. Even you can repeat same news on multiple sections or even all. What matter is the links style, different widgets look, margin, parddings and overall layout.

      No need to link the pages with original news sources, only front-end design.

  4. sir there have been new minor changes to cnn.com , do we still have to follow these instructions ? and in one of the comments you said to make the website responsive but have prohibited the use of bootstrap , so are we allowed to use flex-box or css grid ?? and also do we have to follow these instructions as it is or can we use our own interpretations as well ? Thank You

    1. I am more concerned about layout. If there are some changes in new design, you can follow news one or follow what I have described above. No issue. Yes, do not use bootstrap. Make it responsive for only one break point, e.g. 700px. for great than 700px. It should follow the above described layout i.e. number of columns etc in each row. for below 700px, section should take 100% of screen. You can do this easily using media queries as we discussed in class.

  5. AOA sir,
    what is meant by following highlighted section:

    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."""""

    Kindly eleborate please.

    1. If possible, also make the menu that appears when user click on the menu-icon shown at at top right of the page. You may display it when user click or when user mouseover the menu-icon. You can use any tiny image for icon, using same image is not mandatory. (This menu is not mandatory in assignment, but a plus)

    2. sir can we use javascript for this?


Post a Comment