First, please download the required files.
In this exercise, you will make the front page of a responsive website. As always, use a mobile-first approach.
There will be three responsive states: phone, tablet, desktop. Screenshots are provided with the downloaded files.
You will write all the HTML & CSS.
The Main Article
Each paragraph in the main area will have approximately 20 words of lorem ipsum. Use lorem ipsum text for those paragraphs and the two headings in the article. To make lorem ipsum, use the command loremXX followed by a tab (where XX = the number of words of lorem ipsum you want).
Links
All links turn hotpink when hovered over. All links will have # as the href value. The text for the links that have icons is login, contact, and search.
The Sidebar
In the sidebar, make up titles for recent posts, and use any national cuisines you like eating.
The text of the quote is the following:
He was a bold man that first ate an oyster.
Jonathan Swift
Style it like it is in the downloaded screenshots, not as it appears in this page you are currently reading.
Typography
Because I wanted to focus on layout in this exercise, just use charter, georgia, times, ‘times new roman’, serif for all the fonts in the document.
But make sure that the spacing and sizing of the type is as close as possible to how they appear in the screenshots.
Font Awesome Icons
The font awesome icons used are for login, envelope, and search. Make sure that that menu text is accessibly hidden.
How To Make Lorem Ipsum
To make Lorem Ipsum text in Visual Studio Code, type loremX plus tab, where X equals the number of words you want: for example, lorem16.
How to Make Multiple Elements
To make multiple elements type html-element*X plus tab where X equals the number of elements: for example, p*4
How To Make Multiple Elements with Lorem Ipsum
Type the element * number > loremXX, then press tab.
For example p*4 > lorem 22 will make four paragraphs, each with 22 random words.