{"id":234,"date":"2024-06-04T11:52:02","date_gmt":"2024-06-04T11:52:02","guid":{"rendered":"https:\/\/andrearethy.com\/blog\/?p=234"},"modified":"2024-06-04T11:52:05","modified_gmt":"2024-06-04T11:52:05","slug":"how-to-design-and-build-a-portfolio-website-with-figma-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/andrearethy.com\/blog\/how-to-design-and-build-a-portfolio-website-with-figma-html-css-and-javascript\/","title":{"rendered":"How to Design and Build a Portfolio Website with Figma, HTML, CSS, and JavaScript"},"content":{"rendered":"\n<p>Creating a portfolio website is an essential step for designers, developers, and other professionals to showcase their skills and projects. A well-designed portfolio can leave a lasting impression and open doors to new opportunities. In this comprehensive guide, we will walk you through the process of designing and building a portfolio website using Figma, HTML, CSS, and JavaScript. We will cover everything from the initial design concept to deploying your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Table of Contents<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#blog-introduction\">Introduction<\/a><\/li>\n\n\n\n<li><a href=\"#planning\" title=\"\">Planning Your Portfolio Website<\/a><\/li>\n\n\n\n<li><a href=\"#design\" title=\"\">Designing with Figma<\/a><\/li>\n\n\n\n<li><a href=\"#build\" title=\"\">Building the Website with HTML, CSS, and JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"#responsive\" title=\"\">Making Your Website Responsive<\/a><\/li>\n\n\n\n<li><a href=\"#testing\" title=\"\">Testing and Debugging<\/a><\/li>\n\n\n\n<li><a href=\"#deploy\" title=\"\">Deploying Your Website<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\" title=\"\">Conclusion<\/a><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blog-introduction\">1. Introduction<\/h2>\n\n\n\n<p>A portfolio website is more than just a collection of work samples; it is a representation of who you are as a professional. It needs to be visually appealing, easy to navigate, and informative. By using Figma for design and HTML, CSS, and JavaScript for development, you can create a custom portfolio that stands out.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"planning\">2. Planning Your Portfolio Website<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Define Your Goals<\/h3>\n\n\n\n<p>Before diving into design and development, it\u2019s crucial to define what you want to achieve with your portfolio website. Ask yourself:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is the purpose of my portfolio?<\/li>\n\n\n\n<li>What type of projects do I want to showcase?<\/li>\n\n\n\n<li>Do I want to attract potential employers or clients?<\/li>\n\n\n\n<li>What actions do I want visitors to take (e.g., contact me, view my resume, follow my blog)?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Identify Your Target Audience<\/h3>\n\n\n\n<p>Knowing your audience will help tailor the content and design of your website. Consider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Who are the primary users of your website (e.g., recruiters, clients, peers)?<\/li>\n\n\n\n<li>What are their needs and preferences?<\/li>\n\n\n\n<li>How can your portfolio address these needs?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Content Strategy<\/h3>\n\n\n\n<p>Plan the content you want to include in your portfolio. Common sections include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>About Me<\/li>\n\n\n\n<li>Projects<\/li>\n\n\n\n<li>Skills<\/li>\n\n\n\n<li>Blog<\/li>\n\n\n\n<li>Contact Information<\/li>\n\n\n\n<li>Resume<\/li>\n<\/ul>\n\n\n\n<p>Gather all necessary information, including descriptions, images, links, and any other relevant content. When writing the content make sure to <a href=\"https:\/\/andrearethy.com\/blog\/search-engine-optimization-to-get-more-visibility\/\" target=\"_blank\" rel=\"noopener\" title=\"\">optimize for search engines<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"design\">3. Designing with Figma<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">Figma<\/a> is a powerful design tool that allows you to create detailed designs and prototypes. Follow these steps to design your portfolio website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Up Your Figma Project<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a New Project<\/strong>: Open Figma and create a new project. Name it appropriately (e.g., &#8220;Portfolio Website&#8221;).<\/li>\n\n\n\n<li><strong>Create Frames<\/strong>: Frames act as your canvas. Create frames for different pages of your website (e.g., Home, About, Projects, Contact).<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Wireframes<\/h3>\n\n\n\n<p>Wireframes are simple, low-fidelity sketches of your website layout. They help you plan the structure and hierarchy of your content.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Layout<\/strong>: Sketch the basic layout of each page. Focus on the arrangement of key elements like headers, navigation, content sections, and footers.<\/li>\n\n\n\n<li><strong>Hierarchy<\/strong>: Ensure a clear visual hierarchy. Important elements should stand out, guiding the user\u2019s attention.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Designing the User Interface<\/h3>\n\n\n\n<p>Once your wireframes are ready, it\u2019s time to design the user interface (UI).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Choose a Color Scheme<\/strong>: Select a color palette that reflects your personal brand. Use tools like Adobe Color or Coolors to find complementary colors.<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Choose fonts that are readable and align with your style. Use Google Fonts for free, web-friendly options.<\/li>\n\n\n\n<li><strong>Images and Icons<\/strong>: Use high-quality images and icons. Websites like Unsplash and Font Awesome provide free resources.<\/li>\n\n\n\n<li><strong>Components<\/strong>: Design reusable components (e.g., buttons, forms, cards) to maintain consistency.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Prototyping<\/h3>\n\n\n\n<p>Prototyping allows you to create interactive mockups of your design.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Link Frames<\/strong>: Use Figma\u2019s prototyping tools to link frames and create interactive elements like buttons and navigation links.<\/li>\n\n\n\n<li><strong>Test the Flow<\/strong>: Test your prototype to ensure a smooth user experience. Make adjustments as needed.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"UI Web Design Tutorial | Personal Portfolio | Figma Design\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/QCVrP15zrlI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build\">4. Building the Website with HTML, CSS, and JavaScript<\/h2>\n\n\n\n<p>With your design ready, it\u2019s time to turn it into a functional website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Up Your Project<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a Project Folder<\/strong>: Organize your files into folders (e.g., <code>index.html<\/code>, <code>styles.css<\/code>, <code>script.js<\/code>, and folders for images and fonts).<\/li>\n\n\n\n<li><strong>Set Up Version Control<\/strong>: Use Git for version control. Initialize a Git repository in your project folder.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Structuring with HTML<\/h3>\n\n\n\n<p>HTML provides the structure of your website. Here\u2019s a basic outline:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Portfolio&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;nav&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#projects&quot;&gt;Projects&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n    &lt;main&gt;\n        &lt;section id=&quot;home&quot;&gt;\n            &lt;!-- Home content --&gt;\n        &lt;\/section&gt;\n        &lt;section id=&quot;about&quot;&gt;\n            &lt;!-- About content --&gt;\n        &lt;\/section&gt;\n        &lt;section id=&quot;projects&quot;&gt;\n            &lt;!-- Projects content --&gt;\n        &lt;\/section&gt;\n        &lt;section id=&quot;contact&quot;&gt;\n            &lt;!-- Contact content --&gt;\n        &lt;\/section&gt;\n    &lt;\/main&gt;\n    &lt;footer&gt;\n        &lt;!-- Footer content --&gt;\n    &lt;\/footer&gt;\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ABB2BF\">&lt;!<\/span><span style=\"color: #E06C75\">DOCTYPE<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">html<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">html<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">lang<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;en&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">head<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">meta<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">charset<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;UTF-8&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">meta<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">name<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;viewport&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">content<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">title<\/span><span style=\"color: #ABB2BF\">&gt;Portfolio&lt;\/<\/span><span style=\"color: #E06C75\">title<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">link<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">rel<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;stylesheet&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">href<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;styles.css&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">head<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">body<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">header<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">                &lt;<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">href<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;#home&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Home&lt;\/<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">                &lt;<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">href<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;#about&quot;<\/span><span style=\"color: #ABB2BF\">&gt;About&lt;\/<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">                &lt;<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">href<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;#projects&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Projects&lt;\/<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">                &lt;<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">href<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;#contact&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Contact&lt;\/<\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;\/<\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">header<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">main<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">id<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;home&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            <\/span><span style=\"color: #7F848E; font-style: italic\">&lt;!-- Home content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">id<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;about&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            <\/span><span style=\"color: #7F848E; font-style: italic\">&lt;!-- About content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">id<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;projects&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            <\/span><span style=\"color: #7F848E; font-style: italic\">&lt;!-- Projects content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">id<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;contact&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            <\/span><span style=\"color: #7F848E; font-style: italic\">&lt;!-- Contact content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">main<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">footer<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #7F848E; font-style: italic\">&lt;!-- Footer content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">footer<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">src<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;script.js&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">script<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">body<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">html<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Styling with CSS<\/h3>\n\n\n\n<p>CSS is used to style your website. Here\u2019s how to start:<\/p>\n\n\n\n<p>1. <strong>Reset Styles<\/strong>: Use a CSS reset to ensure consistency across browsers. Add the following at the top of <code>styles.css<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E06C75\">*<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    margin: <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    padding: <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    box-sizing: <\/span><span style=\"color: #D19A66\">border-box<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>2. <strong>Base Styles<\/strong>: Define base styles for common elements:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"body {\n    font-family: 'Open Sans', sans-serif;\n    line-height: 1.6;\n    scroll-behavior: smooth;\n}\n\nheader {\n    background: #333;\n    color: #fff;\n    padding: 1rem 0;\n}\n\nnav ul {\n    list-style: none;\n    display: flex;\n    justify-content: center;\n}\n\nnav ul li {\n    margin: 0 1rem;\n}\n\nnav ul li a {\n    color: #fff;\n    text-decoration: none;\n}\n\nmain {\n    padding: 2rem;\n}\n\nsection {\n    margin-bottom: 2rem;\n}\n\nfooter {\n    background: #333;\n    color: #fff;\n    text-align: center;\n    padding: 1rem 0;\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E06C75\">body<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    font-family: <\/span><span style=\"color: #98C379\">&#39;Open Sans&#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #D19A66\">sans-serif<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    line-height: <\/span><span style=\"color: #D19A66\">1.6<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    scroll-behavior: <\/span><span style=\"color: #D19A66\">smooth<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">header<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    background: <\/span><span style=\"color: #D19A66\">#333<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    color: <\/span><span style=\"color: #D19A66\">#fff<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    padding: <\/span><span style=\"color: #D19A66\">1<\/span><span style=\"color: #E06C75\">rem<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    list-style: <\/span><span style=\"color: #D19A66\">none<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    display: <\/span><span style=\"color: #D19A66\">flex<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    justify-content: <\/span><span style=\"color: #D19A66\">center<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    margin: <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">1<\/span><span style=\"color: #E06C75\">rem<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">li<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    color: <\/span><span style=\"color: #D19A66\">#fff<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    text-decoration: <\/span><span style=\"color: #D19A66\">none<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">main<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    padding: <\/span><span style=\"color: #D19A66\">2<\/span><span style=\"color: #E06C75\">rem<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">section<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    margin-bottom: <\/span><span style=\"color: #D19A66\">2<\/span><span style=\"color: #E06C75\">rem<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #E06C75\">footer<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    background: <\/span><span style=\"color: #D19A66\">#333<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    color: <\/span><span style=\"color: #D19A66\">#fff<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    text-align: <\/span><span style=\"color: #D19A66\">center<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    padding: <\/span><span style=\"color: #D19A66\">1<\/span><span style=\"color: #E06C75\">rem<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>3. Responsive Design<\/strong>: Use media queries to ensure your website looks good on all devices:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@media (max-width: 768px) {\n    nav ul {\n        flex-direction: column;\n    }\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">@media<\/span><span style=\"color: #ABB2BF\"> (max-width: <\/span><span style=\"color: #D19A66\">768<\/span><span style=\"color: #E06C75\">px<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E06C75\">nav<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">ul<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        flex-direction: <\/span><span style=\"color: #D19A66\">column<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Interactivity with JavaScript<\/h3>\n\n\n\n<p>JavaScript adds interactivity to your website. Here are some basic examples:<\/p>\n\n\n\n<p><strong>Form Validation<\/strong>: Add basic form validation:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"document.querySelector('form').addEventListener('submit', function (e) {\n    const name = document.querySelector('#name').value;\n    const email = document.querySelector('#email').value;\n    const message = document.querySelector('#message').value;\n\n    if (!name || !email || !message) {\n        e.preventDefault();\n        alert('All fields are required!');\n    }\n});\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E5C07B\">document<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">querySelector<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;form&#39;<\/span><span style=\"color: #ABB2BF\">).<\/span><span style=\"color: #61AFEF\">addEventListener<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;submit&#39;<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> (<\/span><span style=\"color: #E06C75; font-style: italic\">e<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">name<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">document<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">querySelector<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;#name&#39;<\/span><span style=\"color: #ABB2BF\">).<\/span><span style=\"color: #E06C75\">value<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">email<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">document<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">querySelector<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;#email&#39;<\/span><span style=\"color: #ABB2BF\">).<\/span><span style=\"color: #E06C75\">value<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">message<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">document<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">querySelector<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;#message&#39;<\/span><span style=\"color: #ABB2BF\">).<\/span><span style=\"color: #E06C75\">value<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">if<\/span><span style=\"color: #ABB2BF\"> (<\/span><span style=\"color: #56B6C2\">!<\/span><span style=\"color: #E06C75\">name<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">||<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">!<\/span><span style=\"color: #E06C75\">email<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">||<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">!<\/span><span style=\"color: #E06C75\">message<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #E5C07B\">e<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">preventDefault<\/span><span style=\"color: #ABB2BF\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><span style=\"color: #61AFEF\">alert<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #98C379\">&#39;All fields are required!&#39;<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"responsive\">5. Making Your Website Responsive<\/h2>\n\n\n\n<p>Ensuring your website is responsive means it will look good on any device. Here are some tips:<\/p>\n\n\n\n<p><strong>1. Fluid Layouts<\/strong>: Use percentages instead of fixed widths:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\".container {\n    width: 90%;\n    margin: auto;\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D19A66\">.container<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    width: <\/span><span style=\"color: #D19A66\">90<\/span><span style=\"color: #E06C75\">%<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    margin: <\/span><span style=\"color: #D19A66\">auto<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>2. Flexible Images<\/strong>: Make images responsive:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #E06C75\">img<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    width: <\/span><span style=\"color: #D19A66\">100<\/span><span style=\"color: #E06C75\">%<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    height: <\/span><span style=\"color: #D19A66\">100<\/span><span style=\"color: #E06C75\">%<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    object-fit: <\/span><span style=\"color: #D19A66\">contain<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>3. Media Queries<\/strong>: Adjust styles based on screen size:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@media (max-width: 768px) {\n    .container {\n        width: 100%;\n    }\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">@media<\/span><span style=\"color: #ABB2BF\"> (max-width: <\/span><span style=\"color: #D19A66\">768<\/span><span style=\"color: #E06C75\">px<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">.container<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        width: <\/span><span style=\"color: #D19A66\">100<\/span><span style=\"color: #E06C75\">%<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"testing\">6. Testing and Debugging<\/h2>\n\n\n\n<p>Before deploying your website, thoroughly test it to ensure everything works as expected.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Cross-Browser Testing<\/strong>: Test your website on different browsers (e.g., Chrome, Firefox, Safari).<\/li>\n\n\n\n<li><strong>Device Testing<\/strong>: Use tools like BrowserStack or physical devices to test on various screen sizes.<\/li>\n\n\n\n<li><strong>Performance Testing<\/strong>: Use tools like Google Lighthouse to assess and improve performance.<\/li>\n\n\n\n<li><strong>Accessibility Testing<\/strong>: Ensure your website is accessible to all users, including those with disabilities. Use tools like Axe to identify and fix accessibility issues.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deploy\">7. Deploying Your Website<\/h2>\n\n\n\n<p>Once your website is complete and tested, it\u2019s time to deploy it so it\u2019s accessible to the public.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Choose a Hosting Provider<\/strong>: Select a hosting provider (e.g., Netlify, GitHub Pages, Vercel).<\/li>\n\n\n\n<li><strong>Upload Files<\/strong>: Upload your project files to the hosting provider.<\/li>\n\n\n\n<li><strong>Configure Domain<\/strong>: If you have a custom domain, configure it with your hosting provider.<\/li>\n\n\n\n<li><strong>Set Up Continuous Deployment<\/strong>: Link your repository to your hosting provider for automatic updates when you push changes.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Deploying with GitHub Pages<\/h3>\n\n\n\n<p>Here\u2019s a quick guide to deploying with GitHub Pages:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Push Your Code to GitHub<\/strong>: Ensure your project is in a GitHub repository.<\/li>\n\n\n\n<li><strong>Enable GitHub Pages<\/strong>: Go to the repository settings, scroll to the GitHub Pages section, and select the branch you want to deploy from.<\/li>\n\n\n\n<li><strong>Access Your Site<\/strong>: Your site will be available at <code>https:\/\/yourusername.github.io\/repositoryname<\/code>.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">8. Conclusion<\/h2>\n\n\n\n<p>Designing and building a portfolio website is a rewarding project that showcases your skills and creativity. By following this guide, you can create a professional and responsive portfolio using Figma, HTML, CSS, and JavaScript. Remember to keep your portfolio updated with your latest work and continuously improve it based on feedback and new technologies.<\/p>\n\n\n\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a well-designed portfolio is an essential step for designers, developers, and other professionals to showcase their skills and projects. <\/p>\n","protected":false},"author":1,"featured_media":262,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_siteseo_robots_primary_cat":"none","footnotes":""},"categories":[40],"tags":[42,29,28,41,22],"class_list":["post-234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","tag-build-a-website","tag-freelance-webdevelopment","tag-guide","tag-portfolio-website","tag-webdevelopment"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":12,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions\/266"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/media\/262"}],"wp:attachment":[{"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andrearethy.com\/blog\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}