DEV Community: Jose Negrete

Perpetual Education: Week 6

Jose Negrete — Fri, 10 Dec 2021 13:06:57 +0000

Oh hi,

Another blog. Another ambient album. Another week at PE.

I’m not linking the album this time because it’s too embarrassing.

What else? …I watched Terminator 1 & 2 back-to-back recently. They hold up.

Sorry. On with the blog! Here’s the gist…

Idea Boards

What is an idea board? What is a mood board? What’s the difference? I dunno. They’re both pretty interchangeable. The general goal is to express an idea or search for one by using found images, illustrations, designs, etc.

Think of Beetlejuice. Imagine your Tim Burton and you’re trying to describe this character without using images. It would be super weird. The actors auditioning for the part would probably think it was a prank. I’m sure something as simple as an idea board/mood board would be way more effective at getting his vision across.

For this lesson I created a few boards. At first I didn’t really have a direction. I just looked at everything I collected in my inspiration folder and started throwing stuff together. Eventually some ideas started flowing and I could organize them into themes and colors.

For this one I started with the color purple and then it morphed into a mood board that could maybe work if the client is a Psychic and/or sells pseudoscience products.

Gray Scale

Creating with black and white. Creating with various shades of grey. I like these limitations. Whenever colors are involved I’m constantly second guessing my choices.

For this first design I created 2 separate layers of vertical lines and place a layer of text inside on them. With every little alteration you get some really cool results — to the point where I can’t really decide which one is my favorite. Would be fun to incorporate this into a site where the line-spacing changed on scroll or with the viewport width.

For the 2nd design I started with one square in the direct center and kept adding squares of divisible size in a symmetrical way. Got some happy mistakes using the negative blend mode too.

Simple method to get the juices flowing:

If I don’t know what to do, if I have an empty canvas — I should just pick a shape, make it black and white, place it in the center, and start building symmetrically. The design sort of presents itself and I’m ultimately happy with the results.

For the 3rd design I did something similar.

Would be cool to animate this. Maybe have each circle come in from a different angle to form the cross?

Variation on that design using an engraved brush style.

For the last exercise I had to create a design only using different shades of grey. Also added some 3D and shading.

As a bonus Derek asked us to create a green version with the same limitations. This is what I got.

S P A C E

I have a problem with jumbling everything together in my designs. I need to let them breathe. I need to consider where the user’s eyes are traveling when they look at my designs. I need to think of more interesting ways to make my document flow. I haven’t really ventured out of the standard format.

For this one we revisited our mood boards (I like saying that better than idea boards) and rearranged them using the power of S P A C E.

I didn’t really know what I was doing so I just rearranged mine and added some images to tell a loose story. I think it’s one of those things where I could make better design choices if there was some copy, some idea and/or goal to dictate the use of space. Y’know, higher stakes. Just using random images and spacing them out didn’t really get the juices flowing for me.

Derek marked mine up which revealed 3 crosses. Didn’t even mean to do that… so in a way I guess I was successful at telling the loose story.

Derek’s feedback on this is where the purpose of the lesson started making more sense to me. Another Whoops.

Sort of fumbled this lesson but hey, that’s a part of learning. You gotta eat sh*t every once in awhile in order to get better.

Contrast

This lesson helped me gain a better understanding of how to use weight, how to use spacing, and how to create hierarchy in interesting ways.

We watched a video where these design teachers analyze students work and it was really eye-opening. Some of the work was super ambitious. Sometimes they were practically unreadable but still looked cool. I guess it depends on how crucial the information is? They would also alter the documents and rearrange them in a more refined way. Now everything I look at, I analyze it in the same way. I just want to get my hands on some interesting content so that I can design some unique layouts.

Also read the typography rulebook. I broke several of them. Another whoops .

Research and Employ

Now we have to choose a design, mark it up, and analyze it. I wanted to pick an interesting/abstract design so I went to Site Inspire and started searching til something caught my eye. Landed on this awesome design, took a screenshot and threw it in Affinity.

