Portfolio

<div style="padding-bottom:0.5em;" markdown='1'>

#### Ian is experienced with UI / UX, responsive, and mobile-first design practices as well as cross-browser testing.

<div style="padding-top:0.6em; padding-bottom:1.5em;" markdown='1'>
Ian has a background in art and design &mdash; including digital and graphic design, and photography, and videography. He also has more than five years of experience producing materials for print and online promotional purposes. Specific areas of focus in his studies have included abstract expressionist oil painting, experimental projection, and animation.
</div>

</div>



### Skills

<hr />

#### Languages

<div class="two-col" markdown='1'>

+ HTML5
+ CSS3
<ul>
  <li>SASS / SCSS / LESS</li>
</ul>
+ JavaScript
  <ul>
    <li>Ajax techniques</li>
    <li>ReactJS, AngularJS, jQuery libraries</li>
  </ul>
+ PHP7
+ SQL
+ Ruby
+ <a href="https://processing.org/" target="_blank">Processing</a> (flexible software sketchbook)

</div>

<hr />

#### Tools & Practices

<div class="two-col" markdown='1'>

+ Git / version control
+ Website management
<ul>
  <li>WordPress CMS</li>
  <li>Squarespace CMS</li>
  <li>cPanel</li>
</ul>
+ Mass emailing best practices
+ UI / UX design
<ul>
  <li>Figma</li>
</ul>
+ Wireframing tools
<ul>
  <li>Axure RP</li>
</ul>
+ Website mockup creation
+ Code Editors
<ul>
  <li>Visual Studio Code</li>
  <li>Webstorm</li>
  <li>Sublime Text</li>
</ul>
</div>

<hr />

#### Design

<div class="two-col" markdown='1'>

+ Photo and video editing
+ Adobe
<ul>
  <li>Illustrator</li>
  <li>InDesign</li>
  <li>Photoshop</li>
  <li>After Effects</li>
  <li>XD</li>
  <li>Dreamweaver</li>
  <li>Substance 3D</li>
</ul>
+ Clip Studio Paint
+ Avid
<ul>
  <li>Pro Tools</li>
  <li>Media Composer</li>
</ul>
+ Autodesk
<ul>
  <li>Maya</li>
  <li>Mudbox</li>
  <li>3ds Max</li>
</ul>
+ Rhino
+ Microsoft Office

</div>

<div style="padding-top:4em;" markdown='1'>

### Experience

<hr />

Ian currently works at <a href="https://www.rosemontmedia.com/" target="_blank">Rosemont Media</a> and has previously worked for the <a href="https://www.ljathenaeum.org/" target="_blank">Athenaeum Music & Arts Library</a> and <a href="https://www.facebook.com/Rollingifts/" target="_blank">Rolling Design</a>. He also has experience working in both creative nonprofit and web development fields as an independent contractor.

Ian has volunteered for the ACLU, the Veterans Village of San Diego, the San Diego County Young Democrats, and the San Diego International Film Festival, the North Coastal Art Gallery in a variety of creative and marketing roles.

</div>

<div style="padding-top:2em;" markdown='1'>

### Education

<hr />

##### San Diego Mesa College
Associate of Science, *Web Development*, 2023 <br/>
Certificate of Achievement, *Web Design*, 2021

##### Penny W. Stamps School Of Art & Design, University of Michigan
Bachelor of Arts, *Art & Design*, 2017



##### University of Michigan
Bachelor of Arts, *Screen Arts & Cultures*, 2017





</div>

<div style="padding-top:2em;" markdown='1'>

### Exhibitions

<hr />

**2016** <br/>
TEDxUofM Chroma Gallery, Ann Arbor, MI

**2015** <br/>
2.99e8 Gallery at Palmer Commons, University of Michigan, Ann Arbor, MI

</div>

<div style="padding-top:2em;" markdown='1'>

### Awards

<hr />

**2016** <br/>
Residential College Study Abroad Scholarship

**2016** <br/>
Anderson Ranch Arts Center Student Scholarship

**2015** <br/>
Guy Palazzola Award for portfolio

</div>

Ian is a San Diego-based web developer and artist. He has been designing and creating websites since 2016.

About Me

Blog

To get in touch, please fill out the form below.

name

email

subject

message

consent

Contact


Sorry - we couldn't find this page. But don't worry, you can find <a href="/portfolio/">plenty of other things on our website!</a>

<iframe src="https://openprocessing.org/sketch/642529/embed/?plusEmbedHash=MjYyNzAwZDZjNmI2MTcwM2Y3ZmIxMDFlMGMzZGZiZjI4YTk2YjYzZjgwYmRlMGQxMmRlMjEyODY3MjBkZWE4YjZjMzRkOGM4ODM3NzdiNzljZTZiYjFjOWQ5MTJjMzI3NDllMDM5NDU5YjNhOTNkNTEzMDQ5NGVlMGZmNGRlOWNpeFFjU0Y5eE5vb3dtbWdtZGh3dzVFd0lYVTFDRHVLbGpKWDIydXY1UU4ySFA1eHZiTmp1a1VKZjM3dis3NHloUUlvRWY2Y1hURXZLN3ErWDduM3VlQT09&plusEmbedFullscreen=true" width="80%" height="400" style="margin-bottom: 2em;"></iframe>

<a class="button" href="/">
  Back to Homepage
</a>


Sorry - it seems there is a problem with our servers. If problems persist, please <a href="/contact/">contact Ian Strand.</a>

<iframe src="https://openprocessing.org/sketch/642529/embed/?plusEmbedHash=MjYyNzAwZDZjNmI2MTcwM2Y3ZmIxMDFlMGMzZGZiZjI4YTk2YjYzZjgwYmRlMGQxMmRlMjEyODY3MjBkZWE4YjZjMzRkOGM4ODM3NzdiNzljZTZiYjFjOWQ5MTJjMzI3NDllMDM5NDU5YjNhOTNkNTEzMDQ5NGVlMGZmNGRlOWNpeFFjU0Y5eE5vb3dtbWdtZGh3dzVFd0lYVTFDRHVLbGpKWDIydXY1UU4ySFA1eHZiTmp1a1VKZjM3dis3NHloUUlvRWY2Y1hURXZLN3ErWDduM3VlQT09&plusEmbedFullscreen=true" width="80%" height="400" style="margin-bottom: 2em;"></iframe>

<a class="button" href="/">
  Back to Homepage
</a>

Ian is a multidisciplinary artist and web developer, focused on growth.

Ian Strand

With both a web design and fine arts background, Ian Strand has a wide range of skills and experience that include website mockup design and wireframing, database creation and maintenance, content management system implementation, and various multimedia asset creation for web in adherance with Web Content Accessibility Guidelines.

Recent Projects

Recent Blog Posts

Home


Projects

1. <a href="https://strandian.com/SDCCD/webd173/opencart/" target="_blank">https://strandian.com/SDCCD/webd173/opencart/</a> <br />OpenCart website - project

2. <a href="https://strandian.com/SDCCD/webd167/finalproject/" target="_blank">https://strandian.com/SDCCD/webd167/finalproject/</a> <br />Film Review / Databases - project

3. <a href="https://ianstrand.github.io/webd171-5/" target="_blank">https://ianstrand.github.io/webd171-5/</a> <br />Weather App - project

4. <a href="https://webd171-7.netlify.app/" target="_blank">https://webd171-7.netlify.app/</a> <br />Website with Routing - project

5. <a href="https://strandoutmedia.com/" target="_blank">https://strandoutmedia.com/</a> <br />Portfolio created as User-Centered Content
Updates:
<a href="https://strandoutmedia.com/portfolio/graphic" target="_blank">https://strandoutmedia.com/portfolio/graphic</a> <br />Graphic Design Examples
<a href="https://strandoutmedia.com/portfolio/illustration" target="_blank">https://strandoutmedia.com/portfolio/illustration</a> <br />Digital Illustration

6. <a href="https://northcoastalartgallery.com/" target="_blank">https://northcoastalartgallery.com/</a> <br />Webmaster for Gallery site

7. <a href="https://strandian.com/SDCCD/webd169/final/" target="_blank">https://strandian.com/SDCCD/webd169/final/</a> <br />WordPress site - project

8. <a href="https://strandian.com/SDCCD/webd164/final-project/" target="_blank">https://strandian.com/SDCCD/webd164/final-project/</a> <br />Image Gallery

9. <a href="https://strandian.com/SDCCD/webd152/" target="_blank">https://strandian.com/SDCCD/webd152/</a> <br />CatMatch

10. <a href="https://strandian.com/SDCCD/webd165/finalproject/" target="_blank">https://strandian.com/SDCCD/webd165/finalproject/</a> <br />Blog Layout

--

Blog Posts

<a href="https://codesandbox.io/s/cckut" target="_blank">https://codesandbox.io/s/cckut</a> <br />Code Sandbox Navbar - blog

<a href="https://ianstrand.github.io/webd171-2/" target="_blank">https://ianstrand.github.io/webd171-2/</a> <br />Navbar - blog

<a href="https://ianstrand.github.io/webd171-3/" target="_blank">https://ianstrand.github.io/webd171-3/</a> <br />Navbar with Props - blog

<a href="https://ianstrand.github.io/webd171-4/" target="_blank">https://ianstrand.github.io/webd171-4/</a> <br />Navbar with State - blog

<a href="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" target="_blank">https://strandian.com/SDCCD/webd168/ch07_assignment/index.html</a> <br />Page Layout with Grids - blog

<a href="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" target="_blank">https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html</a> <br />Responsive Web Design / CSS

<a href="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" target="_blank">https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html</a> <br />Whale Shark

<a href="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" target="_blank">https://strandian.com/SDCCD/webd168/ch09_assignment/index.html</a> <br />Styling Data Tables

<a href="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" target="_blank">https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html</a> <br />Styling Web Forms

<a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" target="_blank">https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html</a> <br />JavaScript Syntax

<a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" target="_blank">https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html</a> <br />Calculator

<a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" target="_blank">https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html</a> <br />Events and Functions

<a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" target="_blank">https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html</a> <br />Form Validation using DOM

