Debre Markos Poly Technic College Department of Information Technology ‘TVET-PROGRAMME TITLE: Web and Multimedia Designing and Development Level III MODULE TITLE:- Writing Content for Web Page MODULE CODE: 1S WMD3 M05 0517 NOMINAL DURATION: 60 Hours LEARNING OUTCOMES At the end of the module the learner will be able to: Lol. Determine site content requirements Lo2. Write site content 03. Upload content MODULE CONTENTS: LO1. Determine site content requirements 1.1. Identifying customer information needs with reference Customer Needs Identification is the process of determining what and how a customer wants a product to perform. Customer Needs are non-technical, and they reflect the customers’ perception of the product, not the actual design specifications, although frequently they are Closely related. Customer Needs Identification is the process of determining what and how a customer wants a product to perform. Customer Needs are non-technical, and they reflect the customers’ perception of the product, not the actual design specifications, although frequently they are closely related. Customer Needs Identification has two major goals: 1. To keep the product focused on customer needs 2. To identify not just the explicit needs of the customer, but also the latent needs These customer requirements should be independent of any particular product or potential solution, Afterall, it’s only after identifying Customer Needs that one can begin to meet them. So with that in mind, the goal is to find out precisely what the customer wants. Here is a four- step method for identifying Customer Needs: Gather raw data from customers Interpret the data in terms of customer needs Organize the needs Reflect on the Process AeNe 1.1.1 to audi Writing Content for Web Page Compiled by Bantegizia.Z,Understand Your Target Audience Let's say selling is your primary goal. You can determine the best methods of selling only by knowing your audience, ‘The more you know about your prospects, the better you can convert them into paying customers. To write copy that hooks your potential customers, you need to get into their mindset: * Who are the people coming to your site? * What kinds of problems do they want to solve? What search terms would they type into a search bar? 1.1.2 _ site functionality What is website functionality? Website functionality is defined by the ease of how a user can navigate your site, get the information they are seeking, and/or purchase the product they want. Websites that put functionality before the beauty or elegance of a site offer more benefits to users. A few ways to improve your website functionality include «Simple, well-defined navigation * Easy-to-understand web design and clear user experience Quality product visuals and descriptions Distinct calls-to-action( CTAs) Consistent company blog Why does website functionality matter? Simply put, a functional website is more likely to attract more visitors, keep them on your site Jonger, and allow (and even help) them to convert into leads and eventually customers. The more technically sound the site is, both in the front and back end, the better. There are lots of ways you can improve your website technically to enhance performance. 1.1.3 client requirements Client Requirements for Website Design Web Design Requirements — Advice Focused on Client Goals/ Requirements Goals, Features, Plan, Design, Results Orbit web strategists consult on the various aspects of your website as it relates to marketing, sales, and business processes. Our sales process will: * Make sure we are a good fit~ Do you have an existing brand? Do you have a web marketer? * Understand your goals and requirements + Explain our approach and capabilities # Confirm requirements and the business functions of your website # Propose an approach with a scope, budget, and schedule 2 Writing Content for Web Page Compiled by Bantegizia.Z,Expectations Setting mutual expectations is the key to a successful project and relationship. We pride ourselves in asking the right (and sometimes tough) questions and being thorough during the sales process. We work diligently to explain the process and clearly understand the website design requirements throughout our relationship working together. Communication is a Requirement Good communication is required to set, meet, and maintain expectations. Our proposal, project plan, and invoices should align all expectations regarding the website design project. * Scope, budget, and schedule are clearly defined and visible to our team and clients. * Changes to any goals or scope during the project process are appended to the project plan and approved by the client. * All invoices should reflect the approved payment schedule and budget increases. Creating the Blueprint The combination of project goals and expected results, every web design and content deliverable in our process. * SEO and content analysis for attracting traffic Sitemap for content structure towards visitor goals Wireframes that define usability and content layout and drive visitor conversions # Designs that reflect your brand essence * Development plans for content management fe our team to strategic decisions for Maintaining Results — Digital Ink is Never Dry Once the site is launched, enhancements will likely happen to meet business changes and constantly improve the website. Our web strategists will stay in touch with you to discuss your bigger plans, and once a plan is executed, new website design requirements will be considered for development. Orbit Support will be ready to service your more routine requests, such as: * Help desk questions * Testing and fixes to technical problems Updates to the CMS Enhancements to the website * Hosting issues Website Design Requirements Your idea and vision for the project is arguably the most important part of the whole preparation process. Tell us about your idea! What purpose do you want the website to serve? Will your WordPress website require WooCommerce functionality to allow customers to shop online? Please tell us as much as possible! It’s important to have everything in a clear structure that is easy for us to follow. Your ideas and visions can be collated into documents or mood boards if you like and provided as such to us by 3 Writing Content for Web Page Compiled by Bantegizia.Z,scanning and uploading to our Google Drive. Or we can meet over video call or face to face for coffee and you can tell us all about your new website concept. Colour Scheme If you have a particular colour (or colour spectrum) that needs to be featured throughout the website. You'll need to specify this to us. We'll require the 6-digit hexadecimal colour code for the colour you want to use. We recommend using the Hex colour picker website here — Hex Colour Picker. For a website design, we generally like to stick to a base of 3 or 4 colours at most. With 2 of those colours generally being black or white. If you've read other articles on our website you'll already know that we are lovers of white space within a website design. Allowing your content to take centre stage so to speak! The colour you provide to us from the hex colour chart will generally be your brand colours. Or the main colour that you want to be used through the theme of your website design and other marketing material including your logo. Fonts Have you decided on specific fonts that you'd like to be used the design to depict your brands image? Just like colour, these fonts should be consistent throughout all marketing materials as well as company logos to create a concise brand identity. Website Content Requirements Forming the nuts and bolts of your website so to speak is your websites content! We've broken this concept up into a list of images, mock-ups, text wording content and your logo. Depending on your website requirements what you will need may differ, or you may need to provide us with more content. For example these could include, videos, PDF or any other graphics that you require within the design. Your mock-up provided should reference the file names of any particular content you require within the website design. Images We'll let you into a little secret, eye-catching images that give an instant wow factor are an integral part of any website design. If you have really strong and powerful images, the design of your website will instantly look more impressive. We would thoroughly recommend hiring a professional photographer where possible. Providing us with the most high-resolution photos you can get your hands on. It will really make a difference to the final design and help your website stand out alongside your competitors. If your budget can’t stretch to paying for a professional photographer, then perhaps looking at how you can obtain copyright free imagery for your website online would be beneficial. There are lots of great websites out there where you can access high quality photos free or for a donation, Writing Content for Web Page ‘Compiled by Bantegizia.ZMock-ups A mock-up in terms of website design is a document showing how you want that page of the website to be laid out. We receive mock-ups from clients in many forms. Some are more sophisticated than others. However it's an integral part of the preparation process for your website design. Without a mock-up being provided to us, it’s very difficult to get a clear idea of how you want your content displayed on each page. There are a whole variety of formats in which a website design mock-up can be provided to us. You can provide hand-drawn mock-ups to us. Or you can go to the other end of the spectrum, providing professional wire-frames showing each page of your website. Mock-ups can be provided as a Word Document, or PDF. Or like we say if you are hand drawing your mock-up, you can scan these and upload them to Google Drive. You may also wish to provide us with website screenshots representing particular elements or functions of existing websites that you would like to be featured within your own website. Text Content The wording for text content should be detailed in a separate document for each page. The text content can be provided to us as a Word document (.doc) or as a Text document (.txt), either is fine, Before your project commences we'll have established how you'll provide your content to us via a shared access Google Drive folder. This is all part of your website design project management plan which we will have put in place and provided you with ahead of development. This is a requirement of all Primal Space digital services. Logo If your logo is not being purchased through us, you'll need to provide us with this. The logo asset files should be provided as a .ai or .eps file type. Allowing us to edit the logo’s design and size ‘where required to fit within your websites pages. The logo is often edited purely for the purpose of the website design.If you don’t yet have a logo for your website, reach out to us for a quote for our graphic design service. Access to your Domain and Hosting If your domain was not purchased through us here at Primal Space and/or you have your hosting with another company. For us to be able to implement your website live, we'll require login access to our domain and/or hosting control panel to apply the settings. Even if you have your domain purchased elsewhere. But you are having your website hosting supplied through ourselves Primal Space. We'll still need access to the domain settings to apply changes there to point to the new website. Writing Content for Web Page ‘Compiled by Bantegizia.ZGoogle Drive Access We use Google Drive for all content to be issued to us. Providing you with access to folders for each piece of content to be uploaded to before the website build commences. The folders are secure and only accessed by ourselves and you the client. It’s recommended for you to install Google Drive on your computer for ease of file upload, You'll also be able to see the folders being updated by us. Shortlist A concise bullet point of the core concepts of what you will need to provide us with, in advance for your shiny new website: * Concept/idea/Vision # Website Content (Including images, text content etc) * Colour Scheme (If you have a preference/specific requirement) © Mockup(s) * Domain/Hosting Access 1.2. Confirming site purpose and functionality What is the Purpose of a Website? Different kinds of websites have different purposes depending on who the intended audience is. Some websites are geared towards selling products and other websites are geared towards providing practical information, while others are merely for entertainment. Let’s take a look at some of the different types of websites that are out there. ‘Types of website We start most of our digital marketing strategy conversations with a discussion about website purpose. To help get the conversation moving, we share this list of seven common types of website. Sales: “The purpose of our website is to sell__” Lead Generation: “The purpose of our website to generate leads for__ Information: “The purpose of our website is to inform users about Entertainment: “The purpose of our website is to entertain users with __” Service: “The purpose of our website is to serve users by pro Presentation: “The purpose of our website is to present Connection: “The purpose of our website is to connect with > Of course, it’s common for a business or organizational website to combine more than one of these purposes. However, it’s usually possible to identify one purpose as the primary purpose. The Purpose of E-Commerce Websites The Purpose of e-commerce websites are to sell products to users. The most successful websites are carefully optimized to achieve a high percentage of purchases. To achieve success e- commerce websites need to integrate all of the latest online closing & upsell techniques available which have been proven to increase the chances that a visitor will purchase. There are many important elements that go into building a successful e-commerce website such as removing ePNOv eee 6 Writing Content for Web Page Compiled by Bantegizia.Z,friction during the purchasing process, making the checkout smooth and easy, making the website fast and attractive, up selling users on related products, incentivizing buyers, reducing cart abandonment, nurturing past buyers to buy again, remarketing to past visitors who haven't yet purchased, using the proper payment options, having a mobile ready design, etc., etc. Website Functionality and Usabi Functionality Besides providing information, websites feature functionality that enables users to complete tasks, such as searching the site, submitting an online form, or using interactive design features. The Web team in Marketing & Communications helps with designing, evaluating, selecting, and integrating functional components of the University websites. Site functionality involves a combination of code developed by the MarCom Web staff, third-party components, and external services. Successful website functionality involves considerations beyond a webpage. For a desired function, consider: * What's the best method for the user to do what's wanted? © How will users find the function? Who (or what system) will receive the results of the function? How will they receive it? What will they do with it? What follow up will be needed? Usability Usability is a critical facet of website quality that unfortunately often gets overlooked. Usability is concemed with the question, “How easy is it for site visitors to use the site?” More specifically: * How quickly can visitors find the information they’re looking for? * How easily can they accomplish tasks on a site? Nothing is more important for a website than usability. A visually amazing website with bad usability is a bad website, The best content in the world is rendered obscure away by poor site usability. ‘You may have heard about it in terms of user experience, user interface, or whether a site is “user-friendly.” Some general aspects of usability are: * accessibility consistency learnability memorability efficiency © overall user feelings / satisfaction Writing Content for Web Page ‘Compiled by Bantegizia.Z1.3. Identifying content channels and format as part of client requirements. What Is Content? Technically, content is everything you create and publish. Blog posts, website copy, videos, tweets, Facebook ads—all of this is content. People use content to do marketing. They've been doing it since the 1950s, even though they didn’t attach the word “content” to the word “marketing” back then, All marketing is “content marketing” because all marketing uses content. Only in the 50s, they didn’t have the internet. Now we have the internet, and it turns out to be the best channel for transmitting a message to an audience with the purpose of moving this audience down a sales funnel. Think of content as a container for transmitting a marketing message. This container can take many forms: a video, a blog article, an Instagram post, a podcast episode. Whatever form a content container takes, it should have a clear purpose, target a well-defined audience, and get spread across one or multiple channels to reach that audience, Content consists of five core elements. © Message + Purpose + People © Form * Channel 1.4 Identifying relevant templates and style guides Basic Html templates Here is the basic template. This template should be the starting point for every HTML page you write, The rest of this section will deconstruct and explain it. 1. 2. 3. 4, 5. 6. 7. 8. 9. 1. Content goes here 41. 42. * Line 1- This is a special tag which goes at the very top of the document and identifies what type of code is being used, Writing Content for Web Page ‘Compiled by Bantegizia.Z© Lines 2 and 12- The html tags open and close the HTML document. Everything contained within is part of the document. * Lines 3 and 7 - The head tags define the head of the document. Items here are extra data that goes along with the document. * Line 4- The title tag defines the title of the document. You'll notice it shows up at the top of the browser window. «Lines 5 and 6 - The meta tags are used to describe the document. + Lines 9 and 11 - The body tags enclose the actual content which is the document, HTML Summery Specifies that this is a HTML document. Defines the actual HTML document. A container to put ancilliary information which goes with the document. title> A container to define the title of the document, Defines information describing the document. A container to hold the content of the document. 15 Identifying and analyzing relevant content What is Content Relevance? Content relevance refers to how well the information on a page relates to a search query. While keywords are important, itis important to remember that Google is looking at the intent of every search query and provides the content that will match that intent. Although creating a website can be easy, there’s more to it than first meets the eye, Your first task, before investing any time or money, should be to determine the primary reason you want to be on the internet and to identify the audience you want to reach. The content, as well as the scope and quality of design should be driven by the answers to these questions. Important of Relevant Content Your business has a lot of responsibilities, and one of the first things you'll learn when looking how to create good content for a website is that it takes time, money, and resources. This means that each piece of content (video, blog post, infographic, social post, etc.) needs to be crafted with a purpose, and that goal should be centered on the needs of your customers. Writing Content for Web Page Compiled by Bantegizia.Z,Content marketing is the creation and di grow, engage, and retain your audience. A well-executed content marketing strategy is a great way to promote your brand. And, ideally, make your business stand out when it’s time for consumers to make a purchase. ibution of valuable, relevant content. The goal is to What Is a Content Marketing Strategy? Content marketing strategy is your high-level plan for creating and distributing content to grow your audience and reach various business goals. Some content marketing examples include: * Blog posts © Emails © Newsletters © Social media posts © Podcasts © Ebooks * Videos A content marketing strategy helps you achieve specific goals, define clear success metrics, and create processes for specitic improvement. Benefits of a content marketing plan include: 1, More online visibility: The more consistently you post, the more customers you can attract. Provide educational, useful content that addresses users’ pain points. 2. More leads: Because a good content marketing strategy drives traffic, it can also drive leads 3. More authority: The more useful content you share over time, the more people in your niche will see you as an authority figure 4, More customer engagement: Loyal customers are often repeat customers. Engage with those who comment or respond to what you share. 5. More budget: If you can prove your marketing success, it will likely be e a bigger marketing budget in the future r to ask for 1.6 Negotiating alterations to site design What is Website Design? Website design used to mean creating websites for desktop browsers. In recent years, however, the importance of mobile and tablet browsers has moved to the forefront. There are a variety of aspects of web design, including: © Web graphic design * Interface design * User experience design © Authoring Search Engine Optimization 10 Writing Content for Web Page Compiled by Bantegizia.Z,Web design typically functions as a stand-in to describe the client side, or front-end design of the website, The front-end of your website is the part that your customers see, navigate, and interact with on their browser. Elements of Web Design The top 5 are: 1. Layout A good layout will make locating vital information as easy as possible. This includes: © The company logo The main navigation bar * The search box Main image Content The bottom of the website LO2, Write site content 2.1 Generating content What Does Web Content Mean? Web content refers to the textual, aural, or visual content published on a website. Content means any creative element, for example, text, applications, images, archived e-mail messages, data, e- services, audio and video files, and so on, Web content is the key behind traffic generation to websites. Creating engaging content and organizing it into various categories for easy navigation is most important for a successful website There are two basic kinds of web content: 1, Text: Text is simple. It is added on the webpage as text blocks or within images. The best written content is unique textual web content that is free from plagiarism. Web content added as text can also include good internal links that help readers gain access to more information. 2. Multimedia: Another kind of web content is multimedia, Simply put, multimedia refers to any content which is not text; some examples include: ‘+ Animations: Animations can be added with the help of Flash, Ajax, GIF images as well as other animation tools. ‘Images: Images are considered the most popular option to incorporate multimedia to ‘websites. Clip art, photos, or even drawings can be created by means of a scanner or a graphics editor. It is recommended to optimize the images so that the users can download them quickly. © Audio: Different types of audio files can be added as part of the web content so as to increase the desirability of the website. u Writing Content for Web Page Compiled by Bantegizia.Z,‘* Video: It is the most popular multimedia contents; however, when adding video files, the publishers should make sure that they efficiently on various browsers. Web content management (WCM) is essential to run a website successfully. To manage web content, publishers should organize content in line with the requirements of the audience. Content writing is a process of idealizing, planning, writing and editing, flair content mainly for digital marketing purposes. It includes writing blogs, articles, reports, website content, video scripts, brochures, pamphlets, podcasts etc. Expand your writing skills with the best trainers and instructors and turn your talent or the skill you possess into a profession of your choice 1. Blog Writing 2. Article Writing 3. Pamphlet Writing 4, Social Media Writing 5. Creative Writing 6. Copywriting Website Content- A good website content quickly attracts the eyeballs of the readers. Also a person who has good skills in this field earns a fabulous wad of money. Brochure Content- A brochure is defined as a handy book which may or may not have cover. A brochure is prepared and is owned by every company. There are so many tactics that are used in order to make a wonderful brochure. Adobe Dreamweaver CC Adobe Dreamweaver CC is a comprehensive website design and programming application. It supports live editing, through a WYSIWYG interface, or code view, which allows you to edit the code directly. For programming, Adobe Dreamweaver CC has syntax highlighting support for a range of web programming languages, including HTML, ASP, CSS, PHP, JavaScript and more. Adobe Dreamweaver CC now supports responsive website design better than ever, including advanced tools to adapt websites to a range of different screen sizes, and built in support for the Bootstrap framework. Mi jum system requirements for Dreamweaver Windows Minimum requirement Processor | Intel® Core 2 or AMD Athlon® 64 processor; 2 GHz or faster processor. Operating | Microsoft Windows 10 with minimum OS version 1903 (64-bit. system RAM 2 GB of RAM (4 GB recommended). Hard — disk | 2GB of available hard-disk space for installation; additional free space space (approximately 2 GB) required during installation, Dreamweaver_cannot_be 2 Writing Content for Web Page ‘Compiled by Bantegizia.Zinstalled on removable flash storage devices. Monitor 1280x1024 display with 16-bit video card. resolution Internet Internet connection and registration are necessary for required software activation, validation of subscriptions, and access to online services. Setting up the PHP / MySQL site definition in Dreamweaver CC 2021 Click on Expand Connect to MySQL database in Dreamweaver © Listen 80 to Listen 8080 © ServerName localhost:80 to ServerName localhost:8080 Delete index.php from C:\xampp\htdocs © connes | G connes | FAY How te | Bh CHow | A Drs © eream | dp locate | @ won | € CWA © localhost:8080 © Addons store ff Aliéxpress @ Amazoncom J Booking.com ff] eBay Facebook [BJ Prcelin Index of / Name Last modified Size Description 2023-05-18 06:24 Tradationa > 2023-05-17 06:07 + 2017-12-13 18:33 3.7K 2017-02-27 01:36 177 2017-12-13 18:35 2015-07-16 08:32 30K 2023-01-17 02:51 - 2023-01-17 02:50 = 2023-01-17 02:51 = Apache/2.4.29 (Win32) OpenSSL/1.0.2n PHP/T.1.12 Server at localhost Port 8080 Setting up the PHP / MySQL site definition in Dreamweaver ‘A successful connection to a MySQL database in Dreamweaver depends on correct site definition entries when defining the site. Below is a sample PHP/MySQL site definition that uses a Linux PHP server running on a machine identified as mySite.myDomain.com. MySQL is runi 1g on another machine identified as mysql1.myDomain.com, and Dreamweaver is running 13 Writing Content for Web Page ‘Compiled by Bantegizia.Zona local workstation. FTP is used to transfer files between the workstation and the Linux web server. What is CSS Grid? CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created on the web. Features of CSS Grid Layout Flexible Track Sizes You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive. Item Placement CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup. Alignment Controls The alignment of an element/item in a container is easier than ever before with CSS Gi container, you can now arrange elements/items horizontally and vertically as you wish. Inthe Benefits of CSS Grid CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts CSS Grid also easy to use and is supported by most web browsers. The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid. All in all, CSS Grid Layout helps us build a more complex layout using both columns and rows. When Should You Use CSS Grid Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it’s ideal. For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).Grid is also a good choice when we need a space or gap between elements. By using the CSS grid gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things. CSS Grid Properties ‘The CSS grid layout consists of many grid properties. Now we'll ake a look at some of them so ‘we can learn how to use them. Grid container property “4 Writing Content for Web Page Compiled by Bantegizia.Z,This is a CSS grid property that houses the grid items/elements. We implement the CSS grid container property by setting the container to a display property of grid or in-line grid. For Example: display: grid: or display: in-line grid Grid-template-column property This is a property used to set each column’s width. It can also define how many columns you ‘want to set to your project. You can implement the CSS gird column property using grid- template-column. For Example: gric-template-column: 186px auto 160px The code above shows that we have three columns. The width of columns one (the first column) and three (the third column) are set to 100px. The width of colunm two (the middle colunm) is set to auto, This means that as the size of your screen increases, columns one and three take 100px of the screen width, while column two takes the remaining width of the screen (which is auto). Grid-template-row property You use the CSS row property to set the height of each column. You can also use it to define how many rows you want to set in your project. You can implement the CSS gird row property using grid-template-row, like this grid-template-tow: 50px 50px; The code above shows that we have a total of two rows and those two rows are SOpx high. Note that we can also assign the column and row property to our HTML code at once by simply using gird-template. Grid-template is another way of representing _ the grid-template column and grid-template-row. For example: srid-template: S@px S@px / 189px auto 1eepx The code above will give you the same result as grid-template-column and grid-template-row. To use the grid-template property, you will have to assign the value to the row first before assigning the column's value, just like the code above. The 50px 50px is for the row while 100px auto 100px is for the column. ‘A way to remember this is by thinking of the leter L: A gird with a column of 100px auto 100px and row of S0px 50px Column-gap property 15 Writing Content for Web Page ‘Compiled by Bantegizia.Z‘As the name states, it is a grid property that assigns a space between two or more columns ina container. You can do this by using the column-gap property and giving it a value. For example: column-gap: 20px; From the code above, you can see that a gap of 20px was assigned to the column,

