Cycling and Talking Tech, How I built this landing page
Tags: beginners, tutorial, programming, codenewbie
Published: 2021-04-05 00:59:28

### Table of Contents
1. [Goal](#goal)
2. [Technologies Used](#technologies-used)
3. [End User and User Stories](#end-user-and-user-stories)
4. [Initial Wireframe](#initial-wireframe)
5. [Break the app up into CSS Grid sections](#break-the-app-up-into-css-grid-sections)
6. [Break sections into components and code one at a time](#break-sections-into-components-and-code-one-at-a-time)
7. [Done](#Done)

## Goal
A while back a mentor and I went hiking at a local state park. It was one of the best mentoring experiences I've ever had. We had a long conversation about my career goals, the technologies I was learning, and my passions. 

Now I'm a teacher assistant in the Launch Code boot-camp and this article is to give aspiring developers a hint at building a landing page. This is a peek at my planning and development methods. Please remember, there are 100 ways to a solution. This is one of many paths to a good solution. 
<hr>
## Technologies Used
First consider what technology you will use. I am using React for the presentation and functionality (HTML, JavaScript, CSS). GitHub, GitKraken, Chrome, Adobe XD, and Visual Studio Code is my tools. 
<hr>
## End User and User Stories
Next, spend time thinking of user stories. For this project, my end user should be one of my boot-camp students who I am mentoring.  

1. The user should read convincing text to understand why they should take this opportunity.
2. The user should be able to click on a button to see potential dates.
3. The user should be able to click on a button to proceed to sign up. 
4. The user should be able to join the Slack channel. 
5. The user should be able to contact me via email. 
<hr> 

## Initial Wireframe
I'm a firm believer in starting with the end goal in mind. So a paper drawing based on the goal and user stories is a must. 
![Camera shot of paper drawing of idea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mits5llegq3r45l7lp3o.jpg)


The next step is to create a digital copy of the paper drawing so I can:
1. Finalize the idea
2. Include UI/UX concepts
3. Add colors
4. Ability to export the wireframe into an image and share with others to get first impressions before I start coding. 

My favorite resource for wireframing is Adobe XD. It's free and it rocks. I also always start with a black and white illustration so I can focus on the UI/UX. Afterward, I add the color. 
![Black and white wireframe of app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boqujkavprjlglkm6pyc.png)

_Color Version_
![Digital color wireframe of app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkq9jvjys28aqe7gbtcm.png)

My favorite resource for free images is [undraw.com](https://undraw.co/).

## Break the app up into CSS Grid sections
Some of the best advice I have been given is to learn responsive design CSS technologies Flexbox and CSS Grid. Now, I start each project off by drawing a "Grid" overview of the web page.
![App redrawn with CSS grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s44gt64t8w2kpl90crmp.jpg)

This is the first preview of the app. As you can see, its color-coded and broken up by CSS Grid sections. 
![Grid Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enm0l58bsiqrieghnlys.PNG)
Here is some quick CSS Grid resources:
* [Learn CSS Grid in 5 Minutes](https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/)
* [LearnCSSGrid.com](https://learncssgrid.com/)


## Break sections into components and code one at a time
My opinion is to code one section or functionality/user story at a time. Since I am building in React, I started my project by creating a folder for each component I expected to build. 
![React Table of Contents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0t72lrhsmqt5kbets6g.PNG)

## Done
While it's not perfect, I got in a day of coding practice..

_Desktop Preview_
![Desktop view of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8ayrd6qw50n9uaescne.png)

_Mobile Preview_
![Mobile view of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnpxih9tbfoi1y9394rx.png)