I changed the image to black and white so I can get a better sense of the weight and dimensional aspects. For this design it’s pretty obvious but still good practice.

Next I set the horizontal and vertical guides (those thin blue lines) to see how the different elements line up with each other. I remember at first glance thinking the designer just positioned the elements at random but now I can clearly see the relationship between the elements (those thick blue lines).

Instead of using a ruler to measure the spacing I used block nodes (those pink boxes). The first block I made was for the margin in the upper left corner. After that I copied it and started searching for other spots where block or multiplied versions of that box would fit.

The numbers with the arrows on the side indicate hierarchy. What do your eyes see first when you look at this? Where do your eyes go next? Interesting how this person does it. Take note of the list styling. Those headers, the numbers, the superscript — pretty unique but it works. Usually people make headers bigger than everything else but I think the goal of the designer was to have the emphasis be on their actual work.

Thought I was finished with this lesson til…

Alright, probably would’ve picked a less crazy site but here it goes… check out my extremely sad chaotic version.

Even though I failed miserably I learned a ton of stuff. Specifically how to make units of measure more dynamic and how to wield the power of the transform property. I'm sure if I presented this as something to collaborate on every developer would be like “wtf is this?” This is just one of many wtf moments. I look forward to having more. I eventually reached a point where I lost control of the design and started haphazardly positioning the elements but hey, it’s working and I learned a lot.

How to Kill a City

For this weeks ~~boilerplate~~ template I took an awesome layout I found on Dribbble by Marko Cvijetic and turned it into a responsive webpage. This was fun and challenging. Derek helped me out with this a lot. At first I thought we could only do it with grid but he showed me how it could be done with flexbox, the order property and display: none.

This was the original layout I had I had to work with…

This will be the layout for the 1200px+ version but now I have to create a mid-size version (700px+) and a mobile-size (-700px). Here’s what I came up with…

Definitely learned a lot with this one too. Managing the resizing of the paragraph and images created some ugly stretching but at least I got some good practice in. Would probably help if all the images had the same dimensions to begin with too. Another whoops.

Oh yeah, also learned about the aria-hidden attribute for screen readers. Swapping out display: none for the duplicated paragraphs would’ve been a problem. Another useful thing to add to the checklist.

Welp that’s the gist. Hope you liked it.

✌️ P E A C E ✌️

Perpetual Education: Week 5

Jose Negrete — Mon, 29 Nov 2021 21:16:30 +0000

Disclaimer: This week is a little different because there were no lessons in light of Thanksgiving.

Howdy,

It’s been raining 24/7 in PDX. What else is new though? I’m drinking this tea called Tension Tamer. I doesn’t work. Listening to William Basinski. This in fact — does work.

Looks like I got some new subscribers that aren’t associated with PE so that’s awesome. Welcome! Hope you find this useful and insightful. Don’t hesitate to reach out for further information. I’m an open book.

So anyways, here is the gist…

Consolidation Meeting

Now that I’m 1/3 through through the course, it’s a good time to analyze my progress and build a strategy so that I can achieve my goals. To do this each student has a personal meeting with Derek & Ivy (Divy). Our meeting lasted 2 hours and we went over everything in-depth. So far it’s been hard to choose which route to take (front-end, UI/UX, graphic design, etc) because I find them all fascinating. Maybe I could fulfill this by being a one man shop for small businesses? Honestly I think it’ll be more so about finding a job and holding on for dear life. I could also see the one man shop idea biting me in the ass later. Like most things though, i’m pretty sure theres some harsh realities waiting to crush my soul. Still early in the game.

Turkey Week

We didn’t get any lessons this past week because too many students were busy with Thanksgiving. At first I was a little worried this might slow down my momentum but I kept busy by revisiting a past project, building my own boilerplate template, and doing some PE exercises that had been on the back burner.

Oak Boilerplate

Going forward, I’ll be making a new boilerplate template once a week. This is good practice for everything I’ve learned so far. Just find a responsive layout that’s awesome and try and recreate it using the skills you have. Now that I have this boilerplate I can mix and match things, quickly fill in the blanks with client info, color, image ideas, etc all super fast.

