Brand Website: My Styling Version

[reidhoman]

https://github.com/reidhoman/devs/tree/main/Website

Attached above is my version of styling for our class website we may use for our brand. For now, I created a public repo where I placed my main index.php file along with all the jpg images that are used within it.

In my index.php page, I included flexbox styling that I had learned from my previous CIS 376 class. It includes a sidebar with certain buttons that direct the user to each portion of the website.

https://user-images.githubusercontent.com/77356691/114123469-fb733280-98b7-11eb-8a69-908f89f84df1.MOV

I uploaded a clip of how the site interacts when navigating with the sidebar. This is definitely some styling I am proud of - and hopefully my group likes this version of styling.

[barrycumbie]

@reidhoman 😎

is there a test deployment we can view?

(noticed on that syllabus page that image repeated....look into css for "no-repeat" on a background image)

[reidhoman]

https://reidhoman.github.io/devs/Website/index.html

Attached above is a link to my deployment page so you can view my work. Also cleaned up some css styling. I made my syllabus section smaller than the rest so it does not scroll as much relative to the other website segments. Thanks for the feedback!

[reidhoman]

Because I figured out how to make a responsive sidebar that takes the user to a different section depending on which button is clicked, I also submitted this for the /ux dev.

After the amount of time this website took me to create, I can honestly say I would much rather be on the coding side of things for a living.

[reidhoman]

Resubmission for: (DEV/ux) Source Code: https://github.com/reidhoman/devs/tree/main/Website 🔗 Test Deployment: https://reidhoman.github.io/devs/Website/index.html 🔗

---

Through my use of flexbox when styling my website design, I believe that my version covers many of the necessary user experience basics (as mentioned in this article: https://www.usability.gov/what-and-why/user-experience.html). When discussing the major factors that aid in a positive user experience, the article points out that "UX is a growing field that is very much still being defined."

One of the major factors of a positive user experience deals with usability. I chose to use flexbox rather than bootstrap because it makes it easier to position and size your desired content. By using flexbox, I was able to easily place different class content into clearly defined segments within the site. Visual design is also mentioned to be a beneficial principle that increases the user experience. Through my use of multiple images and slides, I believe I have made this site aesthetically pleasing.

Another major factor of UX includes being Findable - which means the website is easy to navigate through. In order for a user to quickly access each section of my website, I included a responsive sidebar that navigates the user to wherever they desire to go. Also, as a user hovers over each element within the sidebar, the buttons will illuminate when contacted by the mouse. The code and styling for the interactive sidebar are displayed below:

HTML:

 <header>
            <h2><a href="#">Menu</a></h2>

            <nav>
                <li><a href="#about">Dev Guide</a></li>
                <li><a href="#services">Dev Profiles</a></li>
                <li><a href="#history">Course Content</a></li>
                <li><a href="#slideshow">Class Memes</a></li>
                <li><a href="#merch">Tutorials</a></li>
                <li><a href="#contact">Syllabus</a></li>
            </nav>
        </header>

Flexbox Design:

 header {
                height: 100%; 
                width: 105px; 
                position: fixed; 
                z-index: 1; 
                top: 0; 
                left: 0;
                background-color: #333; 
                overflow-x: hidden; 
                padding-top: 20px;
                color: #fff;

            }

            header h2 {
                text-transform: uppercase;
            }
            header nav {
                display: block;
            }
            header nav li {
                padding: 6px 8px 6px 16px;
                text-decoration: none;
                font-size: 25px;
                color: #818181;
                display: block;
            }

            header nav li:hover {
                color: #f1f1f1;
            }

---

Thanks for the feedback! :electron: Homanator :electron: