So what can I do over the summer?
Summer is your chance to figure out what you like about web development and try and get good at it. Coding, design, usability – any one of these is more than enough for an entire career in the web industry.
Build something, doesn't matter what as long as it has some complexity. When finished look at what went well and what went badly. Throw away the code and do it again with what you've learned
— 𝔹𝕒𝕣𝕟𝕖𝕪 𝕊𝕔𝕠𝕥𝕥 (@bmds) March 21, 2018
Use this time to get as comfortable as you can with code and debugging it. If you are doing Agency Ready or a practical web project, the more time you spend now – reading code, studying it, understanding what each line does, using a web inspector in your browser to find out what’s going on – will pay off next academic year.
You will be reaching real understanding when you can predict what your code will do before you refresh the page.
What to do first
- Start a twitter account and figure out who to follow in the web industry (you can start with us: @eskins and @wilsond – we’ll re-tweet interesting things we see). Check out who we follow, and look for threads like these where people are discussing the kind of things you might want to do in Agency Ready.
- Keep in the back of your mind: do you want to be a designer or a front end developer? What things about making websites seem easy to you, or do you enjoy doing?
- Your last year will go quickly. Start to think about how you will prioritise your work.
- Make things. Find a project and run with it. It’s so much easier to learn new things if you have a goal in mind, even if that goal only makes sense to you.
- If you want to be a front-end developer, look at what people are making on CodePen, or CodeSandbox if you want to try out JavaScript frameworks like React.
- Learn your coding tools, and make them fit you. Learn keyboard shortcuts to copy and paste code, to save and close files – they are faster and more accurate. If there are things that have annoyed you about your text editor, spend time customising them. Choose a new theme or change the typeface.
- There are lots of design tools out there to try: Figma and Adobe XD are both free. Both of these also have apps so you can preview your design on your mobile: Figma Mirror and Adobe XD mobile.
- Learn to draw, or start to think about how you can rapidly prototype ideas. Being able to work at different fidelities will make your development process faster and better.
Taking things further
- Learn markdown: a faster way to write HTML (which you can also convert into PDFs, word documents, etc etc).
- View source on every website you visit, and read the code: what are they doing you can learn from?
- Start a blog with Jekyll or another static site generator.
- Write up each little project. Embed CodePens. Let future employers see your enthusiasm.
- If you’re interested in design, look at lots of other websites. Sign up for site inspire’s newsletter or go to sites like klikkentheke or awwwards. Why are they good/bad? Take screenshots to inspire your own work. How do they create the effects you see?
- For developers: do Wes Bos’ 30 days of vanilla javascript course.
- Learn how to use the inspector in Firefox or Chrome. Firefox has the grid inspector – try that out too.
- Install an FTP programme like WinSCP (PC) or Cyberduck (Mac) and upload content to 34sp through it. Even better, try out something like Netlify and GitHub to deploy a website.
- Install every web browser you can find (apart from Opera) – look at things like Firefox developer edition and Chrome canary.
- Install a local webserver (MAMP for Mac, XAMPP for PC) and run some PHP on your own computer, without having to upload it to 34sp.
- Get yourself a CodePen account. Take a look at Derren’s pens.
- Learn about vector graphics and SVGs, either creating them with a vector graphics tool like Figma or in code.
- Sign up for web-related newsletters: CSS tricks, Responsive web design weekly, CSS layout news, UX Alertbox, A List Apart – there are hundreds of them.
Client work and your final year project
If you are doing a practical web project, you will need to learn how to work with a client: try watching this video from Mike Montiero as a starting point (it starts about 40 minutes in, but you can always go back to the start):
- Watch more from Mike: dealing with clients. He blogs a lot about the business of design and how to be professional on Medium. Also read his two books, Design is a job and You’re my favorite client. Both will be incredibly useful when it comes to your third year practical project.
Watch and Learn
Remember you have access to Lynda.com, with lots of code and design tutorials. Lynda.com also has an app so you can watch the videos offline.
Many conferences also post their talks online: here’s the Front End North talks from 2018. Some conferences list the resources their speakers use: here’s an example from the last An Event Apart conference in Seattle.
Watch Jen Simmons talk about how layouts have changed on the web and how things will keep changing:
You can watch Jen Simmons live code a grid layout in front of an audience (listening to people explain their process can be even more useful than seeing the final result), and sign up to her Layout land YouTube channel.
Read and Learn
MDN is the Mozilla Developer Network, publishing all sorts of developer resources:
- Learn web development from scratch
- Everything you wanted to know about HTML
- CSS tutorials and reference
- Learn Javascript.
Books for designers and developers
- Anything and everything from A Book Apart.
- Look at your reading lists – Media Making · level 4, Web Site Development · level 5, Agency Ready · level 6 & UXD · level 6
HTML
You will loose marks if you can’t write semantic, clean HTML.
- Read Shay Howe’s Learn to code HTML & CSS online or from the library (or buy it).
- Read Heydon Pickering’s Inclusive Design Patterns book (it’s in the library: this is good for modern HTML markup and accessibility)
- Read Jeremy Keith’s HTML5 for web designers
Accessibility
Accessibility and HTML are closely related – see Heydon Pickering’s book above. You can’t master HTML without thinking about accessibility at the same time.
- In the library – Pro HTML5 accessibility: building an inclusive web by Josh Connor.
- Don’t miss Accessibility for everyone by Laura Kalbag. Also at the A Book Apart website.
Usability/UXD
Even if you aren’t doing UXD any website you make will be improved if you think about the user first.
- Read both of Steve Krug’s books – Don’t Make Me Think & Rocket Surgery Made Easy
- Simple and Usable Web, Mobile, and Interaction Design by Giles Colborne.
- The design of everyday things by Don Norman.
- Sprint: how to solve big problems and test new ideas in just five days by Knapp, Kowitz & Zeratsky.
CSS
Front-end developers need to demonstrate they are comfortable researching and using new CSS every time they start a new project. Designers need to understand CSS to create buildable designs.
- Rachel Andrew, The new CSS layout
- Jen Simmons’ Layout land videos
- Have a look around the CSS Zen Garden
- Andy Clarke’s diagram will help you understand and get familiar with all the CSS selectors
- Read Sara Soueidan’s blog
- Read Harry Roberts’ CSS guidelines
- Read the CSS Flexbox page on CSS tricks over and over.
JavaScript for front end developers
JavaScript will be something all employers of front-end developers will be looking for. Start with the basics: learning a framework will only cause you problems when it’s discarded for the next cool thing.
- Try taking some of Wes Bos’s courses
- Do some reading around PWAs (Progressive Web Apps) and web APIs
- What is Babel.js? What is it good for? There are Lynda.com videos to help you set this up.
- Javascript changed quite a lot from the ES5 version of the language to ES6: what are the differences?
- Codepen: have an explore
- Try this Web APIs demonstrator in Chrome Canary. If you are doing Agency Ready, your second assessment will be a demonstrator like this.
Front end development in general
- Have a read of this massive list of links to front-end development resources
- Re-read 24 ways: a massive repository of all sorts of front-end development blog posts
Design and Typography
Starting with typography (and reading the content) is a good way in to any design task.
- Read Richard Rutter’s book – it’s in the library.
- Read Jason Santa Maria’s book and some suggested reading
- Find out about how print designers have used grids. How are web designers using them?
- Read Derek Birdsall’s Notes on book design – it’s in the library. It isn’t about web design but if you want to know how to create something worth reading this book is excellent.
- Typewolf looks at type trends online.
- Look at some type foundries: e.g. Klim, Process, TypeTogether, or MyFonts. There are hundreds of them.
Long reads
Complete books published on the internet. This is by no means a complete list.
- Paul Ford, what is code?
- Jeremy Keith, Resilient web design
- Frank Chimero, The Shape of Design
- Brad Frost, Atomic Design
- Mark Boulton, Designing for the web
- UsTwo, Pixel Perfect Precision
Some classic blog posts to read
It’s important that you think in a web-focussed way. Graphic design is an important precursor to web design but our needs and contexts are different. Of all of these, read The Dao of Web Design first. Even though it’s 17 years old, the ideas are still highly relevant.
- John Allsop, A Dao of Web Design
- Jeremy Keith, Caveat
- Oliver Reichenstein, Web Design is 95% Typography
- Dean Allen, Reading Design
- Khoi Vinh and Mark Boulton, Grids are Good (Right?)
- Mark Boulton, A Richer Canvas
- John Gruber, The Location Field Is the New Command Line
- Aaron Gustafson, Understanding Progressive Enhancement
- Maciej Cegłowski, Build a Better Monster
- Dave Shea, CSS Sprites: Image Slicing’s Kiss of Death
- Dan Cederholm, Faux Columns
- Eric Meyer, CSS Design: Going to Print
- Jeffrey Zeldman, From Table Hacks to CSS Layout: A Web Designer’s Journey
- Andrei Heraimchuk, I would RTFM if there was FM to FR
- John Gruber, Ronco Spray-On Usability
- Jeremy Keith, Web! What is it good for?
Even people who have been doing this a long time find learning new things difficult. Little and often is better than trying to master everything in one day.
Read, practice, breathe. Read, practice, breathe. Read, practice, breathe.