Intro Post
Website Links
Home for weekly tutorials and final project: Coursework Site (this one actually). My email is Harmonie_Perry at (our school email) or Harmonie at Gmail. Either will work to reach me.
Final Project Themes
For my final, I'm thinking I'll make a website for a pretend brewery/cafe. My husband and I have homebrewed before, and flirted with the idea of having a place one day, so this might be a fun way to explore that idea further.
I do have a website that was made as a final for my Intro to HTML class last fall, but it already has a little javascript on it. The javascript wasn't written by me, it's a premade library that I was able to add to my existing site, but I feel like that still counts. If you want to take a look at this site as it is today (under some contruction, I'm fussing with grid a little on the home page and so have different areas colored in weird colors to see the boundaries of each section), I'm happy to take any feedback. Also, since we're all limited in our ability to travel at the moment, feel free to look through pictures and do some armchair traveling. I will be working on this and updating the content each week, once my readings and coursework are done: Where To Next?
Systems Used
So for actually writing my html and css, I use Dreamweaver on my desktop, which runs Windows 10, and has two nice monitors with colorful led lights on the back. I also do a lot of testing and reading design blogs on my laptop, which is a Lenova Yoga C930. I typically work in Chrome in both areas, but also use Firefox as I've been told it's got better tools for troubleshooting grid and other layout quirks. Typically, I'll write code in Dreamweaver, using the Code view, and then open the file in a browser and open the "inspect" menu on the side, to highlight different areas and see what effects do what. I've used the split view, but found it doesn't always update, and I like having that direct control.
I do also use Notepad ++ for more simple work, or for editting an html file if I know specifically what I want to do. I use Photoshop to do layout planning, but will also just grab a piece of paper and draw something out.
For debugging, I use the tools built into the browser currently, and I use the W3C validator to remind me to add lang="en" when I forget. I plan to also use a screen reader, to run my site through, so I can design the code with an eye to accessibility. When I did the Travel Blog last semester, I used a lot of divs to create the layout, but when I made the Coursework Site this week, I tried to use more semantic html markup (which apparently makes it weird at first if you want to use grid for the structure of the page) so that it would flow better in an ereader or other mobility tool. I plan to be working on the Coursework site also, while doing the coursework.
I've collected a few favorite sites that I like to use for reference material, that I'll post below incase any of them would be helpful to you guys!
Links
- How To Keep Your CSS Grid Layouts Accessible
- Modern CSS Solutions for Old CSS Problems
- The Experimental Layout Lab
- LayoutIt
- Flexbox Froggy
Back
Next Tutorial