For my first one I chose this page from Oak. I figured why not just look at a site from an awesome design agency (that I’d like to work for) and build a template based around that. The goal of all this is to get a job so I’ll show them my version of how I would do the job. This was a good challenge for a few reasons: 12 modules with different arrangements at every media query while keeping perfect alignment with all the text content. Definitely ran into some issues along the way but I was able to dig myself out of every hole with a quick google search. Something that was very useful was using the toggle device toolbar in Chrome Dev Tools. I set up my page and their page while using keyboard shortcuts to jump between both tabs for comparison throughout the project. Sort of a more robust version of the CodePen interface. Thought I did pretty good. Check it here.

Where do you find inspiration for web design?

These are my go to:

Feedback From the Outside World

What random peeps said about Intergalactic Plant World:

Jacob Leech’s response to my copycat version of his site:

The response to IGW makes me start thinking that I should ditch this whole web design nonsense and start putting succulents in random objects I find at the junkyard.

Alpha-Net Ideas

Started generating some ideas for the student directory. Also messed around with blending and blurring colors. Affinity is too much fun.

Some Cool Designer:

Marko Cvijetic
1. Love his layouts. Will probably try to bring a couple of them to life.
Mariano Pascual
1. I’ve been noticing the trend of making your website looks like the old school Mac OS. This website is pure insanity though. I love it. Would be fun to make my own version of this.
Kristen Kwong
1. Similar design to Mariano’s but she’s more like the Athena to his Hades.

Update to Web Portal

Since we had the week off I was able to revisit an old project. For the new version of the web portal I wanted to make the layout somewhat reminiscent of the yellow pages where they have the title then a bunch of periods.

I also wanted to add an arrow at the end to signify that it’s a link. To do this I used the ::after pseudo-element on the link title and within the rule added a bunch of periods to the content property. To ensure the title and the arrow stay at opposite ends I used display: flex and justify-content: space-between. Worked out pretty good.

Next up was figuring out the side navigation bar. I always liked twitters set up with this so I thought’d I’d create my own version. Definitely some issues but I’ll fine tune it later. Check it here.

Welp, that’s all I got for you this week. Take it or leave it. ✌️

Perpetual Education: Week 4

Jose Negrete — Tue, 23 Nov 2021 22:49:48 +0000

Hey! I’m finally caught up with Alpha-3! I can finally go outside. I can finally see my friends and family... on second thought, nah. I think I’ll just chill at my computer. Who needs reality when you got an internet connection? Back to the surreal… in a silent way.

Here’s the Gist:

Small Biz Day 1

This was really fun. We got a list of mock clients to choose from. The options were really all over the place. You could do one for a gym, dermatologist, etc. Didn’t find anything that really sparked much interest til I scrolled down to Intergalactic Plant World. All the other mock clients at least had some detail and some direction they wanted to go in but IGW was pretty open-ended. This is what I had to work with:

Succulent Shop
Three casualties from the 60s named Jim
They want to let the public know they’re open for business

I kind of let my imagination run wild. Used a bit of elevated life experiences mixed in with a bit of pop culture references to do the research. Ended up making a pretty elaborate backstory. Usually it’s just a matter of asking yourself the right questions and filling in the blanks. That way you don’t get stuck. I absolutely love this kind of stuff. Didn’t have to slog through this at all. Just throw on a good album and start writing.

Small Biz Day 2

Alright, now I got a lot to work with! Now it’s time to piece together some visual ideas. To do this I first made a mood board. My google search history is pretty funny now — psychedelic succulents, 3 old hippies, old beat-up airstream, succulent phone, trippy colors, etc. This is what I came up with:

Something I always look forward to is choosing the font. I love going on Google Fonts and seeing what’s out there. To do this I typed the company name to see how it looked. I made sure to scroll at a moderate to fast-pace so I can sort of trick myself into seeing what naturally stands out instead of overthinking it. Whenever I came across a good one I would take a screenshot.

