Noel Bray's Front-end Web Developer Portfolio 🙂


I hope you're having a great day, and if not, I hope your day starts going very well from this moment onward. : )

Before you skim or completely read through my portfolio please read this...

I want to let you know that I've been doing my best to teach myself HTML, CSS, and JavaScript (the core of front-end web development), and started diving into React by reading, watching, and doing the free tutorials on W3Schools, Codecademy, Freecodecamp, Reactjs, and other sites.

I've been using a little command line to move back and forth between my files, make directories, and copy or delete files with regards to my website's files and related files to see if I could do it (by referring to Computer Hope and the help command).

I'm not a pro yet, But I Believe I Know Enough To Be An Asset To Any Company, Team, Or Individual Who Will Open The Door For Me.

I will do my best to do great work for whoever hires me.

I'm sure my coding efficiency, speed, and abilities will increase as I work with you.

Improve more, I will.

And the more I improve, the greater asset I will be to you.

My Interests

I'm interested in:

I Am Open To:



1. Free Code Camp Curriculum Completed So Far (Click here to see the details):

Click here to see my Free Code Camp Profile.

2. Some Codepens I've made as a result of going through the Free Code Camp curriculum so far:

3. Wrote Navigatable Online Fitness eBook called 4 that anyone can read online for free.

4. Built a static website for a restaurant and am hosting it on my vps.

Check It Out Here:

The BBQ Shack of Fanning Springs, Florida

I did my best to write semantically correct local search engine optimized html code and content for it.

I didn't have photshop, so I downloaded Krita (free drawing software) and quickly learned just what I needed to modify the image I pulled from the restaurant's facebook page to make the background image as well as the clickable "Shack" image at the top-right corner of the website for the mobile version of the main navigation, menu.

5. Rebuilt, refactored, improved the semantics of, and search engine optimized the code for my website (to the best of my ability).

Check It Out Here:

Noel Bray

I improved the HTML, CSS, and JS code for after learning more about those languages and reinforcing what I've already learned about them.

I'm sure as I learn more and continue improving, I'll be able to improve my website even more (There's always room for improvement). Even so,

Here are some improvements I made:

6. Created Tic Tac Toe React App Webpage On

Check It Out Here:

Play Tic Tac Toe,
Wether X or O,
Get 3 In A Row,
And Winner Reward Will Show.

After completing the React Tic Tac Toe Tutorial using creat-react-app, I did the Extra Improvements, Challenges at the end:

  1. Display the location for each move in the format (col, row) in the move history list,
  2. Bold the currently selected item in the move list,
  3. Rewrite Board to use two loops to make the squares instead of hardcoding them,
  4. Add a toggle button that lets you sort the moves in either ascending or descending order,
  5. When someone wins, highlight the three squares that caused the win,
  6. When no one wins, display a message about the result being a draw,

I made up some of my own challenges, improvements for the Tic Tac Toe React App:

  1. Create a randomly generated prize phrase when there is a winner,
  2. Make the winner declaration and winner reward phrase blink a couple of times when there is a winner,
  3. Figure out how to stop the winner and reward phrase declarations from blinking everytime the winning move button is pressed after a non-winning, history-list move button was pressed,
  4. With help, Figured Out a way to put the TTT React App on my website after using npm run build in the project folder without knowing, using Node JS or some other backend method because I haven't taken any courses on back-end web development (reason: lack of funds). I may write a post about how I did it.
  5. Create a responsive nav menu within the React App for mobile/tablet and desktop to navigate from the TTT React App-webpage to the other main webpages.
  6. Create an open and closeable instruction list for users (just in case they don't understand how to the Tic Tac Toe app works).
  7. Fix some-kind-of weird thing, bug that was attacking the game-board (which happened in the original code by Dan Abramov).
    Everytime I opened the nav menu or instructions on the TTT app, the bug caused the border-bottom of either the first or second row of divs on the game-board to appear twice as thick as the other row border bottoms.
    Eventually, after much persitance, trial and error, and effort I managed to exterminate the pesky bug (and upon visiting Dan Abramov's code again, it seems he exterminated it too).
    If you want to look at it, here's the updated TTT code pen by Dan Abramov's

7. Completed As Many Free Codecademy Front-end Developer Tutorials and Tutorial Projects As I Could

I took any free course related to front-end web development that was available. And during any Pro free trial, I did my best to complete as much of each course that wasn't availble in the free courses when I took them.

I got fifty-seven percent of the way through the Web Devlopment career path.

I would've completed more if I had the money too purchase the Pro-plan for the Web Development Path.

You can checkout the tutorials and etc. I completed by clicking the link to Noel Bray's Codecademy profile page.


I don't exactly know what power level I'm at for each these languages below, but I know, at the very least, the fundamentals of:

I haven't learned and memorized everything in HTML, CSS, JS, and React but I can crawl the web and hunt for the prey I want and consume it.

Other Potential Skills:

I am sure I can learn Git, Bash, and anything else needed for accomplishing a task.

If you hire me and want me to learn another coding language, I will do my best to learn it as quickly as possible.

Some of My Personal Traits (in no particular order):

I believe I'm a well rounded person, personality but I'm not perfect by any means and nor will I ever claim to be.

But I strive to do my best.

Some of My Objectives:

Some Ongoing Objectives:

Some Achieved Objectives:

Some Things I've Learned

I Don't Have To Memorize Everthing

Until I learned that I didn't have to memorize everything concerning code, my learning speed was greatly reduced, but after taking many tutorials, watching some videos, and reading articles, I learned that you don't have to remember everything...

Whew, what a relief, especially since I was trying to force my mind to remember absolutely everything regarding HTML, CSS, JS, Reactjs, and any other code or etc. I was diving into which was stressing me out.

To Be A Better Hunter

My inner bloodhound has become a better hunter in hunting down information to help me write code and find solutions; and he will continue to get better... Howoooo!

Get To Know Me A Little More

The sound of my fingers clapping the keyboard is very pleasing to me, I like to code... Yes siree. But, I don't like any type of bugs infesting my code, but it feels great when I figure out how to get rid of them.

I like to exercise.
I like to swim, especially in clear cool springs;
I like being active.
I like being around people, but sometimes I like moments to myself too.
I love everyone.

I like learning and improving.

If you have any questions, suggestions of what I should learn based on what you think I would be able to learn and get good at, or would like to know more about me, feel free to send me an email or call me. 🙂

Interested In Hiring Me?

Email Me: