DEV Community

Jennifer Tieu
Jennifer Tieu

Posted on • Updated on

Self-Taught Developer Journal, Day 13: Portfolio Building, TOP Landing Page Cont., CS50 Final Set-Up

Today...

Thinking Through The Odin Project Landing Page cont.

The Odin Project Project Landing Page Full Design Image
I'm adding the elements for the first section containing the navigation bar, hero image, and hero text. I'm dividing the navigation bar and hero elements into two container classes.

  • For the navigation container class, the elements are all anchor elements with the right links as items in an unordered list element and the header logo as its own element.

  • For the hero container class, I made two sub containers, a left container for the text and button elements and a right container for the image.

Continuing to the second section, the image section contains a heading and four box images with text underneath. I added the heading as its own element then made a container for the four box images with text. Then I also made a container for each of the four box image with text.

The third section, I added the quote and the quote's author in their own paragraph element.

The fourth section, I added a container for the call to action then nested the text and button element within.

Lastly, I added the footer text for the last element.

Next, I will be using CSS to style the page.

Portfolio Site

I signed up for Tech Rally portfolio course after listening to the Portfolio Twitter space yesterday. I realized I might be jumping ahead by making a site when I don't have any projects ready to show, but I think I wanted to have something ready to start putting myself out there.

I have been enjoying the course so far. It was my first time downloading a design template and editing it. I liked how he included using git and GitHub.

When we got to the About section I had to pause. It was hard for me to think what to put into word about what I want to do as a developer concisely. I'm hoping to reflect and come back to it later.

CS50 Final Set Up

I haven't mentioned it much on my blog journal yet, but I've been working on my CS50 final project and talking about it on my Twitter for #100DaysOfCode. Now, I have decided to include it in my blog because I am building a web application and I think it will be something I hope to include in my developer portfolio.

Today, I migrated it off the CS50 IDE into a GitHub repo and working on setting up the project in Visual Studio Code. The project is built using Flask and I've never used Flask outside of the CS50 IDE before so right now I'm reading through the Flask Tutorial documentation for VS Code.

Resources

CS50
The Odin Project Landing Page Project

Day 12: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-12-portfolio-building-top-landing-page-cont-4m7p
Please refer to Starting My Self-Taught Developer Journey for context.

Discussion (0)