I definitely knew I wanted to use that skull with the succulents sticking out. That was sort of the kernel for the whole design. Thinking “I know this fits, now how do I build around this?” I thought the skull was perfect because it reminded me of the skull and roses thing that’s associated with the Grateful Dead. Would look awesome on a t-shirt or as a bumper sticker too. So I took all those fonts and mixed and matched them with the skull til I found something that fit. I ended up choosing Megrim. On top of it looking great with the skull, I like the full-on triangular shape of the A’s and W’s. Reminded me of those triangular planters you often see succulents in. Also the word “intergalactic” seems fitting for it too.

Small Biz Day 3

Ok, so now I got some visual ideas and some backstory to work with. How do we start building this site? I cherry-picked the best parts and most crucial information from the research and broke it down into what would be the common sections of a website. While referencing the doc I came up with this:

So I got my navbar/header and the basic structure of the IGW website. Now it’s time to start filling in the blanks with by writing the copy. I went a little overboard. Had to cut out a bunch of stuff but it was a lot of fun.

My first instinct was to go crazy with the design — add a bunch of crazy colors, use the wackiest fonts I could find, etc — but I decided to try and make a site that was the happy medium. Something that would appeal to both the kind of people the 3 Jims hang with as well as the general public.

Small Biz Day 4

I thought the first round went pretty good. Got some good feedback about the subheadings font from Derek. I decided to hold off on coding the site so I could just look at it, step away and gather my thoughts. Ended up making a list of subtle changes for the 2nd and last version.

After my final submission Derek showed me the work of past students who did the same mock client project. It was super interesting to see how they went about it. Sort of made me second guess my design choices.

Boilerplate

With the mock client project behind me I moved onto building my first boilerplate doc(s). I have always asked myself “why do I keep writing the same code over and over again?” Now I got a great skeleton to work with. All the images will be responsive, all the anchor links have will be styled properly if used in a paragraph or as a block-level element. Also got my meyer reset so I have a blank canvas to work with. Would be fun to build different types of boilerplate for certain purposes.

Version Control

I had a little bit of experience doing this with terminal in a 1-day workshop I took a few months ago. Terminal kinda freaked me out. It felt so fragile, like you could erase everything with one wrong move. Experienced developers always say that it’s a little intimidating at first but you get used to the workflow over time. I haven’t interacted with it enough to get comfortable but let me tell you, using Tower has been a breeze so far. No confusion at all, super user-friendly, easy to navigate. Thank you Tower. Now I got to get all those green squares on my GitHub so the recruiters think I’m legit.

Blend Modes in Affinity Designer

These are great if you want to use an image background but also want to use a lot of text at the same. We had to create a few different designs. Sort of goofed around on this one. This was my favorite of the 3 I made.

SVGs

After this, the next couple lessons were focused on SVGs. How to create them and how to alter them with HTML and CSS. Super fun but damn, SVG code is such an eyesore. I got a little more experience using the pen tool. For the first one I drew a duck. For the second one I drew a cloud monster. I wasn’t able to alter the fill colors for the duck because my dumb ass didn’t close any of the strokes into shapes. Whoops!

Filling In The Gaps

Still on break from coding, our next lesson was about mentally resetting and retain focus. Ask myself questions like “what I want?” and “how do I get there?” — y’know, stuff like that. It’s easy to get carried away and distracted learning all this stuff so it was nice to spend some time decluttering. I actually wrote a pretty epic blog post about it. Check it here!

Planning a Layout

The structure of the lessons changed a bit to a more code-along style (e.g. Derek would give us a prompt, pause the video and do your code, then see how he does it). Pretty standard method but it was good to do this AFTER you have a solid understanding of the code you’re working on. You can better compare and contrast as opposed to straight-up copying. So many teachers do this from the get-go. Feels like your learning but you’re really just copying. The second you work outside of those type of lessons you’re screwed.

Flexbox

We finally get to use this! Makes positioning and organizing so much easier. It looks a little strange at first but once you start using it and messing with different properties it all starts making sense. I’ve been referencing this since day 1. Just keep it open in a window right next to your CodePen and start experimenting. Although I’m still pretty new, flexbox has been a great help so far.

