January 4th – 8th
Class hours: 9:40 – 2:05
Mr. Bohmann | firstname.lastname@example.org
- Remote Link for today (if you are not here) – Google Meets
- Week 16 Folder
9:45 Attendance & Graph of the Day
Open up a Google Doc. Label it Graph of the Day with today’s date.
When looking at graphs, we’ll be guided by the following questions:
- What do you notice?
- What do you wonder?
- What’s going on in this graph? Write a catchy headline that captures the graph’s main idea.
- What impact does this topic have on you and your community?
Take 5 minutes to write responses to these prompts
10:00 Other Frameworks
Besides Bootstrap, there are many other free and pay front end frameworks available.
I’ve installed the W3.CSS framework on the EWSD site for those special times I want to use alerts and banners and a few other custom options (don’t tell anyone…shh)
Since we cannot explore every framework out there, we’ll do a quick exercise to get you familiar with at least one other framework. A good front end developer should have knowledge of the different types of tools available for web development.
Questions – with your partner from yesterday, go through and do a quick investigation of your assigned framework:
- Is this framework free?
- Is the framework open source?
- How was the documentation? (like.. does it make sense)
- What companies are using this framework?
- Were there example or tutorials available?
- Scale of 1-10 (10 being heavy lifting) how hard do you think it is to use?
- What made this Framework different from your Bootstrap experience?
10:25 Mask Break
12:00 Installing Bootstrap, making our own template and Navigation with Bootstrap
Yesterday we used the CDN (Content Delivery Network) to use Bootstrap. Today, let’s download and look under the hood. GetBootstrap and figure out which files we want to keep and which ones can be deleted.
Special Note: When adding your own custom styles and using Bootstrap….
The upside to adding your own custom stylesheet after the default bootstrap stylesheet is that in the event that Bootstrap gets upgraded, you can simply replace the Bootstrap stylesheet with the new one and your custom styles will remain untouched
Let’s build a quick template and from the template we’ll tackle some navigation.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Template</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Your custom CSS --> <link rel="stylesheet" href="css/custom.css"> </head> <body> <div class="container"> <h1>Hello Bootstrap 5</h1> </div> <!--Java Script and Bootstrap Bundle with Popper --> <script src="js/bootstrap.bundle.min.js"></script> </body> </html>
- Basic Navbar
- Navbar and Navbar with branding or SVG
1:15 Wireframing Exercise
Wireframing is a pre-production process that creates a prototype simple enough to be understood by everyone but with enough detail to show all the functionalities. Wireframing can be done on paper or digitally with a host of tools. Personally, I prefer to work on paper first.
Wireframing is a quick sketch or illustration (it is not a detailed drawing) of a website’s hierarchy. Headings, Divs, Menus, Buttons, logos, images ,text all can be included in a wireframe.
Let’s do a quick exercise where we create a wireframe from something already built in order to learn how it’s been made.
1:45 Your Web Portfolio
You are going to code your own Senior Portfolio. The goal is to pull together some of your best work on a website that you will build.
Our Project Deliverables are:
- Hand-coded website (you may use a CSS framework, but no WordPress) that best represents you and your work in HS (see content requirements)
- Valid HTML/CSS and ADA compliant code
- Usability tested with Usability Report
- Presented to class
Remote Days – Homework
Posted at the end of the second in class day of the week will be the remote homework you are to complete. This work will be due at the start of the next in person cohort meeting.
This homework be an extension of learning from the week and may comprise of assigned and independent projects.
Remember, you must be completing articles by 2:05 for each remote day (except Wednesdays) to count for CTE attendance.
#1. Some Bootstrap Challenge
Menu Challenge – Pho Hong
- Pho Hong is a Vietnamese Restaurant in Burlington. Take a look at this menu. Create a one page menu (pick two sections only) using Bootstrap. You will build this in Atom.
- Use Font Awesome to help with icons or try out the new Bootstrap Icons!
- Use HTML Special Symbols to help with those special characters if necessary
- Name PhoMenu and link all necessary files in your Week 16 folder
#2. PreProduction – Web Portfolio – Prototyping
If you have not done so already, create a folder on the Cawd Server and name it WebPortfolio_initials.
Inside, create a CSS and Images folder.
Arrange / name your selected artifacts including your Resume PDF and place in appropriate folders
Begin Wireframe / Sketches of your website layout including:
For your wireframe, you may use pen, pencil, colored pencils, etc.. or you may work digitally with Photoshop or Illustrator or even Google Slides.
#3. Domain Names
Understanding Domain Names. Your domain name is a friendly IP Address that is easier to remember.
While we won’t be able to place a domain name with your portfolio this year, that does not mean you should not investigate a domain name for your portfolio. In most cases purchasing a domain name and web hosting all in one can cost you less than a video game.
Checkout GoDaddy.com and search for your very own domain name. Think of a domain name that would work for your portfolio. (professional)
Enter your chosen domain name for your portfolio on this form.
Review how Domain Names Work