Blog

: Create a New GitHub Repository for This
Unit’s Homework (30 minutes)
Before we start coding, create a new
repository on GitHub and name it “UX_UI_HW_18.”
If you need a reminder of how to create and clone a repository, please
reference last week’s homework.
Clone the blank repository to your desktop using GitHub Desktop.
Copy and paste your homework files from UX_UI_HW_17 into
UX_UI_HW_18. You want to be able to show how your code abilities have
grown during the course of the code section. Having multiple versions will
allow you to show employers how your skills have grown.
Update your UX_UI_HW_18 repository with the new files.
Publish your site on GitHub pages. Click Settings on your
repository’s homepage.
Scroll down to the GitHub Pages area in Settings and select the
master branch.
Check the URL after the page refreshes.
You’re ready to code!
Step 3: Code the HTML for Your “My UX
Skills” and “My Work” Sections (1-2 hours)
Code the “My UX Skills” HTML
Create a tag with the class of mySkills. Inside it, create the following tags:
An tag that contains the text “My UX Skills”
A tag with the class of flexContainer that will serve as our flex container. This div
will contain the following tags:
Three tags that will serve as our flex children. Each div should
contain:
An tag. Pick or create an icon that will fit the skill.
An tag that contains text to describe the skill.
A tag containing a paragraph about how you use the skill.
That’s it for the HTML of our “My UX
Skills” section. Let’s move on to the “My Work” section.
Code the “My UX Skills” HTML
Create a tag with the class of myWork. This section should contain the following tags:
An tag containing the text “My Work”.
A tag with the class of workGrid. This div should contain the following tags:
Two tags. The farthest first will contain an tag and the second will contain:
An tag
A tag
A to view the project
Two more tags underneath the other two. The farthest first will contain an tag and the second will contain:
An tag
A tag
A to view the project
Under our grid, create an tag tag that contains the text “View all projects.”
Step 4: Code the CSS Style for the “My UX
Skills” Section Using CSS Flex (4-6 hours)
If your design differs from the HTML content we constructed
earlier, create HTML tags to match your redlined design file for your CSS
flex container. This will vary from design to design; each design is
different.
The first step to creating your “My UX Skills” section is to set a
flex container. Set display: flex to your with the class of .flexContainer.
Now that you have a flex container created, we need to set the
widths of the three tags wrapped inside of it.
Apply width 33% to each wrapped inside to create a
fully responsive row.
Note:
Don’t forget to apply margin and padding to these tags,
creating a layout that is evenly spaced.
Write an HTML comment above your section tag that says:
Now that you have the basic structure and style created for your
“My UX Skills” section, your job is to style it

to match your visual
design! Here are a couple of tips to get you working:
Use flex-direction on your flex container to set it to display as either a column
or a row.
If you are using the placeholder content for this section, fill
it with your own content from the design you created during the Week 16
homework.
If your design differs from the placeholder content, add in your
HTML elements to make it match your design and style accordingly.
Step 5: Code the CSS Style for the “My
Work” Section Using CSS Grid (4-6 hours)
If your design differs from the HTML content we constructed
earlier, create HTML tags for your CSS Grid. This will vary from design to
design; each design is different.
Note: For a comprehensive guide on how to use CSS Grid,
check out this tutorial.
Apply display: grid; to your div with the class of workGrid to convert this
tag into a grid container.
Apply named grid areas to your divs wrapped inside your grid container.
On your grid container, create grid-template-rows and grid-template-columns to match the visual design of your page.
Keep in mind: you can use percentages, pixels, or fraction units to
accomplish this.
Build out your grid-template-areas in your grid container to match your design.
Apply CSS styles to your CSS Grid to make sure the visual design
matches the wireframe that you created during the Unit 16 homework.
Create an HTML comment above your “My Work” section that reads:
Step 6: Code a Mobile Media Query to Make Your Design Responsive for Mobile
Devices (1-2 hours)
Write
a mobile media query at the
bottom of your style.css file. Set this mobile media query to take effect
at 600 pixels or less using max-width.
Scroll to the next page.
Inside
your mobile media query’s brackets, rewrite the flex-direction of your flex container to
display as a column.
Rewrite the width of your
flex children to make them take up 100% of the width of their container.
Rewrite the grid-template-areas, grid-template-rows, and grid-template-columns of your
grid container to display for mobile views.
Note:
See below for an example from Unit 18.2 for an example of how you might
accomplish this.
Here is a sample grid container set to display on the desktop:
And here, it is rewritten for mobile browsers. You will have to edit the
grid-template-rows and grid-template columns and the grid-template-areas
for your grid to display correctly.
Step 7: Upload Your Coded Website’s
index.html, style.css, and Images Folder to GitHub to Update GitHub Pages (1-2
hour)
Upload your modified webpage to GitHub using GitHub Desktop.
Publish your site using GitHub Pages.
Open your published GitHub Pages URL to see your changes applied.
Make sure you copy the URL. You will need it to submit your
homework via Bootcamp Spot.
Required Deliverables
Google doc
with the following sections:
A link to a G-drive folder containing images of your portfolio wireframe
and the redline wireframe mapping out the HTML elements.
The original design of your portfolio
website
A link GitHub repository
A link to your Github pages website URL.