So now that we got flexbox we had to create modules and make them responsive. I thought I did an alright job but then I realized I forgot to factor in things like different amounts of text within the module and wrapping it in it’s own container so I could easily copy/paste it into other docs. Kind of flubbed this one. Whoops.

You live, you learn.

Alanis Morissette

Typography

Whoa! Another break from coding. This time we learned about typography. Derek let me do a test run of his new version of the lesson. Pretty cool! I had to work within the limits of using one font and one font size. Even with those limitations there’s a lot you can do and uncover. For this I tried different variations of Futura at 16px.

CSS Positions

Next lesson we learned about the different values of the position property. Some were a little hard to wrap my head around. Just one of those things you have to dive head first into. Through trial and error you’ll eventually get it. Awesome to start making sticky navbars though. Slowly being introduced to this stuff makes you really appreciate it and make the most of it.

Building a Super Responsive Layout

Now that we’ve learned a few new things, we get to put it all together and tackle the next challenge — designing a super responsive layout. At the start of every challenge I usually get a little flustered but this time around I felt pretty confident. As the CSS reached nearly 300 lines I didn’t let it overwhelm me. In the past I’d usually freak out if I don’t fully understand every line of code or if something went wrong and I couldn’t immediately figure it out. This time around I was able to troubleshoot and zero-in on certain parts of the code that needed a little extra TLC. I kind of surprised myself by doing it all in one sitting. Instead of wanting to get it done I became mildly obsessed with making a good working version of it.

This challenge required a few iterations. Again, it was nice to make a good working version the first time around, take a break, take some notes, and get back to it a few hours later. For the 2nd and last version I put flexbox on the whole body for each section (never thought to do that), changed some of the HTML tags, and added this cool wavy underline text-decoration to links for the small and medium screen sizes.

How to Ask or Answer a Question

Moving onto the next lesson we learned about resources for finding answers and how to go about asking a technical question. Every developer I meet tells me this is a huge part of the job and learning process. Looks like I got to get used to using StackOverflow. That’s definitely a problem with me. I get lost trying to figure it out myself when I could’ve saved myself hours by simply asking the right question. On top of that, it’s good to be active by answering other peoples questions. This practice can help you reinforce the things you’ve already learned.

MAMP? PHP? New World Ahead…

Uh-oh, what’s this? A new programming language? Hello PHP. This is something I’m completely unfamiliar with. It’ll be interesting to see how a scripting language will be integrated into everything else we’ve learned so far. We’ve only dipped our toes into PHP by using it to organize, compartmentalize, and stitch together pieces of HTML. I can definitely see how it could be useful. I guess all I can say right now is I’m excited to see what’s next for this course. Especially since I’m caught up now and can finally learn at the same pace as the rest of the class.

Albums listened to while writing this:

In a Silent Way
Filles de Kilimanjaro
Bitches Brew

That’s the gist! Goodbye for now!

Perpetual Education: Week 3

Jose Negrete — Tue, 23 Nov 2021 22:47:53 +0000

What’s updog?

Jim Halpert

I’m listening to Elton John. What’s wrong with me? 14 year old Jose would be ashamed of what I’ve become. Sorry… I can’t write with that dude in the background. Let’s put on a classic.

Picking up where we left off…

We’ve moved from using the <style> attributes within HTML tags to using the actual <style> tag the in the head of the HTML doc. This is our introduction to the CSS rule. Much easier on the eyes. I always find it odd that people who are comfortable with JavaScript find CSS confusing. To me this syntax is the most straightforward. I remember the first time I saw the CSS rule and thinking “this makes sense.” It’s actually a lot of fun so it’s easy to get carried away. Sometimes I’ll go nuts and style an element to the point where it makes more sense to just throw together an image in Affinity Designer.

Next up was our first challenge. For this we had to create a multi-page site with a nested file structure. Nothing too crazy. Some trial and error. Lots of page refreshing and questioning if you put the 2 periods and slash in the right order, in the right place — welcome to coding. Aside from that we had to style each page slightly differently. For mine I referenced this awesome color palette generator and threw in some linear-gradients to accent each block element. If you’re interested you can check it here.