1

2

3

4

6

7

8

9

10

11

12

Uuto auto auto auto; Writing Content for Web Page ‘Compiled by Bantegizia.Z20px column-gap Row-gap property Just like column-gap, row-gap is a CSS property that assigns a space between two or more rows, ina container. For example: row-gap: 50px; Note that we can also assign a gap to both the columns and rows of a container by using the gap property. For this to work, we only assign one value to both the columns and the rows of the container, just like we did in the code above. Here's an example: gap: 20px: From the diagram above, we can see that a gap of 20px was set to both the columns and rows of the container making them equally spaced. Justify-content property This is a grid property that you use in positioning items (columns and rows) horizontally in a container. It displays how the web browser positions the spaces around the items (columns and rows). The justify-content property has six possible values: Start end center space-around space-between space-evenly Start This positions the items at the left side of the browser and can be executed with the following code: justify-comtent: start: End This positions the items at the right side of the browser and can be executed with the following code: justify-content: end: Center This positions the items at the center of the browser and can be executed with the following code: v7 Writing Content for Web Page ‘Compiled by Bantegizia.Zjustify-content: center: Space-around This property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next container. This code can be executed like this: Jusify-content: space-around: Space-between Just like the space-around property, space-between distributes the the container evenly, ‘where each item in the container has an equal amount of space from the next one in the container. It takes up the entire width of the container. This code can be executed like this: justify-content: space-between Space-evenly Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container. This code can be executed like this: justify-comtent: space-evenly; Note that all the justify-content properties position their items/elements horizontally. Try doing it yourself to understand it more, Align-content property Align-content is the opposite of justify-content. You use the align-content property in positioning items vertically in a container. Just like justify-content, the align-content property has six possible values: © Start © end center * space-around * space-between * space-evenly Start This positions the items at the top of the browser and can be executed with the following code: align-content: start. End 18 Writing Content for Web Page ‘Compiled by Bantegizia.ZThis positions the items at the bottom of the browser and can be executed with the following code: align-content: end: Center This positions the items at the center of the browser and can be executed with the following, code: align-content: center, Space-around This property distributes the items along the side of the container evenly, where each item in the container has an equal amount of space from the next one vertically. This code can be executed like this: align-content: space-around: Space-between Just like the space-around property, Space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container, and takes up the entire width of the container in the vertical direction. This code can be executed like this: align-content’ space-between: Space-evenly Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one vertically. This code can be executed like this: align-content. space-evenly ‘The basic terms associated with CSS Grid are as follows: 1. Columns 2. Rows 3. Cells 4. Grid Lines 5. Gutter 19 Writing Content for Web Page ‘Compiled by Bantegizia.ZExample 3x2 column grid AAs you can see, there is a header and a footer. Then the center row has 3 columns with nav in the first column sidebar on the right, and the main content area in the center (which occupies most of the row). Huml code

