WEBVTT 1 00:00:00.000 --> 00:00:07.160 [MUSIC] 2 00:00:07.160 --> 00:00:12.090 Next up, I am delighted to introduce Stedman Halliday. 3 00:00:12.090 --> 00:00:16.741 Stedman Halliday is a multi disciplinary designer from Los Angeles, California. 4 00:00:16.741 --> 00:00:20.205 His work focuses on digital products, brands and 5 00:00:20.205 --> 00:00:25.414 media with an emphasis on design technology, advocacy, and education. 6 00:00:25.414 --> 00:00:30.788 Currently, he manages Designers Guild, a community of about 20,000 designers 7 00:00:30.788 --> 00:00:36.700 in 100 countries, committed to sharing knowledge and resources for mutual growth. 8 00:00:36.700 --> 00:00:40.101 Everyone, please welcome Stedman Halliday. 9 00:00:40.101 --> 00:00:45.044 >> Hi everyone, thank you so much for attending my talk. 10 00:00:45.044 --> 00:00:50.012 Let's see I'm gonna go ahead and get our presentation up. 11 00:00:52.276 --> 00:00:53.296 There we go. 12 00:00:53.296 --> 00:00:55.301 So I'm hoping everybody can see that. 13 00:01:00.330 --> 00:01:02.561 There we go, great. 14 00:01:02.561 --> 00:01:07.401 So today I'm gonna be talking about building an entry level portfolio. 15 00:01:07.401 --> 00:01:13.731 I actually taught a class on this this spring to a bunch of novice developers. 16 00:01:13.731 --> 00:01:18.018 So I'm gonna talk a little bit about stack and code today but 17 00:01:18.018 --> 00:01:21.446 also give a lot of tips for the general design and 18 00:01:21.446 --> 00:01:26.951 strategy behind how you make the decisions while building your portfolio. 19 00:01:26.951 --> 00:01:32.285 So without further ado, let's get into it. 20 00:01:32.285 --> 00:01:34.442 I'll just introduce myself a little bit first. 21 00:01:34.442 --> 00:01:38.194 I'm a designer, developer and educator from Los Angeles. 22 00:01:38.194 --> 00:01:42.294 And like Gil said, I focus on digital products, brands and media. 23 00:01:42.294 --> 00:01:46.392 And I'm really interested in technology, advocacy and education. 24 00:01:49.881 --> 00:01:54.006 Let's go and get started. 25 00:01:54.006 --> 00:01:59.454 So first I wanna talk about Jekyll, which is a static site generator 26 00:01:59.454 --> 00:02:04.727 that I really recommend for building your first portfolio site. 27 00:02:04.727 --> 00:02:10.811 A static site generator is going to build you a site that is really simple. 28 00:02:10.811 --> 00:02:14.650 So the advantage of that is that what goes on the server is what's gonna 29 00:02:14.650 --> 00:02:16.745 show up on the client and the browser. 30 00:02:16.745 --> 00:02:20.564 You're not gonna have to deal with any databases or API's and 31 00:02:20.564 --> 00:02:24.907 you're gonna have a pretty transparent architecture for your site. 32 00:02:24.907 --> 00:02:29.089 So that's a huge advantage when it comes to maintaining it, 33 00:02:29.089 --> 00:02:33.440 not dealing with plugin upgrades to like It's also flexible. 34 00:02:33.440 --> 00:02:38.102 Your static site generators are gonna preserve that transparent architecture, 35 00:02:38.102 --> 00:02:42.964 but they're also gonna add some simple and powerful features that really make things 36 00:02:42.964 --> 00:02:46.361 easier for you and increase the flexibility of your built. 37 00:02:46.361 --> 00:02:50.530 Static sites are also very fast, so they're pretty speedy compared to 38 00:02:50.530 --> 00:02:55.681 dynamically generated websites because you're not querying databases or anything. 39 00:02:55.681 --> 00:03:00.682 And so that's also really good for SEO rankings, fast sites rank better. 40 00:03:00.682 --> 00:03:04.343 And best of all, it's really easy to host static sites for free. 41 00:03:04.343 --> 00:03:08.743 I do really recommend GitHub Pages for free hosting and they actually support 42 00:03:08.743 --> 00:03:12.341 ductile so you can build your site right from your repository. 43 00:03:14.930 --> 00:03:17.207 So a little bit about Jekyll now. 44 00:03:17.207 --> 00:03:22.093 Jekyll works by taking text that's written in your favorite markup language, and 45 00:03:22.093 --> 00:03:24.687 it uses layouts to create a static website. 46 00:03:24.687 --> 00:03:29.209 So you're gonna deal with your regular front end web languages, HTML, CSS, 47 00:03:29.209 --> 00:03:33.045 JavaScript, and that's gonna help you tweak the look and feel and 48 00:03:33.045 --> 00:03:34.432 function of your site. 49 00:03:34.432 --> 00:03:38.637 But you also have a little flexibility in that you could write markdown that 50 00:03:38.637 --> 00:03:39.712 compiles to HTML. 51 00:03:39.712 --> 00:03:44.714 So you can write pages just like you write your GitHub READMEs, but 52 00:03:44.714 --> 00:03:49.539 then using the layouts, it's gonna basically take the content 53 00:03:49.539 --> 00:03:54.380 of those pages and scaffold them into fully realized web pages. 54 00:03:54.380 --> 00:03:58.271 Another interesting thing about Jekyll is that it's gonna use YAML. 55 00:03:58.271 --> 00:04:02.896 So you'll use YAML for data in your configuration and 56 00:04:02.896 --> 00:04:05.581 what's called frontmatter. 57 00:04:05.581 --> 00:04:09.098 That's gonna help you control your URLs and permalinks, 58 00:04:09.098 --> 00:04:13.202 it's gonna help you change the data displayed on the page and more. 59 00:04:13.202 --> 00:04:16.022 And so the layouts and the templating language, 60 00:04:16.022 --> 00:04:18.924 the templating language is liquid from Shopify. 61 00:04:18.924 --> 00:04:22.691 Together with the data, that's gonna give you the recipe for 62 00:04:22.691 --> 00:04:27.051 baking all of these raw ingredients into a new unfinished static site. 63 00:04:27.051 --> 00:04:29.602 So all of those things go into Jekyll, 64 00:04:29.602 --> 00:04:34.330 there's a build generation process usually run on the command line. 65 00:04:34.330 --> 00:04:38.347 And now that you've got a production website that's ready to be deployed to 66 00:04:38.347 --> 00:04:41.752 a server, or GitHub pages, or any other free hosting servers. 67 00:04:44.552 --> 00:04:47.570 So I'll talk a little bit about the YAML. 68 00:04:47.570 --> 00:04:51.321 This is an example of part of a config file. 69 00:04:51.321 --> 00:04:56.111 So Jekyll gives you a lot of flexibility to customize how it builds your site. 70 00:04:56.111 --> 00:05:00.120 The config file is a YAML file where you can use key value pairs like this, 71 00:05:00.120 --> 00:05:03.277 to be able to specify global settings and the defaults for 72 00:05:03.277 --> 00:05:06.435 things like your site name, your permalink structure, 73 00:05:06.435 --> 00:05:09.629 where the production site is generated, and even more. 74 00:05:09.629 --> 00:05:12.920 You can also add arbitrary data here to use throughout the site if you'd like. 75 00:05:12.920 --> 00:05:16.786 So, for example, if you gonna reuse your email address over and over or 76 00:05:16.786 --> 00:05:18.082 social media handles. 77 00:05:18.082 --> 00:05:22.910 You can define those here and use them as sitewide variables on whichever pages or 78 00:05:22.910 --> 00:05:24.261 layouts you'd like. 79 00:05:24.261 --> 00:05:28.088 So installing Jekyll and setting your site up with the config file are also really 80 00:05:28.088 --> 00:05:31.476 good ways to introduce yourself to working with the command line more. 81 00:05:31.476 --> 00:05:34.214 And using build tools for the web before becoming bigger and 82 00:05:34.214 --> 00:05:37.180 bigger part of your process as you build more complex projects. 83 00:05:40.252 --> 00:05:44.741 This is the other part of where YAML is usually included in Jekyll which is called 84 00:05:44.741 --> 00:05:45.621 frontmatter. 85 00:05:45.621 --> 00:05:50.692 Jekyll frontmatter is a block of VMO that is placed at the beginning of other files, 86 00:05:50.692 --> 00:05:53.741 and those files are treated specially by Jekyll. 87 00:05:53.741 --> 00:05:59.121 So some default behaviors can be set here like layout and title. 88 00:05:59.121 --> 00:06:02.145 But then you can also place arbitrary data here that's relevant to 89 00:06:02.145 --> 00:06:03.320 the specific setting. 90 00:06:03.320 --> 00:06:08.832 So maybe you wanna define a food for the page that's in the second image here. 91 00:06:08.832 --> 00:06:11.672 And you can access the value of that variable 92 00:06:11.672 --> 00:06:15.448 to display data on pages with what are called liquid cuts. 93 00:06:15.448 --> 00:06:20.617 So you can see those pairs of curly braces invoking the food variable for 94 00:06:20.617 --> 00:06:25.631 the page, and that's gonna display pizza in that level 1 heading. 95 00:06:25.631 --> 00:06:29.288 So this really makes content management easier by abstracting 96 00:06:29.288 --> 00:06:33.294 your data all the way to the top of the page in that front matter block. 97 00:06:33.294 --> 00:06:36.074 And it makes it easy to reuse data in different contexts. 98 00:06:36.074 --> 00:06:38.637 So that's part of the flexibility we were talking about with static site 99 00:06:38.637 --> 00:06:39.442 generation earlier. 100 00:06:42.562 --> 00:06:44.040 Here's another example. 101 00:06:44.040 --> 00:06:49.024 And this is also an example of an additional item that Jekyll 102 00:06:49.024 --> 00:06:52.320 gives you to create flexible layouts. 103 00:06:52.320 --> 00:06:55.492 So here's an example of for loops. 104 00:06:55.492 --> 00:06:59.192 And this is showing a navigation example. 105 00:06:59.192 --> 00:07:05.691 So up top we have multiple navigation items, each with a title and a URL. 106 00:07:05.691 --> 00:07:09.270 And on the bottom, we have a forloop. 107 00:07:09.270 --> 00:07:13.986 So it's saying for each link in the navigation data for the site, 108 00:07:13.986 --> 00:07:18.960 it's going to print out this list item with an anchor element that has 109 00:07:18.960 --> 00:07:22.818 its href attribute set to the URL value for the link and 110 00:07:22.818 --> 00:07:26.713 it's in our text set to the title value for that link. 111 00:07:26.713 --> 00:07:30.580 It's going to use the different values up top each time. 112 00:07:30.580 --> 00:07:33.521 Each item is gonna be delineated by that hyphen. 113 00:07:33.521 --> 00:07:38.241 So it's actually gonna print out to list items here in this navigation menu. 114 00:07:38.241 --> 00:07:42.951 So this really helps with the concept called DRY, don't repeat yourself. 115 00:07:42.951 --> 00:07:45.911 You can abstract things away with this liquid templating language. 116 00:07:45.911 --> 00:07:48.599 And that's going to really reduce your labor and potential for 117 00:07:48.599 --> 00:07:50.841 errors since you're only writing the markup once. 118 00:07:50.841 --> 00:07:54.507 And then you have a single place up top in your front 119 00:07:54.507 --> 00:07:56.875 matter where you edit all of it. 120 00:07:58.869 --> 00:08:03.373 Another example of a control structure is if statements if else. 121 00:08:03.373 --> 00:08:09.611 So you can introduce control logic this way as well, and check conditions. 122 00:08:09.611 --> 00:08:14.410 So this is really just the beginning of the flexibility that liquids 123 00:08:14.410 --> 00:08:17.282 templating language offers in Jekyll. 124 00:08:17.282 --> 00:08:23.301 But for this example, we are looking to loop through the docks in the site. 125 00:08:23.301 --> 00:08:26.561 So for each dock in all of the site docks. 126 00:08:26.561 --> 00:08:32.664 And then we wanna see if the category of that dock is set to getting started. 127 00:08:32.664 --> 00:08:37.371 And if and only if it is, then we're going to print out that list item. 128 00:08:37.371 --> 00:08:41.020 So this is a an easy way to filter based on that condition, right? 129 00:08:41.020 --> 00:08:48.476 We're only displaying dogs in the category and getting started. 130 00:08:48.476 --> 00:08:50.486 I'll talk about a couple ways to build with Jekyll. 131 00:08:50.486 --> 00:08:54.756 So one easy way to get started is building with themes. 132 00:08:56.846 --> 00:08:59.922 Jekyll has a really well supported ecosystem of free and 133 00:08:59.922 --> 00:09:03.855 premium themes created by a community of really talented developers. 134 00:09:03.855 --> 00:09:06.358 And you can override the themes, default layouts and 135 00:09:06.358 --> 00:09:08.698 styles to customize your site's presentation. 136 00:09:08.698 --> 00:09:13.354 Some themes even use additional plugins and programs, those are often included as 137 00:09:13.354 --> 00:09:16.692 Ruby packages called gems, since Jekyll runs [INAUDIBLE]. 138 00:09:16.692 --> 00:09:21.540 These are called gem based themes and they can be a really great entry point to 139 00:09:21.540 --> 00:09:26.013 learning a little bit more about package and dependency management, 140 00:09:26.013 --> 00:09:30.033 which is set to building even more complex web applications. 141 00:09:30.033 --> 00:09:34.458 Here are some of the themes for Jekyll portfolios. 142 00:09:36.676 --> 00:09:41.128 You can find more themes in Jekyll documentation but one theme that I really 143 00:09:41.128 --> 00:09:45.226 think could be great for some developers getting started on the first 144 00:09:45.226 --> 00:09:49.768 portfolio is called the portfolYOU theme, and that's by Youssef Raafat. 145 00:09:49.768 --> 00:09:51.328 These themes architecture and 146 00:09:51.328 --> 00:09:55.108 configuration options might be a little more on the complicated side, but 147 00:09:55.108 --> 00:09:59.500 the trade off here is that it has some really well documented features. 148 00:09:59.500 --> 00:10:02.756 And they cater to a developer portfolios needs and 149 00:10:02.756 --> 00:10:06.800 add a lot of extra bells and whistles that can be great for you. 150 00:10:06.800 --> 00:10:10.498 So, some examples are the ability to search posts by title tags or 151 00:10:10.498 --> 00:10:12.070 descriptions. 152 00:10:12.070 --> 00:10:15.300 You have progress bars for skills. 153 00:10:15.300 --> 00:10:18.465 You have education and experience timelines. 154 00:10:18.465 --> 00:10:21.314 And the ability to even configure a dark mode theme. 155 00:10:24.707 --> 00:10:29.671 One really valuable feature of this theme that I'd like to talk about, 156 00:10:29.671 --> 00:10:32.081 is that you have remote projects. 157 00:10:32.081 --> 00:10:36.600 So, you're able to automatically import your GitHub repositories as projects by 158 00:10:36.600 --> 00:10:41.327 just setting your GitHub information up in the conflict pile we talked about earlier. 159 00:10:41.327 --> 00:10:46.223 And then on your project page, including the name of the repository that 160 00:10:46.223 --> 00:10:50.410 you'd like to automatically fetch the names and details of. 161 00:10:51.700 --> 00:10:56.151 And it'll import that onto your project page and grab the name, description and 162 00:10:56.151 --> 00:10:59.168 topics from any public repo on your to GitHub account. 163 00:10:59.168 --> 00:11:02.256 So that's a really great way to pretty effortlessly, 164 00:11:02.256 --> 00:11:05.888 gather your projects in a nice interface for viewing your work. 165 00:11:08.259 --> 00:11:12.168 Over on the left that we have the output, so those two projects get for wizards and 166 00:11:12.168 --> 00:11:13.492 Arduino Visitor Counter, 167 00:11:13.492 --> 00:11:18.240 are both remote projects in that they're imported repositories from GitHub. 168 00:11:18.240 --> 00:11:20.410 Over on the right, we just have the data for that. 169 00:11:20.410 --> 00:11:25.810 So, it's just that remote projects key with values listed. 170 00:11:25.810 --> 00:11:27.888 So, those are the names of the repositories. 171 00:11:35.571 --> 00:11:42.071 This is an example of a use of that theme by one of my students, Pablo. 172 00:11:45.826 --> 00:11:47.425 Going through that very quickly. 173 00:11:52.956 --> 00:11:54.110 Here is the product index. 174 00:11:55.320 --> 00:11:58.129 Some really sweet animations and transitions here too. 175 00:12:04.376 --> 00:12:07.498 And I'm seeing one question, how important is a portfolio site for 176 00:12:07.498 --> 00:12:10.650 a developer engineer if you're not a designer? 177 00:12:10.650 --> 00:12:13.340 It can be pretty helpful for getting you out there and 178 00:12:13.340 --> 00:12:16.240 showing your work to prospective employers. 179 00:12:16.240 --> 00:12:20.127 Getting your foot in the door, it's not gonna hurt you and it can be very, 180 00:12:20.127 --> 00:12:21.100 very helpful. 181 00:12:21.100 --> 00:12:24.920 So, if you're not a designer, this is really what this talk is for. 182 00:12:24.920 --> 00:12:29.260 It's to help you get some tips to still get your work presentable in a nice way. 183 00:12:31.190 --> 00:12:34.532 Teams are also a great option to kinda give you a lift there. 184 00:12:41.984 --> 00:12:46.424 This is another example of student work from Grace. 185 00:12:46.424 --> 00:12:52.237 So, Grace used another theme in here, she's got these really nice rollover, 186 00:12:52.237 --> 00:12:55.552 color and hover effects on portfolio items. 187 00:12:55.552 --> 00:13:00.383 This smart tagging solution that helps filter projects, 188 00:13:00.383 --> 00:13:03.250 video support our project pages. 189 00:13:05.500 --> 00:13:06.000 Good stuff. 190 00:13:10.520 --> 00:13:17.810 This is another example of work from Hero So Hero's a musician from Tokyo. 191 00:13:17.810 --> 00:13:22.112 Another tagging solution up top implemented using some of the flexibility 192 00:13:22.112 --> 00:13:24.100 that liquid in-deco offers you. 193 00:13:24.100 --> 00:13:26.610 But this is also through a theme. 194 00:13:26.610 --> 00:13:31.549 It's a little custom work, but pretty straightforward, 195 00:13:31.549 --> 00:13:35.508 simple about page and a great catalog of music. 196 00:13:35.508 --> 00:13:40.430 Question about these themes being mobile friendly. 197 00:13:40.430 --> 00:13:42.890 Yes, you can customize mobile views. 198 00:13:42.890 --> 00:13:48.650 You'll use media queries, just like regular responsive development. 199 00:13:48.650 --> 00:13:52.009 But most of these themes, all of them that I've seen, 200 00:13:52.009 --> 00:13:55.310 come with breakpoints that address mobile reports. 201 00:13:57.340 --> 00:13:59.640 We'll see some of this a little later, too. 202 00:13:59.640 --> 00:14:02.240 So, next I wanna talk about rolling your own. 203 00:14:02.240 --> 00:14:05.974 If you're a novice web developer, building your own portfolio from scratch can be 204 00:14:05.974 --> 00:14:09.830 a unique opportunity to showcase your skills and express your personality. 205 00:14:09.830 --> 00:14:12.427 And setting that is completely under your control, 206 00:14:12.427 --> 00:14:15.800 which you don't get to deal with a lot of other projects sometimes. 207 00:14:15.800 --> 00:14:17.451 So, here's some tips to get creative and 208 00:14:17.451 --> 00:14:19.585 design your first portfolio site from the bottom up. 209 00:14:22.139 --> 00:14:24.471 First off, planning can be really important, so 210 00:14:24.471 --> 00:14:27.930 I'd suggest planning your site structure with a site map. 211 00:14:27.930 --> 00:14:33.113 That's a diagram that really presents the directory structure and page content for 212 00:14:33.113 --> 00:14:37.504 your website before you get started on some of the lower level details. 213 00:14:37.504 --> 00:14:41.260 It's useful to ascertain a quick overview of the content links and navigation for 214 00:14:41.260 --> 00:14:41.810 your site. 215 00:14:41.810 --> 00:14:46.157 And it's a good first step to commit to this larger hierarchical structure before 216 00:14:46.157 --> 00:14:48.240 getting lost in those design details. 217 00:14:49.580 --> 00:14:54.862 Like most parts of the process, it's very okay to be flexible and 218 00:14:54.862 --> 00:14:58.880 change your initial ideas as you progress. 219 00:14:58.880 --> 00:15:02.804 I'd really recommend Figma as a tool for working on the design preliminaries for 220 00:15:02.804 --> 00:15:03.910 your portfolio site. 221 00:15:04.960 --> 00:15:08.355 There are a lot of community resources that can give you a good starting point 222 00:15:08.355 --> 00:15:10.640 for site mapping and some of the other steps. 223 00:15:10.640 --> 00:15:14.924 So, here's an example of a Figma community file that you can duplicate to easily 224 00:15:14.924 --> 00:15:16.383 create a sitemap diagram. 225 00:15:19.415 --> 00:15:22.800 Here's an example of a sitemap by a student, Sara Philip. 226 00:15:24.400 --> 00:15:26.762 There's a legend over on the top left and 227 00:15:26.762 --> 00:15:30.530 I'll talk a little bit about how Jekyll treats pages and posts. 228 00:15:31.850 --> 00:15:35.143 So pages are a basic Jekyll building block that are most suitable for 229 00:15:35.143 --> 00:15:37.130 standalone content. 230 00:15:37.130 --> 00:15:39.683 They can be created in the root of your site or 231 00:15:39.683 --> 00:15:43.559 added to any sub directory just by adding an HTML or mark down file. 232 00:15:43.559 --> 00:15:47.460 And they can use any of your Jekyll layouts to display content. 233 00:15:47.460 --> 00:15:51.180 But cool thing about Jekyll is also, you can scaffold layouts. 234 00:15:51.180 --> 00:15:56.164 So, you can use one layout that uses another layout, that uses another layout, 235 00:15:56.164 --> 00:15:57.130 so on and so on. 236 00:15:57.130 --> 00:16:02.257 Posts are suitable for content that's more cereal or that belongs to a collection, 237 00:16:02.257 --> 00:16:05.952 something like blog posts with vapes or a group of projects. 238 00:16:05.952 --> 00:16:08.838 And one great thing about Jekyll philosophy is that, it's built for 239 00:16:08.838 --> 00:16:10.090 blogging and its blog first. 240 00:16:10.090 --> 00:16:13.266 So you'll have a lot of control over permalinks, categories and 241 00:16:13.266 --> 00:16:15.355 custom layouts when you're using posts. 242 00:16:20.517 --> 00:16:24.509 The next step I'd recommend is to explore your basic layout with some wireframes. 243 00:16:24.509 --> 00:16:28.116 Wireframes are a successive low fidelity preliminary that helps you plan 244 00:16:28.116 --> 00:16:30.260 the content of each layout. 245 00:16:30.260 --> 00:16:33.342 And you'll get into more detail here, but again, you wanna try and 246 00:16:33.342 --> 00:16:36.660 stay high level and not really get lost on smaller design decisions yet. 247 00:16:38.010 --> 00:16:41.244 So, stay abstract, stay on the level of a rough sketch and 248 00:16:41.244 --> 00:16:43.752 try a lot of variations on some of your ideas. 249 00:16:43.752 --> 00:16:46.860 Don't always wanna go with the first thing you think of, 250 00:16:46.860 --> 00:16:50.950 maybe there's a better way to solve presentation of problems [INAUDIBLE]. 251 00:16:50.950 --> 00:16:54.263 It's a good chance to explore hierarchy and determine a logical structure for 252 00:16:54.263 --> 00:16:56.220 how to present your content. 253 00:16:56.220 --> 00:16:58.720 And you're gonna wanna try to balance your preferences. 254 00:16:58.720 --> 00:17:01.568 So think about what you want from your dream site, but 255 00:17:01.568 --> 00:17:03.840 also the needs of your audience. 256 00:17:03.840 --> 00:17:06.054 Keep in mind who's using your website and try and 257 00:17:06.054 --> 00:17:09.670 present content in a way that's gonna help you achieve your goals. 258 00:17:09.670 --> 00:17:13.736 So, if your goals are employment related, think about a hiring manager or 259 00:17:13.736 --> 00:17:15.807 a recruiter viewing your portfolio. 260 00:17:15.807 --> 00:17:18.985 And what they're gonna need to see and how they're gonna need to see it in order to 261 00:17:18.985 --> 00:17:21.718 be the best presented when it comes to making your design decisions. 262 00:17:28.019 --> 00:17:30.758 Here's another community resource on Figma. 263 00:17:30.758 --> 00:17:32.779 There's a plugin called wireframe. 264 00:17:32.779 --> 00:17:37.577 And it's a useful tool for quickly sketching out the hierarchical structure 265 00:17:37.577 --> 00:17:40.912 of your page layouts and all the elements [INAUDIBLE]. 266 00:17:40.912 --> 00:17:45.843 Here's an example of the wireframes for the site we saw earlier by Hero. 267 00:17:45.843 --> 00:17:51.866 One important tip for wireframing, is to leave a little bit of negative space. 268 00:17:51.866 --> 00:17:54.073 And you wanna have high regard for negative space and 269 00:17:54.073 --> 00:17:57.048 remember to let your content breath considering your site's users. 270 00:17:57.048 --> 00:18:01.349 You don't wanna overwhelm them and introduce a high cognitive load. 271 00:18:01.349 --> 00:18:05.335 You wanna make your content easy to digest and keep things simple when possible. 272 00:18:08.151 --> 00:18:12.756 Wireframing is also an ideal time to start considering responsive layouts. 273 00:18:12.756 --> 00:18:17.012 So, responsive design, as mentioned earlier, is the practice of adapting 274 00:18:17.012 --> 00:18:20.879 content and style to display a website on different kinds of devices. 275 00:18:20.879 --> 00:18:24.345 It's a good idea to consider at least two layouts for each of your views, one for 276 00:18:24.345 --> 00:18:26.120 mobile and one for desktop. 277 00:18:26.120 --> 00:18:29.185 And then you can fill in different breakpoints, if you'd like, 278 00:18:29.185 --> 00:18:30.199 that are in between. 279 00:18:30.199 --> 00:18:33.619 Something to keep in mind here, is that layout, hierarchy and elements, 280 00:18:33.619 --> 00:18:36.663 may need to shift slightly between mobile and desktop viewports, 281 00:18:36.663 --> 00:18:38.900 to meet usability expectations. 282 00:18:38.900 --> 00:18:43.520 So for mobile, one, the screen is a lot narrower, it's usually a good idea to 283 00:18:43.520 --> 00:18:47.161 err on the simpler side, with things like one column layout. 284 00:18:47.161 --> 00:18:53.136 And wider elements, bigger top points for thumbs, so on and so forth. 285 00:18:57.069 --> 00:18:58.400 Let's talk about inspiration. 286 00:18:58.400 --> 00:19:03.006 While you're wireframing, it can be a really great idea to search for 287 00:19:03.006 --> 00:19:04.029 inspiration. 288 00:19:04.029 --> 00:19:08.250 You can sketch your own layouts by tracing on top of others that you like, or 289 00:19:08.250 --> 00:19:10.204 shifting things around as you go. 290 00:19:10.204 --> 00:19:14.334 You can even pull inspiration from other design elements like color, 291 00:19:14.334 --> 00:19:16.930 typography, language and tone, or more. 292 00:19:16.930 --> 00:19:21.310 So, if you're a developer and not exactly experienced as a designer, 293 00:19:21.310 --> 00:19:25.360 this is really the place to look, steal like an artist, right? 294 00:19:25.360 --> 00:19:30.750 Look around at what's working for other people and see what can work for you. 295 00:19:31.850 --> 00:19:35.370 Having all of this in one Figma project, can really help you pull things together 296 00:19:35.370 --> 00:19:38.338 as you develop a more cohesive intention for your project outcome. 297 00:19:38.338 --> 00:19:41.195 And there are a lot of great places to find inspiration around the web for 298 00:19:41.195 --> 00:19:42.490 your portfolio website. 299 00:19:42.490 --> 00:19:47.164 So, here [INAUDIBLE], there's landbook.com, 300 00:19:47.164 --> 00:19:50.735 blackboard.ninja, and HTTP star. 301 00:19:50.735 --> 00:19:53.790 Yeah, a lot of great portfolio sites to pull inspiration from on here. 302 00:19:59.909 --> 00:20:02.090 Let's talk about typography really quick. 303 00:20:02.090 --> 00:20:05.950 So the primary objective of your portfolio design process should be to develop 304 00:20:05.950 --> 00:20:07.360 a clear sense of hierarchy. 305 00:20:07.360 --> 00:20:10.202 You wanna clarify which content is important and 306 00:20:10.202 --> 00:20:14.510 dictate the order users will view it in to reduce the friction and effort. 307 00:20:15.830 --> 00:20:19.456 Considering some of the finer details like typography and color can really help 308 00:20:19.456 --> 00:20:23.240 inform the ways in which he is contrast to give rise to that hierarchy. 309 00:20:23.240 --> 00:20:27.040 So we're gonna talk about type a little bit, we'll keep it brief. 310 00:20:27.040 --> 00:20:31.460 Typography can be a pretty dangerous hole to fall into, so I'm gonna stick to 311 00:20:31.460 --> 00:20:37.090 the basics, why it's important, it's the visual component of the written word. 312 00:20:37.090 --> 00:20:41.061 It has some considerable consequences for how clear and usable your site is and 313 00:20:41.061 --> 00:20:44.020 what the tone and impact of your website is. 314 00:20:44.020 --> 00:20:47.701 Balanced typography considers the practical needs of its readers and 315 00:20:47.701 --> 00:20:50.660 the expressive intent of its author as well. 316 00:20:50.660 --> 00:20:54.460 So it's an important chance to get your expressive voice across but 317 00:20:54.460 --> 00:20:56.270 also have your site [INAUDIBLE]. 318 00:20:56.270 --> 00:20:58.684 Good typography reinforces the meaning of your content. 319 00:21:01.280 --> 00:21:07.280 So here is an example of the dichotomy between utility and expressivity. 320 00:21:07.280 --> 00:21:11.511 This is highway signage, and while signage on the right looks a lot more expressive, 321 00:21:11.511 --> 00:21:14.050 you got to consider the context. 322 00:21:14.050 --> 00:21:17.522 People are whizzing by at 65 miles per hour, 323 00:21:17.522 --> 00:21:20.735 they probably don't wanna read a script. 324 00:21:20.735 --> 00:21:24.296 And so something that's a little bit more readable from a distance that's 325 00:21:24.296 --> 00:21:27.687 resolvable, like on the left, is gonna be really the [INAUDIBLE] here, 326 00:21:27.687 --> 00:21:30.480 leaning a lot towards utility rather than expressivity. 327 00:21:34.950 --> 00:21:39.566 I'll talk about some four elements of typography that really go a long 328 00:21:39.566 --> 00:21:43.100 way to determining the appearance of your body text. 329 00:21:44.370 --> 00:21:48.930 So there's point-size guidelines for that. 330 00:21:48.930 --> 00:21:51.970 Keep the font-size of the body text between 15 and 25 pixels. 331 00:21:53.040 --> 00:21:57.388 Let's talk about line spacing, line-height, and 332 00:21:57.388 --> 00:22:03.010 these are all CSS properties, is best between 1.2 and 1.45. 333 00:22:03.010 --> 00:22:08.771 Line length, so that's gonna be the width of the element that contains your text, 334 00:22:08.771 --> 00:22:10.620 and this is body texts. 335 00:22:10.620 --> 00:22:16.130 You wanna aim for a minimum of 45 characters, and 90 characters. 336 00:22:16.130 --> 00:22:21.247 CSS now thankfully has this ch length unit that can really 337 00:22:21.247 --> 00:22:26.130 control how many characters the element is. 338 00:22:26.130 --> 00:22:27.530 So that's great to use for this. 339 00:22:31.690 --> 00:22:32.847 Lastly, font choice. 340 00:22:32.847 --> 00:22:37.740 So you're gonna wanna use professionally designed fonts and combine them sparingly. 341 00:22:37.740 --> 00:22:40.040 And the less can always be more with type. 342 00:22:40.040 --> 00:22:43.898 So if you're combining fonts, aim for contrast as well and 343 00:22:43.898 --> 00:22:46.223 used fonts even in the same family. 344 00:22:46.223 --> 00:22:50.571 You don't really wanna end up in an in-between space 345 00:22:50.571 --> 00:22:53.090 cuz that can appear unfairly. 346 00:22:53.090 --> 00:22:56.875 Keep in mind that all these are rules and rules are meant to be broken. 347 00:22:56.875 --> 00:22:59.789 So think of it more as guidelines, you don't have to take them as gospel, 348 00:22:59.789 --> 00:23:01.342 they're just taking starting plain. 349 00:23:01.342 --> 00:23:03.324 If you know what you're doing typographically, 350 00:23:03.324 --> 00:23:04.510 feel free to play with these. 351 00:23:05.550 --> 00:23:09.010 The source for all of these rules is Butterick's Practical Typography. 352 00:23:09.010 --> 00:23:13.620 And I'd really recommend diving into that free book as website for 353 00:23:13.620 --> 00:23:18.245 a lay audience who just wants to set type well in regular contexts. 354 00:23:18.245 --> 00:23:26.580 Check it out at practicaltypography.com Next, we have type scales. 355 00:23:26.580 --> 00:23:30.816 So type scale is a resource that will help you choose the right type scale for 356 00:23:30.816 --> 00:23:31.700 your project. 357 00:23:31.700 --> 00:23:36.170 It's gonna give you this hierarchy of heading sizes and body text. 358 00:23:36.170 --> 00:23:39.930 And it's gonna let you experiment with font size scale and different web blocks. 359 00:23:39.930 --> 00:23:44.758 So you can see we're really getting into the hierarchy part of typography here, 360 00:23:44.758 --> 00:23:48.400 where we have this cascading system of headings. 361 00:23:48.400 --> 00:23:52.347 That's gonna be your h1 through h6 elements, and then the body text. 362 00:23:55.320 --> 00:23:58.280 Here are a few resources to help you choose fonts. 363 00:23:58.280 --> 00:24:00.193 So, Fontjoy over on the left, 364 00:24:00.193 --> 00:24:04.105 that's gonna use machine learning to suggest font pairings. 365 00:24:04.105 --> 00:24:08.591 Fontpair is a set of curated font pairings. 366 00:24:08.591 --> 00:24:11.120 And then you can even just use Google Fonts itself. 367 00:24:11.120 --> 00:24:16.068 So if you navigate to the pairings tab on any font specimen, it's actually gonna 368 00:24:16.068 --> 00:24:20.896 give you a set of recommended pairings for the typeface that you're viewing. 369 00:24:20.896 --> 00:24:24.846 And [INAUDIBLE] many specimen for that to be headers and 370 00:24:24.846 --> 00:24:28.286 body texts have changed the weights and such. 371 00:24:28.286 --> 00:24:32.026 So those are all great ways to find combinations for typefaces, 372 00:24:32.026 --> 00:24:33.213 [INAUDIBLE] simple. 373 00:24:35.662 --> 00:24:36.874 Next, we'll talk about color. 374 00:24:42.290 --> 00:24:45.410 So color is pretty important in design. 375 00:24:45.410 --> 00:24:48.376 We can talk about color psychology first. 376 00:24:48.376 --> 00:24:52.061 [COUGH] The claim of color psychology is that colors subconsciously affects 377 00:24:52.061 --> 00:24:53.450 perception. 378 00:24:53.450 --> 00:24:57.070 And that's a good thing to look up a little more information on. 379 00:24:57.070 --> 00:25:00.716 It's not really a hard science, but it's a helpful starting point for 380 00:25:00.716 --> 00:25:04.363 beginning to understand how color can relate to your personal brand and 381 00:25:04.363 --> 00:25:07.239 what you wanna show when you're showcasing your work. 382 00:25:07.239 --> 00:25:12.380 You can use color to elevate feelings of trust, authority, and so on and so forth. 383 00:25:12.380 --> 00:25:13.920 So think about your values. 384 00:25:13.920 --> 00:25:17.646 Think about what you're trying to get across in communicating to your audience, 385 00:25:17.646 --> 00:25:20.670 whether that's hiring managers, whether that's recruiters, 386 00:25:20.670 --> 00:25:22.244 whether it's other developers. 387 00:25:22.244 --> 00:25:24.936 And we can begin to look into color psychology for 388 00:25:24.936 --> 00:25:28.821 helping you develop a little more of a voice around that design looks. 389 00:25:28.821 --> 00:25:29.980 Next step, color theory. 390 00:25:31.050 --> 00:25:33.607 So color wheel diagrams really do a great 391 00:25:33.607 --> 00:25:37.320 job of illustrating color relationships here. 392 00:25:37.320 --> 00:25:40.065 You can create different geometric relationships between the colors on 393 00:25:40.065 --> 00:25:41.600 the wheel to generate the color scheme. 394 00:25:41.600 --> 00:25:43.360 And there are a lot of tools to help you with that. 395 00:25:44.730 --> 00:25:48.304 So for example, complimentary colors are opposite on the wheel and 396 00:25:48.304 --> 00:25:50.006 they have strongest contrast. 397 00:25:50.006 --> 00:25:53.466 Analogous colors are adjacent on the wheel and they're good for 398 00:25:53.466 --> 00:25:57.410 these more subdued, harmonious palettes sometimes. 399 00:25:57.410 --> 00:26:00.730 And lastly, color and usability. 400 00:26:00.730 --> 00:26:03.420 So, color contrast creates hierarchy. 401 00:26:04.910 --> 00:26:08.585 And for example, your hyperlinks might be styled with a different color than your 402 00:26:08.585 --> 00:26:12.080 body text to offer users an affordance for interactivity. 403 00:26:12.080 --> 00:26:16.460 So you're differentiating meaningful content in that way. 404 00:26:16.460 --> 00:26:20.974 An important caveat here is that you don't want to rely solely on color 405 00:26:20.974 --> 00:26:22.131 to communicate. 406 00:26:22.131 --> 00:26:26.565 You wanna give other indications that things might be interactive, 407 00:26:26.565 --> 00:26:29.240 or indicates status in different ways. 408 00:26:29.240 --> 00:26:31.551 Because not everybody sees color in listing. 409 00:26:34.340 --> 00:26:38.939 So this is just a quick example of a color psychology chart rather. 410 00:26:38.939 --> 00:26:43.359 We're seeing green associated with topics like nature, healing, 411 00:26:43.359 --> 00:26:49.350 quality and freshness, whereas purple might be associated more with luxury. 412 00:26:49.350 --> 00:26:52.310 So this is an example of a starting point to get you thinking about what your 413 00:26:52.310 --> 00:26:54.938 personal brand is and what you're trying to communicate when you 414 00:26:54.938 --> 00:26:57.924 think about the color choices you're going to employ on your portfolio. 415 00:27:00.600 --> 00:27:03.480 These are some geometric color relationships. 416 00:27:03.480 --> 00:27:08.344 So we're seeing different relationships between colors geometrically on 417 00:27:08.344 --> 00:27:10.040 the color wheel. 418 00:27:10.040 --> 00:27:13.970 So for example, triadic appears in a triangle. 419 00:27:13.970 --> 00:27:18.282 All over the wheel, we have split complimentary that are opposite and 420 00:27:18.282 --> 00:27:19.680 analogous combined. 421 00:27:19.680 --> 00:27:23.180 I already talked about analogous in complementary colors. 422 00:27:23.180 --> 00:27:25.436 But we also have things like tetradic which are squares or 423 00:27:25.436 --> 00:27:26.900 rectangles around the color wheel. 424 00:27:28.040 --> 00:27:29.610 A lot of different relationships explore here. 425 00:27:32.420 --> 00:27:35.902 There are really a lot of great tools like Adobe Color that can help you generate 426 00:27:35.902 --> 00:27:37.520 color palettes. 427 00:27:37.520 --> 00:27:40.765 So Adobe Color is great because you can play with those geometrical infusions on 428 00:27:40.765 --> 00:27:41.500 the color wheel. 429 00:27:41.500 --> 00:27:45.430 But you can also extract a theme from uploading an image. 430 00:27:45.430 --> 00:27:48.840 You can explore other people's color libraries. 431 00:27:48.840 --> 00:27:51.440 They even have accessibility tools. 432 00:27:51.440 --> 00:27:56.290 So I'll talk a little bit more about accessibility in color in a second. 433 00:27:56.290 --> 00:27:59.941 But you can find a lot of these big color tools, 434 00:27:59.941 --> 00:28:06.470 the color apps section on what design toolbox and that's in the design menu. 435 00:28:06.470 --> 00:28:09.448 What design toolbox is a pretty amazing resource for 436 00:28:09.448 --> 00:28:14.120 finding A ton of different tools that are gonna help you with your design process or 437 00:28:14.120 --> 00:28:16.100 with web development in general. 438 00:28:20.500 --> 00:28:23.760 Another option is to look at some front end frameworks. 439 00:28:23.760 --> 00:28:27.854 So tailwind and bootstrap, for example, you know, come ready with 440 00:28:27.854 --> 00:28:31.890 color palettes that can offer you some decent options to select from 441 00:28:37.460 --> 00:28:39.790 Let's talk a little bit about accessibility at this point. 442 00:28:39.790 --> 00:28:42.280 designing for everybody is really important. 443 00:28:42.280 --> 00:28:44.681 And I want to give a shout out to Jordan for 444 00:28:44.681 --> 00:28:49.720 that great presentation on accessibility at mobile learning on the web, too. 445 00:28:49.720 --> 00:28:56.000 So I'm as we know and make sites apps, and content more useful for disabled people. 446 00:28:56.000 --> 00:28:59.510 And many people use assistive technologies like screen readers to browse the web. 447 00:28:59.510 --> 00:29:02.727 So, they're actually standardized guidelines called, 448 00:29:02.727 --> 00:29:05.496 the web content accessibility guidelines provide 449 00:29:05.496 --> 00:29:08.530 accessibility standards to meet everybody's needs. 450 00:29:10.160 --> 00:29:12.100 I'd really recommend reading those. 451 00:29:12.100 --> 00:29:17.209 But I'm gonna talk about two really simple things you can do on your entry 452 00:29:17.209 --> 00:29:22.320 level portfolio to get started with accessibility to low level lists. 453 00:29:22.320 --> 00:29:26.630 So, the first is validating your color contrast ratios. 454 00:29:26.630 --> 00:29:30.693 The WCAG specifies contrast ratios for text colors against a background and 455 00:29:30.693 --> 00:29:35.020 it gets them grades so double A and triple A are passing grades. 456 00:29:35.020 --> 00:29:38.698 This ensures that your text is legible across an acceptable range of viewing 457 00:29:38.698 --> 00:29:40.020 conditions. 458 00:29:40.020 --> 00:29:44.174 And the different text settings like body texts, or headings might have different 459 00:29:44.174 --> 00:29:48.505 thresholds for passing grades here, It's a pretty good idea to read those guidelines 460 00:29:48.505 --> 00:29:52.840 and meet the ones you can many are difficult to work into your project. 461 00:29:52.840 --> 00:29:57.928 But like we said, this is gonna be a couple things to start installing. 462 00:29:57.928 --> 00:30:01.330 The other one is describing images with alt text. 463 00:30:01.330 --> 00:30:04.271 So the image HTML element has an alt attribute in addition 464 00:30:04.271 --> 00:30:08.040 to the source attribute which is the path of the image. 465 00:30:08.040 --> 00:30:12.559 Here you can set the value to a string that describes the image or 466 00:30:12.559 --> 00:30:14.356 its function with text. 467 00:30:14.356 --> 00:30:17.866 And that's really useful for screen readers and assistive tech, but 468 00:30:17.866 --> 00:30:20.390 it will also display if the image can't load. 469 00:30:20.390 --> 00:30:23.301 So people will know what [INAUDIBLE]. 470 00:30:23.301 --> 00:30:28.295 It also helps with search engine optimization because it's content that 471 00:30:28.295 --> 00:30:29.186 [INAUDIBLE]. 472 00:30:29.186 --> 00:30:33.173 You don't need alt texts for your decorative elements, 473 00:30:33.173 --> 00:30:37.672 focus on things that are functional or useful to the [INAUDIBLE]. 474 00:30:37.672 --> 00:30:40.900 This is a resource called Who Can Use. 475 00:30:40.900 --> 00:30:44.750 So it gives you a grading for color combinations. 476 00:30:44.750 --> 00:30:46.884 And it also provides legibility statistics and 477 00:30:46.884 --> 00:30:51.100 visual simulations of what they might look like in different settings. 478 00:30:51.100 --> 00:30:55.824 There's also a plugin for FIGMA called Stark that can help you check your 479 00:30:55.824 --> 00:30:58.970 color contrast right inside your framework. 480 00:30:58.970 --> 00:31:03.023 So I really recommend these as ways to ensure that your color 481 00:31:03.023 --> 00:31:05.220 combinations are accessible. 482 00:31:08.450 --> 00:31:10.221 Let's talk about putting it all together and 483 00:31:10.221 --> 00:31:12.420 look at some student work examples to close things out. 484 00:31:14.320 --> 00:31:18.550 So this is a site by Alexandra Tejada Levine. 485 00:31:18.550 --> 00:31:25.807 I taught first time web developers who are mostly artists and creatives. 486 00:31:25.807 --> 00:31:30.421 So Alexandra is an actress and chose to really focus on 487 00:31:30.421 --> 00:31:35.147 a portrait to really kind of present herself upfront. 488 00:31:35.147 --> 00:31:38.437 But there's also a reel and some contact information, 489 00:31:38.437 --> 00:31:41.970 which includes her artist representation. 490 00:31:41.970 --> 00:31:43.190 So keeping things pretty simple. 491 00:31:46.490 --> 00:31:50.594 This is Byungkyu Lee's website. 492 00:31:50.594 --> 00:31:54.036 Some really interesting use of video backgrounds here. 493 00:31:56.215 --> 00:31:58.150 [INAUDIBLE] behavior. 494 00:32:01.430 --> 00:32:03.151 Great aesthetic there. 495 00:32:05.355 --> 00:32:08.820 This is Sarah's full site which we saw earlier. 496 00:32:08.820 --> 00:32:14.166 We have the mobile view over on the left sticking to that simple single column, 497 00:32:14.166 --> 00:32:16.900 but really bare bones and simple here. 498 00:32:16.900 --> 00:32:23.868 It brings out these beautiful thumbnails especially on your mobile layout where 499 00:32:23.868 --> 00:32:29.000 you have this center axis focus helping more come forward. 500 00:32:29.000 --> 00:32:31.488 This is Jackson Kaplan's website. 501 00:32:31.488 --> 00:32:37.400 Jackson produces music, so pretty cool animated pop out menu here. 502 00:32:37.400 --> 00:32:41.042 One thing I really liked about this site is that it went a little further for 503 00:32:41.042 --> 00:32:45.140 accessibility and made sure this photo section was keyboard navigable. 504 00:32:45.140 --> 00:32:48.340 So that's another thing you can do for accessibility. 505 00:32:48.340 --> 00:32:52.515 Make sure people don't need a mouse and clicks to navigate your website. 506 00:32:56.698 --> 00:32:59.043 This is Alen Lee's website. 507 00:32:59.043 --> 00:33:02.580 Alen Lee is a composer based in Kazakhstan. 508 00:33:02.580 --> 00:33:06.845 So you can see a collection of projects here that use things like the Jekyll for 509 00:33:06.845 --> 00:33:08.562 loop we talked about earlier. 510 00:33:08.562 --> 00:33:13.456 And there's a pretty unique set of typographic choices, color scheme, and 511 00:33:13.456 --> 00:33:18.210 overall design here that I think speaks really well to Alwn's aesthetic. 512 00:33:19.490 --> 00:33:22.620 See it adapted over to the mobile layout, right? 513 00:33:24.010 --> 00:33:25.283 This is a great outcome. 514 00:33:29.420 --> 00:33:30.418 And now it's your turns. 515 00:33:30.418 --> 00:33:34.835 So take all of that as inspiration, go forth, and build. 516 00:33:34.835 --> 00:33:38.120 And I'm excited to see what all of you come up with. 517 00:33:38.120 --> 00:33:40.810 I'll try and take a couple more questions. 518 00:33:41.880 --> 00:33:44.200 So I'm seeing one. 519 00:33:44.200 --> 00:33:46.272 Most of the front end entry level positions, 520 00:33:46.272 --> 00:33:49.250 the companies need at least two to three years experience. 521 00:33:49.250 --> 00:33:53.140 How can we get entry level jobs while we do not have any company experience? 522 00:33:54.300 --> 00:33:57.449 I'd recommend starting with personal projects, 523 00:33:57.449 --> 00:34:02.072 building things that you're having fun with, that you're learning on. 524 00:34:02.072 --> 00:34:05.520 And then maybe trying to see if you can tackle some freelance work. 525 00:34:07.260 --> 00:34:09.940 So friends and family often need websites. 526 00:34:09.940 --> 00:34:15.871 Maybe it's local businesses, see who you can help out with your skills. 527 00:34:15.871 --> 00:34:19.370 And that's a great way to start building portfolio with real projects. 528 00:34:20.640 --> 00:34:21.950 It's gonna take a little while and 529 00:34:21.950 --> 00:34:24.260 you're gonna take some time to gather that experience. 530 00:34:24.260 --> 00:34:26.275 But that's still valuable experience, 531 00:34:26.275 --> 00:34:29.520 even if you're not employed as a front end developer. 532 00:34:29.520 --> 00:34:31.160 So lean on that for sure. 533 00:34:31.160 --> 00:34:34.351 And that's a great thing to showcase in your portfolio as well. 534 00:34:34.351 --> 00:34:38.364 Even better if you want to build that by scratch as a web hook. 535 00:34:38.364 --> 00:34:42.506 Another question, would you recommend having two portfolio sites? 536 00:34:42.506 --> 00:34:44.818 One client facing simple, plain language. 537 00:34:44.818 --> 00:34:50.270 And the other for showing to fellow devs and tech recruiters [INAUDIBLE] heavy. 538 00:34:50.270 --> 00:34:55.144 What I might recommend is having different sections of your portfolio 539 00:34:55.144 --> 00:34:56.884 site that speak to this. 540 00:34:56.884 --> 00:34:59.276 So, for example, maybe the simple and 541 00:34:59.276 --> 00:35:03.670 plain language is gonna be up front on your landing pages and stuff. 542 00:35:03.670 --> 00:35:05.778 But you might have case studies for 543 00:35:05.778 --> 00:35:08.984 your project that get into a little bit more detail. 544 00:35:08.984 --> 00:35:12.983 You can also summarize and have people click into things like a repo or a full 545 00:35:12.983 --> 00:35:17.400 case study, if they really want to dig into the nitty gritty of your projects. 546 00:35:17.400 --> 00:35:21.381 So that's kind of the situation that I think most developers are in. 547 00:35:21.381 --> 00:35:25.733 They want to present an overview of the work and then offer people the opportunity 548 00:35:25.733 --> 00:35:29.070 to dive in deeper and even view the repository if they need to. 549 00:35:29.070 --> 00:35:34.712 So I think that's the way to do it is kind of hierarchically. 550 00:35:34.712 --> 00:35:37.950 When is the right time to start working on your portfolio? 551 00:35:40.410 --> 00:35:43.917 Whenever you're ready to start showing your work to other people, and 552 00:35:43.917 --> 00:35:46.613 I'd recommend showing it early and showing it often. 553 00:35:46.613 --> 00:35:49.523 Get feedback on your portfolio while it's in progress. 554 00:35:49.523 --> 00:35:52.846 But it's gonna be really helpful in you landing those early gigs, 555 00:35:52.846 --> 00:35:55.532 getting more clients if you're working freelance. 556 00:35:55.532 --> 00:35:59.481 Getting employed if you're looking for your first front end position. 557 00:35:59.481 --> 00:36:04.603 So it's never too soon as long as you have projects to show. 558 00:36:04.603 --> 00:36:08.687 And even if you don't, maybe you have an idea of what you kind of like to represent 559 00:36:08.687 --> 00:36:12.894 about yourself as a developer, or what you'd like to focus on, or what you'd like 560 00:36:12.894 --> 00:36:16.710 to communicate to an audience of people who your work is going to matter to. 561 00:36:16.710 --> 00:36:20.230 So as soon as you know any of those things, get the ball rolling and build. 562 00:36:21.400 --> 00:36:22.310 Thank you so much. 563 00:36:22.310 --> 00:36:24.066 That's it for me today. 564 00:36:24.066 --> 00:36:26.194 Good luck with your first portfolios and 565 00:36:26.194 --> 00:36:29.650 everything that happens in your development career after that.