For the next lesson we got introduced to the pen tool in Affinity Designer and CodePen:

The Pen Tool
1. Takes some getting used to.
2. I can see it’s power but I suck at it right now.
3. Slowly gaining a natural sense of how to use it.
4. Created this creepy ghost with hollow eyes (see fig. 1). Don’t judge me.
CodePen
1. Love this site. Great for workshopping ideas, collaboration, inspiration, etc.
2. Had to create text with an image inside it
3. I chose CAGE and put a different image of the controversial Nicolas Cage inside each letter.
4. Chose a font with a thick width so I could get his face in there.
5. Messed with some CSS properties I don’t fully understand but hey! I got a working model. Looks cool too. Check it here.
6. He looks so “at home” with a fire background.
Had to create a pen using the float: property
1. Never used this before. I find it useful but a lot of devs don’t seem too stoked on this.
2. Created my own version of this page from the Forest Park website.
3. Used an image of the Olmstead bros for the float: property.
4. Interested? Check it here.

Hello <iframe>s and hash links. Got familiarized with embedding the YouTube videos on a webpage. <iframe>s have their use but Derek showed us how if used incorrectly they can mess up the google search for your site. Hash links are pretty standard if you’re setting up a single page site. Easy and intuitive. Added some smooth scrolling with hash links to the Dead Moon redesign I’m having fun with. Check it here.

Next up we learned about CSS resets. There’s all these automated sizes and margins when you don’t reset, so it’s nice to build from scratch and have full control. Along with that we learned about some useful CSS properties like letter-spacing: and line-height:. Never thought twice about these 2 things but now I can’t unsee it. Also learned how to combine selectors to style multiple elements at the same time. For the sake of practice, I got a little wacky with styling this page.

Like I’ve said in the past, some days at PE aren’t completely buried in the computer. To take a break from coding we learned about the history of printing. We watched 3 documentaries. All really cool and interesting. I really enjoyed the last one on Linotype. It was a bit sad seeing it get phased out in favor of computers but you can’t argue when computers can pump out 1,000 lines a minute whereas the Linotype machine can only do 14. The scene with the guy using the machine one last time was particularly sad. He’s just drags his fingers slowly across the keys, trying to make the most of it.

Derek took a day off so Drake could teach us about box-sizing:. Thanks Drake.

Now that we’re a bit more comfortable using CSS and HTML we were tasked with styling an article. The goal was to try and make it look legit and fun to read. I started thinking of random topics I’m interested in and looked up an article on Slab City. I took the text and photos from this NPR article and styled it in my own way. I initially made a colored version but then noticed that that we were suppose to make it black and white. Whoops. Did a quick fix. Always knew that double border would look cool at some point. Adjusted the font for SLAB in the title too. Did a google search for “CSS make photo grey” and up came the MDN doc for the filter: property. Pretty cool.

Believe it or not, Bill Murray hired me to make his personal site. Well… Derek pretended to be him — same thing though. William (as his friends call him) has no taste. You’d figure all that time spent with Wes Anderson would have a profound effect on him but I guess not. This exercise was just a fun intro to what it might be like working with a client. I look forward to deleting these from my CodePen archive. Marble backgrounds? 🤮

Moving onto semantic markup and the inner-column — a good standard way of designing a page. Basically you set the content of each display: block; element inside a <div> to make an inner-column. Looks nice and organized when you put a <border: 1px solid red;> around everything.

After learning this William( 🤡 ) contacted me again to update his site. He let his friend take a stab at it. She did pretty good but I had to do a few quick fixes. This was more so practice for semantic markup, creating an inner-column, and spotting redundant CSS declarations.

Now we’re jumping from CodePen and back into Sublime to revisit our multi-page site. When we first built this it had no styling but now we’re tasked with creating one style sheet that can be applied to every page. Kept it pretty simple for this one. Just used a subtle color combo and the Roboto font. Really basic styling depending on font-size: and font-weight:. I like it. Hey! I added my movie lists to the site if you’re ever bored and don’t know what to watch.

