Johann Krugell

image of johann krugell

Odin Project Foundations

I am currently studying web development on the site The Odin Project. I wish I found The Odin Project earlier. Although it is very challenging; I love the course. I completed the web development foundations course in July 2022. This page is a show case of the completed projects of the foundations course.

Recipes

The objective of the project was to create a basic website that consist of a main index page with links to few recipe pages. The recipe page included a ingredient list, a picture and a method to make the recipe. This is the first project in The Odin-Project curriculum and contains little styling.

The project tested your understanding of the basic HTML file structure, including images in your page, linking to other pages and some basic HTML for the example the use of unordered lists.

recipes-webpage

Landing Page

The next project was to create a landing page. The landing page included a number of styling requirements including a header and footer for the page. Links to other pages in the header, varying fonts, font-weights, colors and other styling across the page.

The projects tested your understanding of HTML, CSS and specifically the use of flexbox to align elements on the page.

landing-page-webpage

Rock Paper Scissors

The Rock-Paper-Scissors project tested your javascript skills. specifically capturing the selections the users made during the game, storing these selection and using them to calulate the winner of a round. Further difficulty was added by setting a game consisting of five rounds and calculating the winner of each round and the game.

The game is played against a computer, I chose HAL9000, set in space. I add extra javascript to include sound. May be you can beat HAL9000 and open the pod bay door ?

rock-paper-scissors-webpage

Etch-a-Sketch

The Etch-a-Sketch project challenged you to draw a grid based on the user input, the user can selected a 16x16 grid for example. The javascript code needs to resize the blocks to fit within the container. Next was to add a hover effect when the user move their mouse across the grid

Do you like Unicorns? Who doesn't!

etch-a-sketch-webpage

Calculator

The last project in the foundations course was to create a calculator. The project required all the HTML, CSS and Javascript that you learned to date. The calculator needed to look nice, be able to add, subtract, multiply and divide. Keyboard support and backspace functionality earned extra credit.

Add it up!

calculator-webpage