<a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" target="_blank">https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html</a> <br />Dynamic Validation of a Form

<a href="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" target="_blank">https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html</a> <br />Transitions

<a href="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" target="_blank">https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html</a> <br />SVG

<a href="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" target="_blank">https://strandian.com/SDCCD/webd168/ch12_assignment/index.html</a> <br />Loch Ness website

<a href="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" target="_blank">https://strandian.com/SDCCD/webd166/03/solutions/feedback.php</a> <br />Feedback Form

<a href="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" target="_blank">https://strandian.com/SDCCD/webd166/03/solutions/hello.html</a> <br />Name Entry

<a href="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" target="_blank">https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php</a> <br />Delivery Calculator

<a href="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" target="_blank">https://strandian.com/SDCCD/webd166/05/solutions/posting.php</a> <br />Submit Post

<a href="https://strandian.com/SDCCD/webd166/06/solutions/register.php" target="_blank">https://strandian.com/SDCCD/webd166/06/solutions/register.php</a> <br />Online Registration

<a href="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" target="_blank">https://strandian.com/SDCCD/webd166/07/solutions/soups.php</a> <br />Soups

<a href="https://strandian.com/SDCCD/webd166/08/solutions/index.php" target="_blank">https://strandian.com/SDCCD/webd166/08/solutions/index.php</a> <br />Club Website

<a href="https://strandian.com/SDCCD/webd168/ch01_assignment/01_setting_the_foundations.html" target="_blank">https://strandian.com/SDCCD/webd168/ch01_assignment/01_setting_the_foundations.html</a> <br />Web page - blog

<a href="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" target="_blank">https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html</a> <br />CSS selectors - blog

<a href="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" target="_blank">https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html</a> <br />CSS Box Model - blog

<a href="https://strandian.com/SDCCD/webd168/ch04_assignment/04_web_typography.html" target="_blank">https://strandian.com/SDCCD/webd168/ch04_assignment/04_web_typography.html</a> <br />Web Typography - blog

<a href="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" target="_blank">https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html</a> <br />Box Shadows - blog

<a href="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" target="_blank">https://strandian.com/SDCCD/webd166/09/solutions/customize.php</a> <br />Customize CSS Form

<a href="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" target="_blank">https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php</a> <br />Function Form

<a href="https://strandian.com/SDCCD/webd166/11/solutions/upload_file.php" target="_blank">https://strandian.com/SDCCD/webd166/11/solutions/upload_file.php</a> <br />File Upload

<a href="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" target="_blank">https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php</a> <br />Edit Blog Entry

<a href="https://strandian.com/SDCCD/webd166/13/solutions2/" target="_blank">https://strandian.com/SDCCD/webd166/13/solutions2/</a> <br />Quotes Website

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php</a> <br />Calculator - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html</a> <br />Information Form - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php</a> <br />Formatting - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php</a> <br />Sorting Books - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php</a> <br />Registration Form - blog

<a href="https://openprocessing.org/sketch/642529" target="_blank">https://openprocessing.org/sketch/642529</a> <br />OpenProcessing Sketch - blog

<a href="https://openprocessing.org/sketch/193833" target="_blank">https://openprocessing.org/sketch/193833</a> <br />OpenProcessing Sketch 2 - blog

<a href="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" target="_blank">https://strandian.com/SDCCD/webd165/lesson12/mylayout.html</a> <br />Website Layout - blog

<a href="https://strandian.com/SDCCD/webd165/lesson12/sidebars08.html" target="_blank">https://strandian.com/SDCCD/webd165/lesson12/sidebars08.html</a> <br />Sidebar Images - blog

<a href="https://strandian.com/SDCCD/webd165/lesson11/" target="_blank">https://strandian.com/SDCCD/webd165/lesson11/</a> <br />Calendar - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php</a> <br />Cost Calculator - blog

<a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" target="_blank">https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php</a> <br />Contact Form - blog

<a href="https://strandian.com/SDCCD/portfolio-archive/" target="_blank">https://strandian.com/SDCCD/portfolio-archive/</a> <br />Archived Portfolio using template - blog

<a href="https://drive.google.com/file/d/1LvHIb3xa4KUzMrcejXhnncu2jA7fqWFD/view?usp=sharing" target="_blank">https://drive.google.com/file/d/1LvHIb3xa4KUzMrcejXhnncu2jA7fqWFD/view?usp=sharing</a> <br />YouTube Clone - currently not working; I am trying to fix and deploy an updated version <br /> (Current repository at <a href="https://github.com/ianstrand/webd171-7" target="_blank">https://github.com/ianstrand/webd171-7</a>)


Portfolio Links

### Beginning Artist Portfolio Website
This is an initial portfolio website that I created by modifying a template. For this project, I edited HTML, CSS, and JavaScript files.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/portfolio-archive/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/portfolio-archive/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/portfolio-archive/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/portfolio-archive/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/portfolio-archive/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/portfolio-archive/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/portfolio-archive/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Archived Artist Portfolio Website

### Simple Responsive Website
This is a small website for which I created. It utilizes Bootstrap as well as custom styles.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd165/lesson11/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson11/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson11/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson11/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson11/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson11/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson11/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Bayside Beat Website

### Creating Drop Shadows
This is a page containing examples of the CSS box-shadow property.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch05_assignment/start/05_beautiful_boxes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Box Shadows with CSS

### Using Arrays for Pull-down Menus
This is an HTML form that uses JavaScript to create three pull-down menus containing the month, day, and year.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/calendar.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Calendar with PHP

### Website with User Access
This is a sample website built with HTML, CSS, and PHP that requires the user to register and log in for full access.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/08/solutions/index.php" target="_blank">[Link to Version 1]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/08/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/08/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/08/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/08/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/08/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/08/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>

<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/11/solutions/index.php" target="_blank">[Link to Version 2]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/11/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/11/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/11/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/11/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/11/solutions/index.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/11/solutions/index.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Club Website


### Basic Form
This is a simple HTML form created with PHP.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/28hxu?&layout=EditorPreview&iframeId=1cm7he676f&theme=dark&defaultPath=/&showExplorer=no&openedFiles=/index.php" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Contact Form


### Calculate with a Form
This is a calculator to include tax, built with PHP.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/8mg8p?&layout=EditorPreview&iframeId=yr4nymg6z&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Widget Cost Calculator

### Adding security to a form with functions
This script secures a form using PDO's prepared statements and making sure the script data comes from the same script.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch13/contactcrud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Adding Security to CRUD Operations

### CRUD Methods
This is a script that implements read, update and delete functions to some contact data, including pagination.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch10/crud.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Create, Read, Update, and Delete

### Using Width, Padding, and Border
This project shows how CSS styling of the width / height, padding, and border of elements is used to create their size.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch03_assignment/03_box_model_complete.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

CSS Box Model

### Creating, Accessing, and Deleting Cookies in PHP
This project uses PHP to create HTTP cookies based on form input, and from this data change the style of text on a page.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/09/solutions/customize.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Customizable CSS

### Targeting Specific Elements
This project uses pseudo-classes to style a webpage.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch02_assignment/start/07_nth-child_selector_start.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

CSS Selectors

### Calculating and Returning the Data from a Form
This is a form that uses PHP to handle input data and return a total value for the user.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/04/solutions/pursue_2.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Delivery Calculator

### Using JavaScript to enhance a form
This is a web form that uses dynamic validation for a scalable implementation.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-5.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Dynamic Validation of a Form

### My Blog
This is a sample blogging website that allows the user to edit and delete posts.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/12/solutions/view_entries.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Edit Blog Entry

### Creating an interactive form field
In this project, I created a text-input that displays and limits the number of characters in the comment field.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-3.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Events and Functions with JavaScript

### Handling a form with PHP
This is a form that check the user's data input and generates a feedback page.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/feedback.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Feedback Form with PHP