Following this we had another easygoing day. This time we watched a documentary on Helvetica. Another one of the those things I can’t unsee now that I’m aware of it. I thought I was a nerd but holy crap, I got nothing on these typography nerds. Some of those scenes reminded me of Spinal Tap and King of Kong. I like the scene where David Carson (sort of the anti-Helvetica dude) looks at the word caffeinated (spelled in Helvetica) and says, “that doesn’t say caffeinated!”

Back to coding. Now we get to research, plan, and execute a project. We had to do a lot (for me) within the time constraints. This was fun but some of my code is super wonky. Hey, desperate times call for desperate syntax. For this one I made a tame version of Jacob Leach’s personal site. Here’s my sad version.

Welp, that’s the gist. See ya again next week! ✌️

…craving some Elton John.

Perpetual Education: Week 2

Jose Negrete — Tue, 23 Nov 2021 22:38:55 +0000

Yellow. Lots has happened. I’m listening to Eluvium while drinking some wake up juice. Thunder strikes Rip City. It’s awesome. The past week has been quite an (academically) eventful week.

Here’s what we jumped into:

First we learned the very basics of the operating system. I felt pretty comfortable with this already but it’s always nice to go back to square one and retrace your steps. Reminds you of the flow of things. There’s so much I don’t even think about when using the operating system. It’s just kind of “there” and reliable. Probably not a good way to be about anything you hope to specialize in.

We also did a test run of the terminal. Looks scary but it’s really not. Just have to be careful. Most experienced devs I talk to say it just takes time to get used to the flow. In the meantime I’ll watch my step so I don’t destroy everything.

Some days at PE are pretty mellow. One of them was spent just surfing the web and seeing what aspects of designs spoke to us. Visual tricks and what not. I don’t know if low effort is the word. It’s just about experiencing things and effectively expressing that experience. Working out those soft skills that most computer nerds lack.

So we’re jumping all over the place now. The OS, the browser, the real world, and now… Google Drive. Freaking awesome tool for the modern day. Screw you MS suite. We got all these tools for free and their arguably better and easier to use. Sorry, I’ll stop ranting. So anyways, Drive is dope. You can easily collaborate, set styles, yada yada yada… damn you Bill Gates. I hope the Divorce wipes you out.

OK. Now we’re comfortable with creating docs. Let’s delve into an actual programming language. The old friend never knew you had, the one we take for granted, the web whisperer — HTML. It’s like the Babe Ruth of programming languages. Remember that google doc? Well let’s turn it into a web page. Some simple tags will do the trick — yada, yada, yada and… voila! We got a webpage. It’s actually not too far removed from creating a google doc or even writing this blog post. Baby steps.

Welcome to HTML land. Let’s take it up a notch and build a 4-page site.

<a href=“another-page.html”>no problem</a>.

OK Smart Guy. Try to make a web portal.

<ul>
 <li>
  <a href=“https://www.nytimes.com”>oh, you mean like this</a>
 </li>
</ul>

It’s easy to fall down a rabbit hole if you don’t switch it up. While on break from HTML we focused on writing and networking skills. For this we made use of Whimsical. My first time using it. Super easy. My thought process can easily get cluttered and this nicely organizes it for me. Visual format. Not too much effort. All my thoughts and ideas right there. For the writing part we talked about how crucial it is learn in public. It’s amazing how much you learn about yourself when you put it down on paper. Writing is a lifelong skill that’s worth refining and investing in. This isn’t going anywhere.

Alright, back to HTML land. WTF is an FTP? Oh cool, I can bring my sad little agoraphobic HTML file to to web. This is awesome! This lesson was really fun because got tasked with building a webpage using only the tools that were available in 1992. I’m a total 90s kid so this was fun. I used a background from the horrible film, Lawnmower Man. I created the header to look like minesweeper. For the hyper links I just google image searched “cheesy 90s digital art.” The goal was to make it as ugly as possible and I think I did pretty good.

