buildingAPortfolioWebsite.part1htmlcss

listeningTo: Gone Away Five Finger Death Punch

inRealLife: Real life is meshing pretty well with work life and applies to this post, yay! I have decided to officially start a #100DaysofCode challenge – for those who don’t know, you commit to practice learning to code for, you got it, 100 days in a row. There is probably science behind doing something for 100 days to make a habit, to learn, but I don’t know too much about that. What I do know is I have a personal (and professional) goal to work on a personal portfolio in the hopes of one day (soon?) taking on small freelance projects and get some extra money coming in doing something I am personally excited and interested about. I love projects!

whatIReadThisWeek: I haven’t read much this week. I am on day 11 of the challenge, mentioned above, and have been relying a lot on one Udemy course – Full Stack Web Developer Bootcamp 2019 – which covers HTML 5, CSS s, JavaScript, Bootstrap 4, PHP, and MySQL. I’m just at the HTML/CSS part, but I know JS, BS4, and PHP will also immensely help me at work so it’s a win-win.

I also listened to my pay-it-forwarder fellow tester, Hilary Weaver-Robb’s Ministry of Testing talk Digging In: Getting Familiar with the Code to be a Better Tester, which is now up on the MoT Dojo without needing a paid account! My computer crashed and died 1/2 way through the talk (hello blue screen of death) but I was able to finish it up by squinting at the screen on my phone and got the gist (and am happy to have the link to the recording because I’m sure things have been missed). My biggest takeaways from the talk was about using Static Analysis tools, which we have at work but I am too scared to touch, and how to use the Inspector toolbar in Chrome, specifically looking at the Network tab to see what kind of silent errors may be occurring. I’ve already put this into practice and found an error that’s probably been around forever!

whatILearnedThisWeek: I got through all of the HTML tutorials, which are really just a reminder, I feel very confident in HTML, and fairly confident in CSS, but am still working through all the videos to get the full picture. I’m a little disappointed in the tutorials, I feel like I’m relying a lot on outside information I have about the languages than is being covered in the videos, but, I’m hoping they are more detailed as we get into the more complicated languages.

The mid-point project is to replicate a personal portfolio website. The course just has you watch along as the instructor does it on her screen, but, I like to make things hard on myself, so I paused the videos at this point, looked at the source example provided by the course, and decided to build it up myself.

I immediately ran into a bunch of problems. This was my first iteration. I spent over an hour trying to center those social account icons and style them so they didn’t look like hyperlinks. I gave up, posted my obligatory #100DaysOfCode tweet, and called it a night. The next day, I really focused hard on this, watched the tutorial clip where the instructor showed how to do it, and, ah ha! I don’t have a screenshot exactly of that section, but in my code I was trying to style the social-icon class, which is in a div wrapped around all the icons, when I should have been adding the style to the social-icon a elements – just the links. Though some styles apply to the li, too. Once it clicked that different styles had to be defined for different elements, and it wasn’t as easy as just applying it to the parent div, I had:

.social-media li {
     list-style: none;
     display: inline-block;
     text-decoration: none;
     font-size: 2em;
}

.social-media a {
     color: black;
     height: 40px;
     width: 40px;
     text-align: center;
     padding: 8px;
     transition: all 0.2s ease-in;
}
.social-media a:hover {
     background: darkseagreen;
     font-weight: 900px; 
     color: white;
} 

My next issue was trying to align my columns. In the middle of the portfolio, I wanted to list my positions in the left column, and explanatory text (just placeholder for now) in the right. Here was my first stab:

For the life of me I could NOT get that second column aligned with the first. I still have no idea where I went wrong. (You’ll see I also didn’t fix the social icons at this point, which was my second day and ~3rd hour working on this page). I quit, again, for the night, you will continue to be Future Amanda’s problem.

The next day, day 3 of this project, and day 10 of the challenge, I finally admitted I did not know everything, despite studying CSS on and off for a few years, so I proceeded with the tutorials and watched as the instructor was making her portfolio look like the example. At one point, she couldn’t remember the padding on something, and she checked the Chrome Dev Tools to find out. Another ah ha! I paused the video, went to the example they provided, and inspected the crap out of it. I was able to solve my alignment issue once and for all!

For starters, I created two new classes: col-narrow (for the left column) and col-wide (for the right). This could apply to both the bio section and work experience section, beautiful. Next was to apply a margin width to the whole container (or, both containers, since I want them to match). I forgot you can do this. I was struggling with padding and margins for each element and crying (almost for real) that they wouldn’t “just be right”. But, hey, now they were!

.content-wrap {
     display: block;
     width: 90%; 
     overflow: hidden;
}

.col-narrow {
     float: left;
     overflow: hidden;
     margin-top: 10px;
     clear:both;
     margin-left: 50px;
     text-align: right;
}

.col-wide {
     float: right;
     text-align: justify;
     overflow: hidden;
     width: 70%;
}

Once I got past the container width, I was able to define sizes to both the left and right columns, and have them aligned and uniform, just the way I like it. I’m still not sure what overflow:hidden; or overflow:auto; actually mean, but as I was watching the instructor work through this section, she kept adding them, and once I did, too, everything popped into place. Perfect magic. (Except for the magic of teaching, because, as I said, there is less teaching and more “hey look what I can do, you probably can too”).

The other very useful definition I put in there was clear:both;. This refers to the floats – one column would continue to float to the left of the block (see content-wrap where I define the section as being a block*), float:right; makes sure that content floats to the right of the block, but to make sure they don’t overlap, which was happening A LOT to me, you have to make sure one or the other has clear:both;. Magic, come on.

I also got the social icon fix in at this point, since I was feeling big and bad and confident at this point. (Amazing what some confidence can do). And I added a little color. I’m not a colorful person… like at all… but I felt like since this is practicing design that maybe some color-work is a good idea. I also have a hover event on those social icons and they turn that same green, which is in the code snippet above.

So, here we are! I want to add a background to the My Work Experience section, as well as one more section below with contact information, and a footer. Follow along on Twitter if you want real-time project updates!

whatIAmThinkingAbout: I still see places where my code can be cleaner, but I feel like getting the gist of it, for the purposes of this project, is good enough. I’m really proud of what I accomplished in 3 days, and I am keeping a list of my questions that come up, and their resolution, so I can hopefully report back if I find anything noteworthy.

I’m not sure if there will be any reason to use PHP or MySQL on a personal portfolio page like this, but I will certainly be adding JavaScript elements when I start those tutorials. I’m excited to see how it works out, and excited to publish it eventually and use it to get some business in the future.

recommendationsAndTakeAways: Even though I don’t love the course I’m working through, I do think it’s important to stick with it. There are little gems in there that just make things click. People study this stuff for years, there are so many resources out there to help, it’s useful to remember that I don’t need to memorize everything, I just need to know enough to know what I need to look up – it’s been a good process so far and I’m looking forward to the end result.