### Addressing the common Fizz-Buzz Prompt
This is a script that prints the numbers from 1 to 100. Multiples of three print “Fizz” instead of the number and multiples of five print “Buzz”. Numbers which are multiples of both three and five print “FizzBuzz”.
<br/>
<br/>
<h4 align="center"><a href="https://codepen.io/strandian/pen/ZEJoEWo" target="_blank">[Link to live example]</a></h4>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEJoEWo" data-user="strandian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/strandian/pen/ZEJoEWo">
  Calculator with JavaScript</a> by Ian Strand (<a href="https://codepen.io/strandian">@strandian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Fizz Buzz Test

### For Loops with JavaScript
This is a script that uses for loops to print out the numbers 1 through 10 on the first line, the squares of 1 through 10 on the second line (e.g. 1, 4, 9...), the cubes on line three (e.g. 1, 8, 27...), and so on, for ten lines.
<br/>
<br/>
<h4 align="center"><a href="https://codepen.io/strandian/pen/GRvvPOo" target="_blank">[Link to live example]</a></h4>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRvvPOo" data-user="strandian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/strandian/pen/GRvvPOo">
  Calculator with JavaScript</a> by Ian Strand (<a href="https://codepen.io/strandian">@strandian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Using For Loops

### Using JavaScript to validate a form
This is a web form that uses the Document Object Model for validation to enhance user experience.
<br/>
<br/>


<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-4.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Form Validation using the DOM

### Performing a Function with PHP
This project displays and handles an HTML form, using subtraction in order to calculate a total.
<br />
<br />

<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/10/solutions/myfunction.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Function Form


### Simple HTML Form
This is a basic form created with HTML and PHP.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/form.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/mv4hq?&layout=EditorPreview&iframeId=c5q9kidywo&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Information Form


### Using a table and function to create a calculator
This is a simple calculator created with JavaScript.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-2.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with CodePen:
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEXyOEj" data-user="strandian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/strandian/pen/ZEXyOEj">
  Calculator with JavaScript</a> by Ian Strand (<a href="https://codepen.io/strandian">@strandian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Calculator with JavaScript

### Printing a Result with User Input
In this project, I used JavaScript to print a formula based on user input.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd164/lessons/strand_homework-1.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

JavaScript Syntax


### More than One Array
This project formats a list using multidimensional arrays in PHP.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/multi.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/hbobe?&layout=EditorPreview&iframeId=4vexzzto61&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

List Formatting

### Basic Website with CSS
This is a sample website with a couple of different pages, using CSS and a cloud font.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch12_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Loch Ness Website

### Variables with PHP
This is a script that defines, manipulates, and displays the values of some numeric variables.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch01/ch01_assignment/strand_ch01-assignment.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Manipulating Variables with PHP

### Generating a Response by Clicking a Link
This project uses PHP to redirect to a content page when a link is clicked.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/03/solutions/hello.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Name Entry with PHP

### Creating a Form with PHP
This is a sample online registration form that validates and collects data.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/06/solutions/register.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/06/solutions/register.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/06/solutions/register.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/06/solutions/register.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/06/solutions/register.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/06/solutions/register.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/06/solutions/register.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Online Registration


### Interactive Digital Art
This is an <a href="https://openprocessing.org/sketch/642529/" target="_blank">application that I created with Processing,</a> a flexible software sketchbook.
<br />
<br />
<h4 align="center">
<a href="https://openprocessing.org/sketch/642529/" target="_blank">[Live Example]</a>
</h4>
<iframe src="https://openprocessing.org/sketch/642529/embed/?plusEmbedHash=MWZjYzVjOTA4NDc0YmYzZjhiNTZmZjQ4ODNhNjcyODAwMGViMzk0NzkxNDc0MWJkZGIxYzUxNjg2MGRhMWJmZWViYTA0YTMyYTVkMDRjZWE0N2Y2NmU2NTI0NmE4NTBiNGM5OWE5OTgxNmVlMTFiYjMzMzhkZWU0NjliMTBmZjFBbHlyV0xtd3g4eHlHT0x2R0RHZzBSZjRGK3hNRkxHckx0aERKNG5FWVZZbXRxRWZYSUxEbE45MUk0VlRJSXBvNTRzT0hxZFFBMWRQNlltaHpSTkdJQT09&plusEmbedFullscreen=true" width="80%" height="400" style="margin-bottom: 2em;"></iframe>
Move the mouse to control the lantern, and the fireflies will follow it around the screen.
<br />
<br />
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

OpenProcessing Sketch - Fireflies


### Webpage Design and Development
This is an <a href="https://openprocessing.org/sketch/193833/" target="_blank">application that I created with Processing,</a> a flexible software sketchbook. The original image is a work of artist Kazimir Malevich.
<br />
<br />
<h4 align="center">
<a href="https://openprocessing.org/sketch/193833/" target="_blank">[Live Example]</a>
</h4>
<iframe class="openprocessing" src="https://openprocessing.org/sketch/193833/embed/?plusEmbedHash=NzFiMjA5Yzc4ZDlhODk3NTFiOTEzOTM5MTNhMDZmY2E4NTU1NWIwNjFmY2NjNDIwMzYzNmQwZGMxZjJlZTMzYWY1Zjk0YzU0N2VhMDFmODZjZWExZmE1OTQ0M2MzYWVjMGRiZTcyZGZlNGEwNWUxMmVhYmNiNzg2YWIzODZkZmZnTHdYeDYyS2I4aGcreWFRMlZGNnc5bWtrNUMzc05nK3BPdjUxKzZVUTJaZm5WMEhtbTFzT0t3WTZEcEJWbWYrWVZkVDFmMy9BUmhESFUxU0xNTFUydz09&plusEmbedFullscreen=true" width="400" height="400" style="margin-bottom: 2em;"></iframe>

Click and drag with the mouse in order to add to the artwork.

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

OpenProcessing Sketch

### Responsive Layout with Flexbox and CSS Grid
This is a simple responsive page with one breakpoint, created with Flexbox and a grid system.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch07_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Page Layout with Grids

### Storing and Displaying Data with PHP
This is a sample website that organizes and displays famous quotes, to which a user with login information can add.

<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/13/solutions2/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/13/solutions2/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/13/solutions2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/13/solutions2/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/13/solutions2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/13/solutions2/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/13/solutions2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Quotes Website

#### Iteration 1: Navbar in CodeSandbox


<iframe src="https://codesandbox.io/embed/webd171-assignment-1-cckut?fontsize=14&hidenavigation=1&theme=light"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="webd171-assignment-1"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

   <br />

#### Iteration 2: Simple Navbar with ReactJS





<h4 align="center">
<a href="https://ianstrand.github.io/webd171-2/" target="_blank">[GitHub Pages Link]</a>
</h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-2/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-2/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-2/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-2/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div align="center">
  <a href="https://ianstrand.github.io/webd171-2/" target="_blank">https://ianstrand.github.io/webd171-2/</a>
</div>

<br />
<br />

#### Iteration 3: Navbar using Props





<h4 align="center">
<a href="https://ianstrand.github.io/webd171-3/" target="_blank">[GitHub Pages Link]</a>
</h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-3/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-3/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-3/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-3/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-3/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-3/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div align="center">
  <a href="https://ianstrand.github.io/webd171-3/" target="_blank">https://ianstrand.github.io/webd171-3/</a>
</div>

<br />
<br />

#### Iteration 4: Navbar using State



<h4 align="center">
<a href="https://ianstrand.github.io/webd171-4/" target="_blank">[GitHub Pages Link]</a>
</h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-4/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-4/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-4/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-4/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-4/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-4/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div align="center">
  <a href="https://ianstrand.github.io/webd171-4/" target="_blank">https://ianstrand.github.io/webd171-4/</a>
</div>

<br />
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

ReactJS Navbar

### More Forms with PHP
This is a longer form with validation that stores and handles the data that is input by the user.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/registration.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Registration Form

### Responsive CSS
This is a mobile-first webpage project created with CSS Flexbox, grid and media queries.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/ch08_acme.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Responsive Web Design with CSS

### Sending an Email
This is a form that uses the mail() function to send an email.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch11/email.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Email using PHP


### Sorting Arrays with PHP
This is a script to display the values in an array in various orders.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch02/sorting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/339pq?&layout=EditorPreview&iframeId=ncz53kyxi9&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Sorting Books


### Array of Soups
This is a project showing the different functions to display and edit arrays with PHP.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/07/solutions/soups.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with PHPSandbox.<br />
*(Refresh the page within the embedded window if it does not load.)*
<iframe src="https://phpsandbox.io/e/x/6onjt?&layout=EditorPreview&iframeId=d7y7a6csg3&theme=dark&defaultPath=/&showExplorer=no" style="display: block" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" height="500" width="100%"></iframe>
<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

PHP Arrays

### Creating Responsive Tables
This is a project that uses CSS and media queries to style tables with images that resize responsively.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/index.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Styling Data Tables

### Creating a Web Form
This is a project to create and style form fields with HTML and CSS.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch09_assignment/contact/contact.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Styling Web Forms

### Tranferring Form Data
This is a form that uses the post method with PHP in order collect the submission data and display it on another page.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd166/05/solutions/posting.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Post Submission Form

### Styling SVG Images
This is an interactive project where buttons can be selected to change the CSS characteristics of an SVG image.
<br />
<br />
<h4 align="center">
  <a href="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch11_assignment/ch11_assignment.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>

<br />

Edit this project with CodePen:
<p class="codepen" data-height="800" data-default-tab="result" data-slug-hash="yLzvNeG" data-editable="true" data-user="strandian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/strandian/pen/yLzvNeG">
  SVG Essentials</a> by Ian Strand (<a href="https://codepen.io/strandian">@strandian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Scalable Vector Graphics


### Types of Transition
This project demonstrates different CSS transition types.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch10_assignment/start/15-02-transitionTypes.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

Edit this project with CodePen:
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBPJpYN" data-editable="true" data-user="strandian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/strandian/pen/qBPJpYN">
  Untitled</a> by Ian Strand (<a href="https://codepen.io/strandian">@strandian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Transition Types

### Writing Functions with PHP
This is a brief form using PHP to calculate fuel expenses for a trip.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/coursework/lessons/ch03/calculator.php" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Trip Cost Calculator

### Responsive Website with Sidebar
This is a small website for which I created a template with DreamWeaver. It utilizes Bootstrap as well as custom styles.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/lesson12/mylayout.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Website Layout

### Styling Text on a Page
This is a project to establish universal text styles and image wrapping for a website/web page.
<br/>
<br/>
<h4 align="center"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd168/ch08_assignment/whaleShark/whaleShark.html" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Web Typography

### Using an API with React
This is a Youtube clone created for educational purposes under fair use. To make this project, I followed a tutorial series by <a href="https://productioncoder.com/" target="_blank">Productioncoder.com</a>.
<br/>
<br/>
<h4 align="center"><a href="https://ianstrand.github.io/webd171-7/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-7/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-7/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-7/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-7/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-7/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-7/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/blog/">
  Return to Blog
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

YouTube Clone

### Aesthetic Brokers, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://aestheticbrokers.com/" target="_blank">[Link to Live Site - aestheticbrokers.com]</a></h4>




<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Aesthetic Brokers

### Ian Strand's art portfolio website, created with particular attention to web content accessibility guidelines.
This is my current artist portfolio site. I created this site using Bootstrap, but it also includes custom CSS in addition to HTML, PHP, and JavaScript. The goal of this project was to display my work in an accessible way for users.
<br />
<br />
<h4 align="center"><a href="https://strandoutmedia.com/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandoutmedia.com/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandoutmedia.com/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandoutmedia.com/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandoutmedia.com/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandoutmedia.com/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandoutmedia.com/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Artist Portfolio

### Bio Hackr Health, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has since been augmented further.
<br />
<br />
<h4><a href="https://www.biohackr.health/" target="_blank">[Link to Live Site - biohackr.health]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/biohackr-health/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>




<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Bio Hackr Health

### A starter blog created with HTML and CSS.
This is a simple, three-page blog created with flexbox and including a responsive sidebar.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd165/finalproject/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd165/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd165/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

<hr />
To create the blog's design for this project, I created mockups up each of the website pages.

<div align="center">
<br />
<img src="/images/projects/blog-1.jpg" alt="Mockup of Blog Home Page" style="width: 80%">
<br />
<br />

<img src="/images/projects/blog-2.jpg" alt="Mockup of Blog About Page" style="width: 80%">
<br />
<br />

<img src="/images/projects/blog-3.jpg" alt="Mockup of Blog Contact Page" style="width: 80%">
</div>

<br />
<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Sample Flexbox Blog

### Carolina Plastic Surgery & Medical Spa, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.carolinaplasticsurgery.com/" target="_blank">[Link to Live Site - carolinaplasticsurgery.com]</a></h4>




<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Carolina Plastic Surgery & Medical Spa

### A starter responsive website.
This is a basic website created with Flexbox and CSS grid, as a fun tribute to my cat.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd152/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd152/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd152/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd152/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd152/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd152/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd152/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

CatMatch.com - A Fun Website for my Cat

### Charli's Landing, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.charlislanding.com/" target="_blank">[Link to Live Site - charlislanding.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/charlis-landing/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Charli's Landing

A sample film review website created with PHP and MySQL.

### A sample film review website created with PHP and MySQL.
In this project, I created a website of short film reviews with the ability for users to search for different films, print out the reviews, and post comments. It is also possible for an administrator to log in and edit the film reviews.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd167/finalproject/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd167/finalproject/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd167/finalproject/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

<hr />
While building this project, I used an Entity Relationship Diagram to help determine the structure for entity sets stored in the site database.

<div align="center">
<br />
<img src="/images/projects/wireframe.png" alt="Wireframe of Film Review Website" style="width: 80%">
</div>


<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Film Review Website

### Legacy Dental Care, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.dentistblainemn.com/" target="_blank">[Link to Live Site - dentistblainemn.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/legacy-dental-care/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Legacy Dental Care

### Dr. Derek Rapp, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.derekrappmd.com/" target="_blank">[Link to Live Site - derekrappmd.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/derek-rapp-md/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Dr. Derek Rapp

### Exocad Elite, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.exocadelite.com/" target="_blank">[Link to Live Site - exocadelite.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/exocad-elite/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Exocad Elite

### Facial Plastic Surgeons Kansas City, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.facialplasticsurgerykc.com/" target="_blank">[Link to Live Site - facialplasticsurgerykc.com]</a></h4>




<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Facial Plastic Surgeons Kansas City

A slider image gallery created with JavaScript.

### A slider image gallery created with JavaScript.
This is an image gallery that I created, using jQuery library Slick Slider to create an image carousel and FancyBox to create a modal image gallery / lightbox.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd164/final-project/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/final-project/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://strandian.com/SDCCD/webd164/final-project/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/final-project/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://strandian.com/SDCCD/webd164/final-project/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd164/final-project/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://strandian.com/SDCCD/webd164/final-project/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

JavaScript Image Gallery

### Farkas Plastic Surgery & Medical Spa, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.jpfarkasmd.com/" target="_blank">[Link to Live Site - jpfarkasmd.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/farkas-plastic-surgery-medical-spa/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Farkas Plastic Surgery & Medical Spa

The NCAG / Carlsbad Oceanside Art League Website, for which I am volunteer webmaster.

### The NCAG / Carlsbad Oceanside Art League Website.
From 2018 to 2022, I acted as Webmaster for the North Coastal Art Gallery Website, regularly updating and adding to the site and communicating with other members of the Board of Directors. I also served as website Gatekeeper (organizing and preparing content) from November 2017 until the summer of 2018.
<br />
<br />

<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><img src="/images/projects/coalwebsite.png" alt="North Coastal Art Gallery Website"> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><img src="/images/projects/coalwebsite.png" alt="North Coastal Art Gallery Website"> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><img src="/images/projects/coalwebsite.png" alt="North Coastal Art Gallery Website"> </div>
</div>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

North Coastal Art Gallery

### A sample artist website made using a customized OpenCart theme.
This is an online shop that I created with OpenCart, starting from a mockup design. I created a responsive custom theme, which I tested for usability from a variety of browsers and devices.

<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd173/opencart/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd173/opencart/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd173/opencart/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd173/opencart/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd173/opencart/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd173/opencart/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd173/opencart/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<br />

<hr />
I developed the original concept for this project by using wireframing tools, which I then used to create a mockup for the website.

<div align="center">
<br />
<img src="/images/projects/strand-homepagemockup.png" alt="Mockup of OpenCart Artist Shop" style="width: 40%">
</div>


<br />
<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Artist Shop made with OpenCart

### Plastic Surgery of the Carolinas, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.plasticsurgerycarolina.com/" target="_blank">[Link to Live Site - plasticsurgerycarolina.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/plastic-surgery-carolina/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Plastic Surgery of the Carolinas

This is a starter website that uses routing.

### This is a starter website that uses routing.
I created this project using React App (hosted with Netlify). I used routing to build an application with multiple page routes, which can be accessed by clicking on the links in the header, body, or footer.
<br />
<br />
<h4 align="center"><a href="https://webd171-7.netlify.app/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://webd171-7.netlify.app/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://webd171-7.netlify.app/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://webd171-7.netlify.app/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://webd171-7.netlify.app/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://webd171-7.netlify.app/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://webd171-7.netlify.app/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>

<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ReactJS Website with Routing

### Shine Medical Spa, Copyright © 2025 Rosemont Media.
For this project, I collaborated with other agency staff to custom-build the initial website structure based on our existing development framework. This site has continued to be updated by other staff.
<br />
<br />
<h4><a href="https://www.shinemedspasc.com/" target="_blank">[Link to Live Site - shinemedspasc.com]</a></h4>
<h4><a href="https://www.rosemontmedia.com/website/clients/shine-medical-spa/" target="_blank">[Link to Rosemont Media Portfolio]</a></h4>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Shine Medical Spa

### An app to display the current weather in San Diego.
I created this application using an API to fetch data in ReactJS, to show weather data from the time zone where the page is being accessed.
<br />
<br />
<h4 align="center"><a href="https://ianstrand.github.io/webd171-5/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-5/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-5/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-5/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-5/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://ianstrand.github.io/webd171-5/" target="_blank">
    <div class="thumbnail">
      <iframe src="https://ianstrand.github.io/webd171-5/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>

<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

An app to display the current weather in San Diego.

Weather App with ReactJS

A sample WordPress site created with a custom theme.

### A sample WordPress site created with a custom theme.
This is a WordPress blog that built on a local webserver, exported, and imported after setting up a hosting plan. I customized the theme and added shortcodes using a plugin.
<br />
<br />
<h4 align="center"><a href="https://strandian.com/SDCCD/webd169/" target="_blank">[Link to live example]</a></h4>
<div id="hideweb1">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd169/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd169/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb2">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd169/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd169/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>
<div id="hideweb3">
  <div class="thumbnail-container" title="Web Development Portfolio"><a href="https://strandian.com/SDCCD/webd169/" target="_blank">
    <div class="thumbnail">
      <iframe sandbox src="https://strandian.com/SDCCD/webd169/" onload="this.style.opacity = 1"></iframe>
    </div>
    </a> </div>
</div>



<br />
<br />
<a class="button" href="/portfolio/">
  Return to Portfolio
</a>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

WordPress Custom Blog


<div class="post-subtitle" style="margin-bottom: 1.66667rem;">Please review Ian's resume for a full list of his work experience. <a href="/docs/Ian Strand Resume.pdf" download="Ian Strand Resume.pdf" target="_blank">Click to download a PDF version.</a></div>

<a href="/docs/Ian Strand Resume.pdf" download="Ian Strand Resume.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Resume" src="/images/Ian Strand Resume.png">
</a>

Resume


<div class="post-subtitle" style="margin-bottom: 1.66667rem;">The style guide provides a blueprint of default post and page styles. <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">Click to download a PDF version.</a></div>

<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide1.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide2.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide3.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide4.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide5.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide6.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide7.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide8.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide9.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide10.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide11.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide12.jpg">
</a>
</div>
</div>
<div class="row text-center">
  <div class="column">
  <a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide13.jpg">
</a>
  </div>
  <div class="column">
<a href="/docs/Ian Strand Style Guide.pdf" download="Ian Strand Style Guide.pdf" target="_blank">
  <img class="sguide" alt="Ian Strand Style Guide" src="/images/style-guide/Ian Strand Style Guide14.jpg">
</a>
</div>
</div>

Style Guide

**This is a paragraph**. Pellentesque habitant morbi *tristique senectus et netus et malesuada* fames ac turpis egestas. Vestibulum [tortor quam](https://www.google.com), feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit <mark>amet est et sapien ullamcorper</mark> pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

# This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

## This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

### This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

#### This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

## Quoting

>Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. <cite>Scott Adams</cite>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

<hr />

## Unordered Lists

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

## Ordered Lists

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

```

body {
  color: #333;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

## Video Embeds

<iframe width="640" height="360" src="https://www.youtube.com/embed/wEG7x7jRhNQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Tables

<div class="responsive-table">
  <table>
    <caption>Simple table with caption and header</caption>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </tbody>
  </table>
</div>

The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.


Thank you so much for contacting me! I will be in touch with you soon.

<iframe src="https://openprocessing.org/sketch/642529/embed/?plusEmbedHash=MjYyNzAwZDZjNmI2MTcwM2Y3ZmIxMDFlMGMzZGZiZjI4YTk2YjYzZjgwYmRlMGQxMmRlMjEyODY3MjBkZWE4YjZjMzRkOGM4ODM3NzdiNzljZTZiYjFjOWQ5MTJjMzI3NDllMDM5NDU5YjNhOTNkNTEzMDQ5NGVlMGZmNGRlOWNpeFFjU0Y5eE5vb3dtbWdtZGh3dzVFd0lYVTFDRHVLbGpKWDIydXY1UU4ySFA1eHZiTmp1a1VKZjM3dis3NHloUUlvRWY2Y1hURXZLN3ErWDduM3VlQT09&plusEmbedFullscreen=true" width="80%" height="400" style="margin-bottom: 2em;"></iframe>

<a class="button" href="/">
  Back to Homepage
</a>