@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning : Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":24666,"date":"2020-07-08T10:21:18","date_gmt":"2020-07-08T14:21:18","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=24666"},"modified":"2020-07-08T11:42:00","modified_gmt":"2020-07-08T15:42:00","slug":"create-complete-front-page-layout-css","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/","title":{"rendered":"How to Create a Complete Front Page Layout with CSS"},"content":{"rendered":"A website’s design breathes life into a website. There are so many websites<\/a> with different kinds of layouts. And a website layout is made up of colors, images, content, and videos. These things can be qualified as website content. A website layout is the bones and the skeleton of the website that decides the location of the website material. It is responsible for arranging the elements of the site on a webpage.<\/p>\n
A well-defined website layout can enhance the browsing experience for a user. It can lead to intuitive navigation<\/a> to the website and encourages user engagement.<\/p>\n
Moreover, a good website layout determines and controls for how long the user stays on the page. It also affects the number of pages they visit and how often would they visit the website. A website layout divides a website into headers, menu, content, and the footer of the webpage. There are many different types of layouts available for designing the website structure. But, we will follow the given structure in the image and write the code accordingly.<\/p>\n
3. Webpage Content:<\/h2>\n <\/p>\n
Content is the group of things that you see on any web page, which is between the navigation bar and the footer of the website. The layout of the content is often dependent upon the user for whom the site or a web page is on target. Mobile browsers use 1-column web content. The 2-column content layout is on target for the websites on tablets and laptops. And a 3-column website layout is used by the sites that are on target for the desktop computers.<\/p>\n
Webpage content is not limited to only text content. Webpage content can be anything ranging from videos, audios, images, and graphics, including the text. These days, web content can also include posts from social media platforms like Instagram and Facebook. Blogs also qualify as the webpage content.<\/p>\n
Let us take a look at the code to create the webpage content layout.<\/p>\n
\/* This creates three equal sized columns that is placed besides each other *\/ \n.column\u00a0{ \nfloat:\u00a0left; \nwidth:\u00a033.33%; \n}<\/p>\n
\/* Clear floats after the columns *\/ \n.row:after\u00a0{ \ncontent:\u00a0“”; \ndisplay:\u00a0table; \nclear:\u00a0both; \n}<\/p>\n
\/* Responsive layout – makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) *\/ \n@media screen and (max-width: 600px)\u00a0{ \n.column\u00a0{ \nwidth:\u00a0100%; \n} \n}<\/p>\n
If you want to create a 2-column layout, you have to change the width to 50%. It means that the screen space divides into two halves. To create a 4-column layout, you have to set the width to 25%. Hence, if you have only one column to create, for mobile devices, you have to specify the width to 100%.<\/p>\n
Unequal columns:<\/h3>\n It is not necessary to have equal-sized columns for your webpage content. You can have different sized columns on a webpage where the main content is in the more massive column. And the small column can contain other content like ads, images, social media buttons, or sidebar navigation. The enormous column is there to specify the main content on any webpage. Of course, it is not necessary to follow this exact pattern. Some web design buffs have changed the layout, and the results have been tremendous.<\/p>\n
You can edit the column width to any number. But the only thing you remember is that the column widths’ total should be 100%. We will look at the CSS code to create a more substantial column in the middle with two smaller columns on each side of the middle content.<\/p>\n
.column\u00a0{ \nfloat:\u00a0left; \n}<\/p>\n
\/* Code for the Left and right column *\/ \n.column.side\u00a0{ \nwidth:\u00a025%; \n}<\/p>\n
\/* Code for the Middle column *\/ \n.column.middle\u00a0{ \nwidth:\u00a050%; \n}<\/p>\n
\/* Responsive layout – three columns are stacked on top of each other instead of next to each other. A different type of website layout design *\/ \n@media screen and (max-width: 600px)\u00a0{ \n.column.side, .column.middle\u00a0{ \nwidth:\u00a0100%; \n} \n}<\/p>\n
4. Website Footer:<\/h2>\n <\/p>\n
Footer is the bottom-most section of the webpage that contains fine print, copyright information, quick links, and contact information. Like the website header, it uses footer to place standard information, which is not very critical to the website. Footers are known to maintain the consistency of the site as it features some of the links that you can find in the header of the website. Because the user behavior keeps evolving, it is essential to create consistency in the website functions.<\/p>\n
To keep footer interesting, you can include a call-to-action, a contact form, a map, images, social media buttons, or the latest blog posts. These days, it has been a trend to strategically place call to action on the footer of the website. In addition to this, maps, latest blog posts, social media buttons appear on the footer. These things help a user to look at the other parts of the website as well.<\/p>\n
Let us look at the simple footer code defined in CSS:<\/p>\n
.footer\u00a0{ \nbackground-color:\u00a0#F1F1F1; \ntext-align:\u00a0center; \npadding:\u00a010px; \n}<\/p>\n
5. Responsive Website Layout:<\/h2>\n <\/p>\n
We saw the code<\/a> for every element of a webpage, namely \u2013 website header, navigation bar, content, and website footer. Below is the code for a responsive website layout that changes between the two columns and full-width columns. The column width depends on the size of the screen\u2019s width.<\/p>\n
<!DOCTYPE html><\/p>\n
<html><\/p>\n
<head><\/p>\n
<style><\/p>\n
* {<\/p>\n
box-sizing: border-box;<\/p>\n
}<\/p>\n
body {<\/p>\n
font-family: Arial;<\/p>\n
padding: 10px;<\/p>\n
background: #f1f1f1;<\/p>\n
}<\/p>\n
\/* Header\/Blog Title \u2013 You define the title to your header or the blog *\/<\/p>\n
.header {<\/p>\n
padding: 30px;<\/p>\n
text-align: center;<\/p>\n
background: white;<\/p>\n
}<\/p>\n
.header h1 {<\/p>\n
font-size: 50px;<\/p>\n
}<\/p>\n
\/* Style the top navigation bar *\/<\/p>\n
.topnav {<\/p>\n
overflow: hidden;<\/p>\n
background-color: #333;<\/p>\n
}<\/p>\n
\/* Style the top navigation links for the navigation bar*\/<\/p>\n
.topnav a {<\/p>\n
float: left;<\/p>\n
display: block;<\/p>\n
color: #f2f2f2;<\/p>\n
text-align: center;<\/p>\n
padding: 14px 16px;<\/p>\n
text-decoration: none;<\/p>\n
}<\/p>\n
\/* Change color on hover \u2013 Links change color when you move the mouse cursor on the links*\/<\/p>\n
.topnav a:hover {<\/p>\n
background-color: #ddd;<\/p>\n
color: black;<\/p>\n
}<\/p>\n
\/* This generates two unequal columns that are located next to each other *\/<\/p>\n
\/* Left column *\/<\/p>\n
.leftcolumn {<\/p>\n
float: left;<\/p>\n
width: 75%;<\/p>\n
}<\/p>\n
\/* Right column *\/<\/p>\n
.rightcolumn {<\/p>\n
float: left;<\/p>\n
width: 25%;<\/p>\n
background-color: #f1f1f1;<\/p>\n
padding-left: 20px;<\/p>\n
}<\/p>\n
\/* This adds a fake image *\/<\/p>\n
.fakeimg {<\/p>\n
background-color: #aaa;<\/p>\n
width: 100%;<\/p>\n
padding: 20px;<\/p>\n
}<\/p>\n
\/* Add a card effect for articles *\/<\/p>\n
.card {<\/p>\n
background-color: white;<\/p>\n
padding: 20px;<\/p>\n
margin-top: 20px;<\/p>\n
}<\/p>\n
\/* Clear floats after the columns *\/<\/p>\n
.row:after {<\/p>\n
content: “”;<\/p>\n
display: table;<\/p>\n
clear: both;<\/p>\n
}<\/p>\n
\/* Footer \u2013 This defines the footer section of the website *\/<\/p>\n
.footer {<\/p>\n
padding: 20px;<\/p>\n
text-align: center;<\/p>\n
background: #ddd;<\/p>\n
margin-top: 20px;<\/p>\n
}<\/p>\n
\/* Responsive layout – when the screen has less than 800px width, this makes the two columns be placed on top of each other*\/<\/p>\n
@media screen and (max-width: 800px) {<\/p>\n
.leftcolumn, .rightcolumn {<\/p>\n
width: 100%;<\/p>\n
padding: 0;<\/p>\n
}<\/p>\n
}<\/p>\n
\/* Responsive layout – when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *\/<\/p>\n
@media screen and (max-width: 400px) {<\/p>\n
.topnav a {<\/p>\n
float: none;<\/p>\n
width: 100%;<\/p>\n
}<\/p>\n
}<\/p>\n
<\/style><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
<div class=”header”><\/p>\n
<h1>My Website<\/h1><\/p>\n
<p>Resize the browser window to see the effect.<\/p><\/p>\n
<\/div><\/p>\n
<div class=”topnav”><\/p>\n
<a href=”#”>Link<\/a><\/p>\n
<a href=”#”>Link<\/a><\/p>\n
<a href=”#”>Link<\/a><\/p>\n
<a href=”#” style=”float:right”>Link<\/a><\/p>\n
<\/div><\/p>\n
<div class=”row”><\/p>\n
<div class=”leftcolumn”><\/p>\n
<div class=”card”><\/p>\n
<h2>TITLE HEADING<\/h2><\/p>\n
<h5>Title description, Dec 7, 2017<\/h5><\/p>\n
<div class=”fakeimg” style=”height:200px;”>Image<\/div><\/p>\n
<p>Some text..<\/p><\/p>\n
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.<\/p><\/p>\n
<\/div><\/p>\n
<div class=”card”><\/p>\n
<h2>TITLE HEADING<\/h2><\/p>\n
<h5>Title description, Sep 2, 2017<\/h5><\/p>\n
<div class=”fakeimg” style=”height:200px;”>Image<\/div><\/p>\n
<p>Some text..<\/p><\/p>\n
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.<\/p><\/p>\n
<\/div><\/p>\n
<\/div><\/p>\n
<div class=”rightcolumn”><\/p>\n
<div class=”card”><\/p>\n
<h2>About Me<\/h2><\/p>\n
<div class=”fakeimg” style=”height:100px;”>Image<\/div><\/p>\n
<p>Some text about me in culpa qui officia deserunt mollit anim..<\/p><\/p>\n
<\/div><\/p>\n
<div class=”card”><\/p>\n
<h3>Popular Post<\/h3><\/p>\n
<div class=”fakeimg”><p>Image<\/p><\/div><\/p>\n
<div class=”fakeimg”><p>Image<\/p><\/div><\/p>\n
<div class=”fakeimg”><p>Image<\/p><\/div><\/p>\n
<\/div><\/p>\n
<div class=”card”><\/p>\n
<h3>Follow Me<\/h3><\/p>\n
<p>Some text..<\/p><\/p>\n
<\/div><\/p>\n
<\/div><\/p>\n
<\/div><\/p>\n
<div class=”footer”><\/p>\n
<h2>Footer<\/h2><\/p>\n
<\/div><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n
You have to write the above code in a notepad or any other available text editor, and save the file should as an HTML file with .html file extension. When you want to place the images in the webpage design, you should save all the photos in the same folder as the HTML file folder. To use the image, you should use the complete location of the image in your stylesheet or CSS file.<\/p>\n
Conclusion:<\/strong><\/p>\n
Now that we have talked about website layout in detail, along with the code, you can define what kind of appearance your website should have. A lousy layout is bound to frustrate the user of your website and can quickly leave your site. It results in a high bounce rate, which can affect your rank on the search engine results page. Coming to this, you can conclude that you should invest a reasonable amount of time in deciding upon your website layout. Once you have decided about it, you need to determine what content belongs to which column. Moreover, a good layout helps create an emotional bond between the user and the company.<\/p>\n","protected":false},"excerpt":{"rendered":"
A website’s design breathes life into a website. There are so many websites with different kinds of layouts. And a website layout is made up of colors, images, … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":64448,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2132],"tags":[],"aioseo_notices":[],"yoast_head":"\nHow to Create a Complete Front Page Layout with CSS<\/title>\n<meta name=\"description\" content=\"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Complete Front Page Layout with CSS\" \/>\n<meta property=\"og:description\" content=\"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-08T14:21:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-08T15:42:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"How to Create a Complete Front Page Layout with CSS\",\"datePublished\":\"2020-07-08T14:21:18+00:00\",\"dateModified\":\"2020-07-08T15:42:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\"},\"wordCount\":2301,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\",\"url\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\",\"name\":\"How to Create a Complete Front Page Layout with CSS\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg\",\"datePublished\":\"2020-07-08T14:21:18+00:00\",\"dateModified\":\"2020-07-08T15:42:00+00:00\",\"description\":\"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg\",\"width\":1000,\"height\":533,\"caption\":\"Banner image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/css\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to Create a Complete Front Page Layout with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Complete Front Page Layout with CSS","description":"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Complete Front Page Layout with CSS","og_description":"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.","og_url":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2020-07-08T14:21:18+00:00","article_modified_time":"2020-07-08T15:42:00+00:00","og_image":[{"width":1000,"height":533,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg","type":"image\/jpeg"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"How to Create a Complete Front Page Layout with CSS","datePublished":"2020-07-08T14:21:18+00:00","dateModified":"2020-07-08T15:42:00+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/"},"wordCount":2301,"commentCount":3,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/","url":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/","name":"How to Create a Complete Front Page Layout with CSS","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg","datePublished":"2020-07-08T14:21:18+00:00","dateModified":"2020-07-08T15:42:00+00:00","description":"How to create a complete front page layout with CSS. This tutorial teaches you how to use CSS when creating your front page layout.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2014\/10\/Banner-image.jpg","width":1000,"height":533,"caption":"Banner image"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/create-complete-front-page-layout-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"CSS","item":"https:\/\/webdesigndev.com\/web-development\/css\/"},{"@type":"ListItem","position":4,"name":"How to Create a Complete Front Page Layout with CSS"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/24666"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=24666"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/24666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/64448"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=24666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=24666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=24666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}