‘

HEADER

CONTENTS

G asg|Q cssc| BE How | x. € > S WA O bocathosts © Adsons store Q Alfxpress As HEADER, ‘NAY CONTENTS ASIDE FOOTER Writing Content for Web Page ‘Compiled by Bantegizia.ZCss rule

items">HEADER items">NAV "items contents">CONTENTS

Result O rscrsioe apes @ anaancm GB Sesiacen ety) @ faese GP Parsnecon @ leluse G cna @ ovlte . 1FR = 1/3rd or 33.333% of the available space and width of the grid container (1200px)

HEADER

»CONTENTS

Result BB caheseoie0rttvoman Kader Ke ~ 8 x € > © © tecmonsnsymopuzevestens 22cm eek osae 0 rssasin BB Aeyes & senna GP tonmgin ety @ruwat |] reancn Gunn 6 ont Gene

‘sheader class="items">HEADER

CONTENTS

footer class="‘items">FOOTER

Result

items">HEADER items">NAV

CONTENTS

items"> FOOTER Bieconinen ne: « UE vse x eer osae: Ome sere A nem Deion ey Oren EItarmen meter Com meee On Bites. Bsmt > © GO inatentmscnremtnnentcenit Final code chiml> ——title-€S8. Gria~title>

Instagram

Facebook Facebook

Pinterest Pinterest

Get our free apps

About

• About Scribd, Inc.
• Everand: Ebooks & Audiobooks
• SlideShare
• Join our team!
• Contact us

Legal

• Terms
• Privacy
• Copyright
• Do not sell or share my personal information

Support

• Help / FAQ
• Accessibility
• Purchase help
• AdChoices

Social

• Instagram Instagram
• Facebook Facebook
• Pinterest Pinterest

Get our free apps

• Documents

Language:

English

Copyright © 2025 Scribd Inc.

We take content rights seriously. Learn more in our FAQs or report infringement here.

We take content rights seriously. Learn more in our FAQs or report infringement here.

Language:

English

Copyright © 2025 Scribd Inc.