{"id":232,"date":"2024-04-28T23:48:21","date_gmt":"2024-04-28T23:48:21","guid":{"rendered":"https:\/\/croakthecode.tcu.edu\/nguyen\/?p=232"},"modified":"2024-05-07T03:34:54","modified_gmt":"2024-05-07T03:34:54","slug":"how-to-code-a-website","status":"publish","type":"post","link":"https:\/\/croakthecode.tcu.edu\/nguyen\/2024\/04\/28\/how-to-code-a-website\/","title":{"rendered":"how to: code a website"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">anh note&#8217;s for additional research on <strong>Project 3: Small Business Website<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Case Study: Coding for Sam&#8217;s Smokehouse Website<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Brief &amp; Site Map<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Brief Presentation:<\/strong> Presented the concept and brief for Sam&#8217;s Smokehouse website.\n<ul class=\"wp-block-list\">\n<li><strong>Website Name:<\/strong> Sam&#8217;s Smokehouse<\/li>\n\n\n\n<li><strong>Website Goal:<\/strong> Showcase Sam&#8217;s Smokehouse as the quintessential Texas barbecue destination, providing information about its menu, ambiance, private event hosting, and catering services.<\/li>\n\n\n\n<li><strong>Tone-of-Voice:<\/strong> Warm, inviting, and authentic, reflecting rustic charm and genuine Texas barbecue experience.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Site Map:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Home Page:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Welcome message<\/li>\n\n\n\n<li>Overview of Sam&#8217;s Smokehouse<\/li>\n\n\n\n<li>Featured dishes<\/li>\n\n\n\n<li>Link to full menu<\/li>\n\n\n\n<li>Private event hosting and catering services info<\/li>\n\n\n\n<li>Contact information and location<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Menu Page:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Detailed menu showcasing signature dishes<\/li>\n\n\n\n<li>Pricing information<\/li>\n\n\n\n<li>Specials or seasonal offerings<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Events Page:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Information about hosting private events<\/li>\n\n\n\n<li>Booking and reservation details<\/li>\n\n\n\n<li>Photos of past events<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Contact Page:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Contact form<\/li>\n\n\n\n<li>Address, directions, hours of operation<\/li>\n\n\n\n<li>Phone number and email for inquiries<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Persona<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Goal: <\/strong>represents barbecue enthusiasts, families, and individuals seeking an authentic Texas barbecue experience.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.28.42-1024x576.png\" alt=\"\" class=\"wp-image-354\" style=\"width:453px;height:auto\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.28.42-1024x576.png 1024w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.28.42-300x169.png 300w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.28.42-768x432.png 768w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.28.42.png 1128w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"564\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.00.png\" alt=\"\" class=\"wp-image-355\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.00.png 1002w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.00-300x169.png 300w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.00-768x432.png 768w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3: Kit of Parts\/Style Tile<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Developed a style tile featuring warm colors, rustic textures, and authentic Texas imagery.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"648\" src=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.12.png\" alt=\"\" class=\"wp-image-356\" srcset=\"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.12.png 1000w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.12-300x194.png 300w, https:\/\/croakthecode.tcu.edu\/nguyen\/wp-content\/uploads\/sites\/9\/2024\/05\/Screenshot-2024-05-06-at-22.29.12-768x498.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: Writing Content and Gathering Images<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlighting Sam&#8217;s Smokehouse ambiance, menu, and services.<\/li>\n\n\n\n<li>High-quality images of signature dishes and the restaurant&#8217;s interior.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 5: Preliminary Work\/Research<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Explored design ideas through sketches and examples, focusing on rustic elements and authentic Texas aesthetics.<\/li>\n\n\n\n<li>Conducted research on inspirational barbecue websites and tutorials to inform the design process.<\/li>\n\n\n\n<li>Practice:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"welcome-section\"&gt;<br>    &lt;h1&gt;Welcome to Sam's Smokehouse&lt;\/h1&gt;<br>    &lt;p&gt;Experience the authentic taste of Texas barbecue at Sam's Smokehouse. Our passion for BBQ runs deep, just like our roots in Fort Worth.&lt;\/p&gt;<br>&lt;\/div&gt;<br><br>&lt;div class=\"featured-dishes\"&gt;<br>    &lt;h2&gt;Featured Dishes&lt;\/h2&gt;<br>    &lt;div class=\"dish\"&gt;<br>        &lt;img src=\"images\/brisket.jpg\" alt=\"Brisket\"&gt;<br>        &lt;h3&gt;Brisket&lt;\/h3&gt;<br>        &lt;p&gt;Our signature dish slow-cooked to perfection.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>    &lt;div class=\"dish\"&gt;<br>        &lt;img src=\"images\/ribs.jpg\" alt=\"Ribs\"&gt;<br>        &lt;h3&gt;Ribs&lt;\/h3&gt;<br>        &lt;p&gt;Fall-off-the-bone ribs seasoned with our secret rub.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/div&gt;<br><br>&lt;!-- Menu Page Content --&gt;<br>&lt;div class=\"menu-section\"&gt;<br>    &lt;h2&gt;Our Menu&lt;\/h2&gt;<br>    &lt;!-- Detailed menu content goes here --&gt;<br>&lt;\/div&gt;<br><br>&lt;!-- Events Page Content --&gt;<br>&lt;div class=\"events-section\"&gt;<br>    &lt;h2&gt;Host Your Event With Us&lt;\/h2&gt;<br>    &lt;!-- Event booking and reservation details go here --&gt;<br>&lt;\/div&gt;<br><br>&lt;!-- Contact Page Content --&gt;<br>&lt;div class=\"contact-section\"&gt;<br>    &lt;h2&gt;Contact Us&lt;\/h2&gt;<br>    &lt;!-- Contact form and location details go here --&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 6: Layout Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Designed two distinct home page layouts, incorporating warm colors, inviting imagery, and intuitive navigation.<\/li>\n\n\n\n<li>Created additional page designs for the menu, events, and contact pages, ensuring consistency in design elements.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 7: Create a DIV Map<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Developed wireframes outlining the layout and structure of each page, including placement of content and navigation elements.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 8: Start Coding<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Began coding the website using HTML and CSS, ensuring responsiveness and compatibility across devices.<\/li>\n\n\n\n<li>Named the home page file index.html and utilized coding resources and tutorials as needed, documenting sources in code comments.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 9: Finalize Coding and Make a Digital Mockup<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Finalized coding for all pages, ensuring functionality and visual consistency.<\/li>\n\n\n\n<li>Created a digital mockup showcasing pages of the site on various devices, including computer, phone, and tablet, to ensure responsiveness and user-friendliness.<\/li>\n\n\n\n<li>Practice:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- HTML Structure for Home Page --&gt;<br>&lt;!DOCTYPE html&gt;<br>&lt;html lang=\"en\"&gt;<br>&lt;head&gt;<br>    &lt;meta charset=\"UTF-8\"&gt;<br>    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br>    &lt;title&gt;Sam's Smokehouse&lt;\/title&gt;<br>    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>    &lt;!-- Include content from Step 5 --&gt;<br>    &lt;!-- Link to external CSS file --&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<br><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>anh note&#8217;s for additional research on Project 3: Small Business Website Case Study: Coding for Sam&#8217;s Smokehouse Website Step 1: Brief &amp; Site Map Step 2: Persona Step 3: Kit of Parts\/Style Tile Step 4: Writing Content and Gathering Images Step 5: Preliminary Work\/Research Step 6: Layout Design Step 7: Create a DIV Map Step [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":353,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial"],"_links":{"self":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":0,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/posts\/232\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/media?parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/categories?post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/croakthecode.tcu.edu\/nguyen\/wp-json\/wp\/v2\/tags?post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}