NACE Career Readiness Competencies
Drag-n-drop each sample behavior into the correct box. Each box represents a different NACE Career Readiness Competency. Each box will contain only 2 items.
Sample Behaviors
- Navigate change and be open to learning new technologies.
- Identify appropriate technology for completing specific tasks.
- Collaborate with others to achieve common goals.
- Be accountable for individual and team responsibilities and deliverables.
- Be present and prepared.
- Show a high level of dedication toward doing a good job.
- Plan, initiate, manage, complete and evaluate projects.
- Motivate and inspire others by encouraging them and by building mutual trust.
- Actively contribute to inclusive and equitable practices.
- Use feedback from multiple perspectives to make inclusive decisions.
- Make decisions and solve problems.
- Multi-task well in a fast-paced environment.
- Employ active listening and persuasion skills.
- Promptly inform others when needing guidance.
- Develop plans and goals for one's future career.
- Professionally advocate for oneself and others.
Career & Self-Development
Communication
Critical Thinking
Equity & Inclusion
Leadership
Professionalism
Teamwork
Technology
How I Customized This Page
This project definitely gave me a harder time than the quiz we made! I think trying to edit the boxes was where I ran into a lot of trouble. I wanted to add additional boxes, which then led to me trying to figure out how to make it four to a row as opposed to three, which then led me to trying to get the boxes to be the correct size so that the "sample behavior" boxes would fit... I essentially went down many rabbit holes as I researched how to achieve the look I wanted. As I learned more I also ended up tidying some of the code so that it was easier for me to see. One example of that was putting all of the "sample behavior" text into new lines so that they were not all bunched up into a single line. This was imperative for me since I made the "sample behavior" text much longer than what was originally there.
CSS:
- I changed the way the boxes were formatted so that I could include four boxes in a row instead of just three since I also added in an additional two boxes.
- I changed the "Sample behavior" box to show at the top of the page because the spacing ended up looking weird after I added the additional two boxes. By moving it to the top, I was able to have it stretch enough to accommodate the text. I did have to add a scroll wheel as well so that you could see all the options because I also added quite a few more of those to that box as well. This took some trial and error on my end. At first it was bunching all to one side, but I eventually figured out how to center it.
- I also had to make some edits to get the arrows to show up correctly when you drag an item from the box. This was only an issue because I changed the orientation of the boxes/where they were located on the page.
- I changed all the colors to shades of purple because I thought it looked nice. I had to play around in the CSS to get the box to stay purple even when you drag them because initially it tried to revert back to the yellow color.
- I centered the title text, the descriptions, and the box text.
- Overall, I spent the most time trying to get the spacing of the boxes right...I did finally get it, but once I did that the rest was much easier!
HTML:
- I added additional boxes so that I could include all 8 NACE competencies, then I changed all the text in those boxes to match the competencies.
- I changed all the "answer" boxes to be "sample behaviors" that match each competency. I added additional possible answers so that each NACE competency could have two sample behaviors each.
- I changed the title text and the instructions text.
- I added the same navigation bar at the top that I have on my main portfolio page for consistency and linked the other projects there.
- I reorganized the "sample behaviors" into their own lines in the code to make it easier for me to find each one and make edits to them.
- I changed the variables from "3,3,3,3..." to "2,2,2,2..." to match that there would only be two answers to each as opposed to 3.
- The hardest part in the HTML was getting my links in the nav bar to work, but I watched some tutorials and figured it out.