Your first goal is to recreate this page from scratch. Don't inspect the source! Try and create it on your own. Use google as much as you can for stuff you don't know, can't remember, or are unsure of. Really you just don't want to look at the source to see how they did it. Don't worry about mobile support yet. Focus on just emulating the desktop appearance.
- The floating titlebar is the hardest part and probably unfamiliar to you. Do it first and focus simply on making some ugly titlebar stick with the scrolling.
- Don't worry about the animation that appears when hovering over buttons. But you should have the border change color on hover. Hover events are very good for showing that something can be clicked!
- The first big image of food should span the width of the page. You might need to look up how to size that.
- You're welcome to reuse the images and text if you want, or to use your own to make it more unique.
- Focus initially on the page linked. Links on that page don't need to go anywhere (a common placeholder is to use
#as the link, which is just an empty anchor). - I recommend trying to structure your files cleanly. Use a separate CSS file for your CSS. Put all your images in a separate folder. Always use relative links to link to files on your computer.
This page is relatively simple with its styles and need for code. Try and keep your code as clean as possible. Remember to indendent reasonably (usually one level of indentation per nested tags).
- I like Sublime Text for an editor (it's technically non-free, but the trial is unrestricted). Atom is another popular one that is good for web dev.
- You can use the web browser of your choice. Firefox or Chrome is ideal. Remember to utilize the developer tools (F12) heavily. Use that to inspect elements for purposes such as to change their styles on the fly, to see if a style was even applied to an element (maybe it didn't apply at all, implying the selector is wrong, or maybe it got overridden by a more specific style?).
- When searching for help, StackOverflow and Mozilla Developer Network links are likely to be the most helpful. I recommend prioritizing them in search results. Where necessary, consider wording queries with the language in them (eg, "css create floating element").
The follow up task involves creating a menu for your site and will involve some very basic JavaScript. The "template" is this page.
- Don't bother creating the drop downs for the location and food vs drinks.
- What you're going to do is the "full menu", "lifestyle choices", and "nutrional info" tabs. Clicking a tab will change the content of a section of the page. Get this working before proceeding with anything else (use some placeholder text). Tip: have all the sections in the HTML and just toggle which is visible.
- You do not want to replicate this entire menu. It's long and repetitive. I recommend just doing the first 3 sections. Really the key is to make something with multiple columns (and different numbers of columns per section). Do create some kind of icon to label foods (eg, gluten free, spicey, vegetarian, etc).
- The lifestyle choices section would just be a different kind of menu. Just use placeholder content and don't waste too much time making realistic content. You can copy from the site or use a lorem ipsum generator.
- The nutrition info tab is the real complicated part. Firstly, you can use a regular
<select>element. Don't worry about making it look the same (although it's a very interesting challenge). Whenever it changes, you want to grab some nutrition facts from a "database" of menu items. This is best done by structuring the data as a JSON object (you'll note this is how the image data for your personal site is structured!). Don't bother making full nutrition facts (or believable numbers). Just something like calories, carbs, protein, and fat with random numbers for just a couple food entries will do. The task is more about making the dropdowns automatically fill the HTML elements with the right numbers!
- The core important JS command at this stage is
document.getElementById. It'll get you an object based on itsidattribute and then you can do stuff with that object. For example, you could change its CSS (eg, to make it invisible), you could change its text content, you could add a function that will fire when a button (etc) is pressed, and many other things. - JS events are a major component here. Events are how you do stuff when, say, something gets clicked, changed, hovered on, the page is done loading, etc. In short, it's a way to attach a function to something so that when the event occurs, the function will fire.
- Rusty on the JS in general? Go through these tutorials! You can try and skip ahead if you feel confident, but if you're getting lost, go through them in order (and actually try typing JS code out to re-enforce your learning).
- If JSON is confusing, you may need to brush up on JS objects. JSON is just a simple way to represent objects. It's got limitations to ensure that it's always static, simple data.
If you wanna make this a little more interesting, try introducing BootStrap when you make this page. Use its grid feature to lay things out. Bootstrap adds a lot of default styling that can make things easier (and also sometimes more complicated because there's more going on and you have to override their styles). It's a good way to get better acquainted with using libraries (a fundamental part of web dev) as well as the CSS overriding rules.
You may find the glyphicons useful for giving icons to menu items. These can be styled the same as a font. The "full menu", etc buttons could be implemented as a button group. Alternatively, the tabs feature is really exactly what you need (you'll need to do some CSS tweaking, though, to make it look right).
You're free to deviate in whatever ways you want, so long as it works and looks good. There's no hard rules, just suggestions that ensure you have to challenge yourself!
First step is a training session with me! Lemme know when you get here.
Now we're gonna recreate the very first exercise, but make it mobile friendly. You'll almost surely want to recreate the site from scratch, since sites designed for desktop are difficult to adapt for mobile. Gotta start with a mobile friendly design using media queries to modify the sizing of things based on the browser size.
General patterns to look for in making the same HTML structure work for desktop and mobile (with only CSS differences):
- Change
inlineorinline-blockelements to beblockso that side-by-side stuff becomes on top. - Change widths. Percentages and em units are the way to go for maintaining consistency. Margins and padding are also things to consider.
- Font sizes usually have to be adjusted.
- Grid based systems work well.
- Sometimes things work best when collapsed and openable with interactivity. Tabs, collapsable menus, etc. The source page does this with its top menu, making it collapseable with JS.
Incidentally, the menu is sure to be the hardest part to emulate. Don't bother with animations. Just focus on opening a hidden menu and sizing it to the screen. Use the responsive design mode in your browser for testing. CTRL + SHIFT + M on firefox. In Chrome, go to dev tools (F12) and click the below button:
Start by focusing on making it look good for very small devices and full sized desktop. Do the in betweeb stuff later.