To Affinity and beyond. Affinity Designer is the bee’s knees (if you please). This program is dangerous in the best way possible. I can get so lost having fun with this thing. There are so many incredible tools to explore. Even going beyond PE and watching tutorials started to set me off-course. Although it’s great that I’m loving this program, I have to stay focused for the sake developing other skills. Needless to say, I’ll definitely be looking forward to these sections.

Obstacles, Blockers:

Nothing too crazy. I had some trouble setting up Google Drive for desktop. This lesson was a bit convoluted due to the timing of Google Drive changing their whole application right as Alpha 3 (the current class) was taking lesson. Derek made an updated video but it was kind of a mess. You could tell he was scrambling. The video made me think it was a way bigger deal than it needed to be so I didn’t touch it til I got some help because I was afraid I might screw up the whole file sharing process. What’s cool is that Derek is constantly updating the course, listens to his students, and actively seeks feedback. He’s aware of the issues with this particular lesson and will update it. Really not a significant obstacle since I have access to a mentor and a bunch of classmates to help me in the slack if needed. Word to the wise: Don’t be afraid to ask for help.

See you again next week freaks!

Perpetual Education: Week 1

Jose Negrete — Tue, 23 Nov 2021 22:32:28 +0000

Wassup nerds!

I’m currently studying web design, product design, UX design, visual design, who knows? Some sort of design. It’s all vague and mysterious right now. Everything kind of blends together and it’s fascinating.

So a little background:

About a year ago I did a ton of research and self-examination to find out what my next step should be. I made list after list of what I want/need, took multiple personality tests, consulted the trolls at Reddit, and had a lot of embarrassing moments alone in the woods. After all that I somehow landed on becoming a web developer.

I originally started out on the self-taught path using various resources like freeCodeCamp, The Odin Project, Udemy, etc. got comfortable using the very basics of the main front-end languages. Although I had some success I would always hit a wall at some point and wouldn’t code for a month or more at a time. Eventually I would regain confidence and start from scratch again. This has happened like 4 times now.

I came to the realization that I couldn’t do this alone so I started investigating all the bootcamps out there. I was always a little skeptical of them because I would always find conflicting information in my research. Then I came across this video. It was hilarious and also confirmed my suspicions. Who is this dude?

Enter Perpetual Education.

After watching that video I decided to look into their program, Design for the Web. I got the impression that it was completely different from the other bootcamps out there. I wouldn’t even lump it in with the other bootcamps. The layout of the course isn’t overwhelming at all. Just one lesson for 3 hours a day so you can solely focus and retain what you learned as opposed to the other bootcamps that just bombard you with 10 hours of dry (extremely dry) information a day. The course takes 6 months as opposed to the standard 3 months. Much more practical. What’s really cool is that you can start the program without a clear vision of what exact role you want and discover what speaks to you in the process.

Long story short, I started the program 4 days ago and it has been really interesting so far.

So far:

Perpetual Education is a true “zero to hero” program. Before you even start coding you do a bunch of self-examination. Through doing this you find out a lot about yourself, how you interact with things, how you see things and how your memory works. There were definitely moments where I was like “why are we doing this?” but then you see how this is all relative to programming.

Where I struggled the most were the lessons where we had imagine what it would be like to discover something like a computer or a toothbrush for the first time and guess how we’d interact with it. Thought it would be easy but it was surprisingly harder than I expected.

In the 3rd lesson we write about what ideas we have for design, programming, apps, etc. Derek (PE Principal) expressed interest in helping me with one of my ideas which is awesome. We’ll see how it goes. Been going at it solo for a year now so it’ll be awesome to at least get some feedback and collaborate with other people who are sort of in the same boat.

I started the program a little later than everyone else so I’m playing catch up right now. I’ve been doing 2 - 3 lessons a day when it’s meant to be 1 lesson a day. I’ll be really stoked once I finally get up to speed with the rest of the class. Hopefully in time for the collaborative parts.

FYI: If you have any interest in Perpetual Education and want a student’s perspective, this is your resource. I’ll be posting on a weekly basis.

Wish me luck.