Start Your Developer Journey Building Your Portfolio - SHOW OFF

PART V - SHOW OFF WHAT YOU HAVE

This is the third of a series of lessons to help you on your journey to being a developer without a computer science degree. Start here for an understanding of how we got here.

HTML

There are many more elements and tools to use to achieve our project goals. The following are a few:

• Line breaks, <br> and horizontal rules, <hr>
• <span></span>, <strong></strong> for bold formatting, <em></em> for italic formatting, <header></header> for page head, <nav></nav> for navigation usually containing links to sections of a page or to other pages, <main></main> for page content, <footer></footer> for page foot
• <article></article>,<section></section>,<aside></aside> to section a page
• Form elements: <label></label>,<input/>,<textarea></textarea>,<select></select>`
  • Form submission and handling with action, method and target attributes
  • Input types in form elements(text, password, radio, checkbox, etc.)
• Comments are notes that are not displayed on the website but help you and other people understand your code.
• Multimedia elements video, audio, canvas, svg, and iframe (for external content)
• Geolocation API for location-aware applications
• Drag and Drop API for interactive interfaces
• Local Storage and Session Storage for client-side data
• SEO best practices with HTML
• Performance optimization techniques
• HTML validation and debugging tools

   <header>
     <h1>Website Header</h1>
   </header>
   <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </nav>
   <section>
     <!-- This is a sample section.
  This is a comment and will not be displayed on the webpage -->
     <h2>About Us</h2>
     <p>Content about the website.</p>
     <form action="/page_to_process_the_form.php" method="POST" target="_blank">
       <label for="id_name">Name:</label>
       <input type="text" id="id_name" name="name"><br>
       <label for="id_email">Email:</label>
       <input type="email" id="id_email" name="email"><br>
       <label for="id_male">
        <input type="radio" name="sex" id="id_male">Male
       </label>
      <label for="id_female">
        <input type="radio" name="sex" id="id_female">Female
      </label>
       <br>
       <input type="submit" value="Submit">
     </form>
   </section>
   <footer>
     <p>&copy; 2023 Your Website</p>
   </footer>

CSS

Comments
This is a comment in CSS /* Enlarge by 20% */. As mentioned earlier, comments are not processed; they are notes for the developer and others.

Responsive Web Design
Responsive web designs make web pages user-friendly.

• Media queries and responsive breakpoints are used to make webpage look good no matter the screen size. The following code makes all paragraphs on the page have lightgreen background when the screen size is at most 480px(usually smart phones in portrait mode)

@media screen and (max-width: 480px) {
  p {
    background-color: lightgreen;
  }
}

• Viewport units uses measurements relative to the viewport (the visible area of the browser window) width(vw), viewport height(vh), the lowest of the viewport width and viewport height(vmin) and the highest of the viewport width and viewport height(vmax). e.g.10vh is 10% of the viewport height. Other relative units of measurements include rem, em, %.

• A fluid grid is a design layout that uses relative units (like percentages) instead of fixed units (like pixels) to define the width and layout of elements on a web page.
  Instead of specifying fixed widths for elements like containers, columns, and images, you use percentages or other relative measurements. For example, you might define a container to be 90% of the viewport width.
  This approach allows the layout to adjust and scale proportionally to the screen size. As the viewport width changes (e.g., when viewing the website on a smaller screen), the elements within the grid adapt accordingly.
  Flexible images are images that adjust their size and scale proportionally to the parent container or viewport.
  To make images flexible, you will typically set their max-width to 100% and height to auto. This ensures that the image will not exceed the width of its container but will maintain its aspect ratio.
  When you use flexible images in conjunction with fluid grids, images can scale down or up as the screen size changes, preventing them from overflowing their containers or becoming too small to see.
  The combination of fluid grids and flexible images is import in responsive web design.

ADDITIONAL CSS PROPERTIES

There are many more properties to improve your webpage look, feel and interactivity. The following are a few:

• Transitions allow you to smoothly change the style of an element over a specified duration when triggered by a state change, such as a hover or click event.
  It is usually used as follows:

.element {
  transition: property duration timing-function delay;
}

- `property`: Specifies which CSS property you want to transition. For example, you can transition the `color`, `background-color`, or `transform` property.
- `duration`: Determines how long the transition takes to complete. You can specify it in seconds (s) or milliseconds (ms).
- `timing function`: Defines the acceleration curve for the transition. Common values include `linear` (constant speed), `ease-in` (slow start), `ease-out` (slow end), and `ease-in-out` (slow start and end).
- `delay`: Sets a delay before the transition starts. This can be useful for creating staggered animations.

.button {
  transition: background-color 0.3s ease-in-out 0.1s, color 0.3s ease-in-out 0.1s;
}

The above transition example affects the background-color and the color of the button class(.button)

• Transformations allow you to manipulate the visual appearance of elements in 2D and 3D space. Common transformation functions include:
  • scale: Changes the size of an element.
  • rotate: Rotates an element.
  • translate: Moves an element along the X and Y axes.
  • skew: Skews an element along the X and Y axes.

/* Scale */
.element {
  transform: scale(1.2); /* Enlarge by 20% */
}

/* Rotate */
.element {
  transform: rotate(45deg); /* Rotate 45 degrees */
}

/* Translate */
.element {
  transform: translate(50px, 20px); /* Move 50px right and 20px down */
}

/* Skew */
.element {
  transform: skewX(20deg); /* Skew horizontally by 20 degrees */
}

• Animations are defined using @keyframes and animated using animation properties:
  • @keyframes: Defines a set of intermediate stages for the animation. You specify the percentage of completion and the style at that point.
  • animation-name: Refers to the name of the keyframes you want to use.
  • animation-duration: Specifies how long the animation lasts.
  • animation-timing-function: Specifies the timing function for the animation, just like transitions.
  • animation-delay: Sets a delay before the animation starts.
  • animation-iteration-count: Determines how many times the animation repeats.
  • animation-direction: Controls the direction of the animation (e.g., normal, reverse, alternate).
  • animation-fill-mode: Specifies how the element behaves before and after the animation.
  • animation-play-state: Controls whether the animation is paused or running.

The following keyframes are for the animation named bouncing. At 0% and 100%, transform is translateY(0) and at 50%, transform: translateY(-20px).

@keyframes bouncing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

To apply the above animation:

.element {
  animation-name: bouncing;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

NOW FOR THE FUN PART!!

Let's make our styles external.
Go to the terminal opened in Part I
Run code my_style.css to start new CSS document named style in VSCode
Copy everything between the <style> tags in the index.html and paste it in style.css. Delete everything between the <style> tags.
In our index.html file, between the <head> tags, add <link rel="stylesheet" type="text/css" href="my_style.css">
After saving both files, our preview should still look the same.

Copy your professional selfie into the my_portfolio folder/directory.
Rename it if it does not carry your name. Look at what your selfie file is called and ensure the <img> tag in the index.html file has the same src(olaide.png or olaide.jpg or olaide.jpeg)

Let us add navigation right after our opening <body> tag.

<nav class="nav_wrap">
    <a href="#" class="logo_link">
         <img class="logo" src="olaide.png">
    </a>
    <ul class="nav_list">
         <li class="nav_item"><a class="nav_link" href="#">Home</a></li>
         <li class="nav_item"><a class="nav_link" href="#">Resume</a></li>
         <li class="nav_item"><a class="nav_link" href="#">About Me</a></li>
    </ul>
</nav>

Style our navigation in my_style.css.

.nav_wrap {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 20vh;
    min-height: 50px;
    max-height: 70px;
    align-items: center;
}
.logo_link {
    height: 100%;
    display: flex;
    align-items: center;
}
.logo {
    height: 50px;
    width: 50px;
}
.nav_list {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    list-style: none;
}
.nav_item {
    width: 20%;
    height: 100%;
    text-align: center;
}
.nav_link {
    border: 1px solid purple;
    padding: 10px;
    border-radius: 5px;
    display: block;
    width: 100%;
}

Update info_wrap class

.info_wrap {
    width: 50%;
    height: 60vh;
    margin-top: 3.5rem;
}

Style the img_div_wrap and img_div classes and the image within the img_div

.img_div_wrap {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    height: 60vh;
}
.img_div {
    width: 100%;
    height: 100%;
    border-radius: 15%;
    background: linear-gradient(135deg, #1e30f3 0%, #e21e80 100%);
    position: relative;
}
.img_div img {
    width: 60%;
    position: absolute;
    left: 50%;
    top: -25%;
    transform: translate(-50%, 25%);
}

Update title_text class replacing background-color with background and making font-size responsive

.title_text {
    background: linear-gradient(90deg, #1e30f3 0%, #e21e80 100%);
    font-size: 1.8rem;
...

Update passions class

.passions {
    /* give text background color */
    background: linear-gradient(315deg, #1e30f3 0%, #e21e80 100%);
    /* make text color transparent so it can display background color  */
    -webkit-text-fill-color: transparent;
    /* trim background around text */
    -webkit-background-clip: text;
    margin-bottom: 30px;
}

Style btn_links_wrap class

.btn_links_wrap {
    height: 20%;
    margin: auto;
    display: flex;
    width: 80%;
    justify-content: space-around;
    align-items: flex-end;
}

RESPONSIVENESS

We have a page that is not so good on a small screen like on a big screen.
Add media queries at a maximum width of 900px to my_style.css

@media screen and (max-width: 900px) {
    .nav_list {
        display: none;
    }
    .main_wrap {
        height:auto;
        flex-direction: column;
        align-items: center;
    }
    .info_wrap {
        width: 100%;
        text-align: center;
        height: auto;
        margin-bottom: 10px;
    }
    .title_text {
        margin-left: auto;
        margin-right: auto;
    }
    .img_div_wrap {
        height: 40vh;
    }
    .img_div {
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    .img_div img {
        top: -20%;
        transform: translate(-50%, 20%);
    }
}

EXPERIMENT

Experiment with properties and values in my_style.css and view the effect in the preview tab.

UPDATING THE REPO

We will be updating our repository with the task we have completed so far.
Save the documents
In our terminal, run the following

git add index.html my_style.css olaide.png
git commit -m 'moved styles to external css file and added more styles with responsiveness'
git push

SHOW OFF!!!

Let us deploy our website so we can show off to family and friends.
Vercel allows us deploy our static website for free on their hobby plan
Visit https://vercel.com/
Click Signup to create an account
Select hobby as reason for use and fill in required information
Signup with github to authorise Vercel to access your github account.(You can always disconnect Vercel when you want)
Click the authorize button and verify your phone number. You will be redirected back to Vercel
Install github to import repository

Select your github profile and your portfolio repository, then click install

Click import, leave the form as is and click deploy

When deployment is complete, you see a preview of your web page!
Continue to dashbord to get the link you can share with family and friends!

Do you like your webpage?
You can improve on it or build another.
Add a link to your deployed portfolio in the comments, let us see your creation!

TODO

Go to the terminal opened in Part I
Run code about.html and code resume.html to start new HTML documents named about and resume in VSCode
Update your navigation as

   <ul class="nav_list">
      <li class="nav_item"><a class="nav_link" href="#">Home</a></li>
      <li class="nav_item"><a class="nav_link" href="resume.html">Resume</a></li>
      <li class="nav_item"><a class="nav_link" href="about.html">About Me</a></li>
   </ul>

Build and design the resume.html and about.html files as you will and push to your repository.

CONTINUOUS PRACTICE IS KEY

Ways to practise:

• Improve your portfolio
• Build porfolios for family and friends
• Do more challenges to improve your skills here

ADIEU!

Phew! It has been a journey right? Our portfolio is far from where we started! It feels good to be able to create something, doesn't it? Feel free to add more features you will like to have in your portfolio. Please drop a link to your work in the comment. We want to take pride in your journey; from zero to hero 😉.
In the next lesson, we will look into JavaScript and some. Until then, have fun!

FURTHER READING AND REFERENCES

my_portfolio
W3Schools
mozilla

RELATED POSTS

PREV <--------------------------------------------------------> WATCH OUT FOR THE NEXT POST