Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
What is the Internet? We need to understand some of the basics to the underlying tech so we can understand why websites work the way they do.
I can describe a brief history of the Internet's origin and impact.
I can write a professionally formatted email.
You will receive comprehension questions about why the Internet was made, the very basics of its technology, how the technology grew, and its significance to society.
You will send a professional email (check against this guide) taking a position on whether the Internet is a basic human right.
(Codecademy) Get started on the first HTML unit
The Internet is mankind's greatest achievement. Mr. Adiletta takes a dramatic position on the Internet as a basic human right. The evolution of human intelligence goes beyond the growth of our brain. and into the development of communal stories, into libraries, and then into the Internet. The Internet is a product of human evolution and is the birthright to all people.
The Internet is a part of your mind and you have the right to use your brain.
During the height of the Cold War, the threat of a Soviet attack motivated the funding of a research project to build a web of communications lines. In such a network, if one line was cut by an attack, communications would proceed uninterrupted through alternate lines in the network. The beginnings of our TCP/IP network was produced.
In his 2000 Presidential campaign, Al Gore rightly took some credit in the creation of the Internet. No, he did not help develop the TCP/IP network. However, after the ARPANET project was complete, the ownership of the underlying technology was in question. It was offered for sale to at least one telecommunications company but they passed on buying the Internet not knowing what it would be good for. Al Gore was a part of a congressional effort to make TCP/IP a public resource. No one owns the Internet because of that. He also helped establish support to connect people--something we have a moral obligation to continue.
After watching this video, take a moment to think about why this video seems silly. It's not just her rockin' hair and vest or the British perspective of the American president. It may be the many, giant screens. But more specifically it's how the changing technology has changed our impressions. She talks about shopping on the internet as a future possibility and not something that everyone does like it's no big deal. Again, take a moment to understand that the Internet is a big deal.
OSI model: The basis of the Internet. This describes how the TCP/IP network started by the Defense Department has evolved.
Internet Protocol (IP): A system for addressing and routing communication over a network. You can make up all the addresses you want on a private network, but the IANA is the authority of the public's IPs and domains.
Domain Name System (DNS): A sort of phone book that changes or resolves domain names into IP addresses
A Record: routes primary domains like google.com
C Record: routes subdomains like mail.google.com
MX Record: routes email addresses. That's why emails @gilmour.org go to a different server than what's hosting the website at gilmour.org
There are many free tools that help you learn about domains. These are very helpful for web designers as you may want to check on the current host of a client interested in a site redesign. Try looking up the record of a few domains using one of these tools:
Use project management software to be accountable for professional-caliber design work.
I can build a professional-caliber file system.
I can collaborate with my team through a KANBAN board.
While often used for online storage, Google Drive's offline functionality unlocks its potential for design projects. You and your team can work on Adobe AI and Photoshop files without an internet connection by enabling offline access. Shared folders within Drive serve as central hubs for exchanging design files and planning materials like Google Docs. This seamless collaboration ensures everyone stays on the same page, regardless of location or internet availability. This technique is crucial for delivering professional-caliber design work in a collaborative environment.
ProjectName
Loose in the folder can be branding documents, collections of text in Google Doc and other guides.
STOCK
Collect images from allthefreestock.com and other sources. These are raw images that will need to be resized and possibly color-treated.
HTML
Any coding elements get stored in this folder
IMG
Edited images ready for the web.
LOGO
Adobe files and your logo package
RESEARCH
Collect relevant articles, screenshots of other websites for comparison, etc.
Initially developed by Toyota to optimize manufacturing, KANBAN boards have become a popular project management tool across various industries, including design. Their simplicity lies in their visual, three-columned structure: Backlog, In Progress, and Done. This straightforward visualization aids communication and transparency, allowing every team member to grasp the project's status at a glance. KANBAN's power lies in its ability to manage project flow. Tasks move from Backlog to In Progress, signifying active work. Once completed, they shift to Done, signifying progress and freeing up space for new tasks. This system prevents overloading team members and keeps complex projects manageable, even for large-scale design endeavors. Whether collaborating remotely or in person, KANBAN boards ensure transparency, focus, and continuous project flow, propelling your design project toward successful completion.
Every Trello card is a vital piece in our project puzzle. Here's what makes a great one:
Title: Keep it simple and descriptive. Focus on the problem, not the solution ("Broken Link on Homepage" versus "Update Header Navigation").
Description: Explain the issue itself, avoiding descriptions of actions taken. Let the details flow freely so others can understand the scope of the problem.
Visuals: Paint a picture! Paste screenshots directly onto the card to clearly illustrate the issue and where it occurs.
Teamwork: Ensure the right team is aware. Tag the appropriate team members who can tackle this specific problem.
Backlog to In Progress: When the card is ready for action, drag it to the "In Progress" column. Now's the time to assign ownership! Choose the individual(s) directly responsible for working on the issue, not the entire team.
Progress Tracking: Before marking the card "Done," log your activity in the comments section. Share screenshots, code snippets, or any relevant updates to document your progress.
Time Transparency: Be kind to your future self (and colleagues)! Track your work in 15-minute increments. This detailed time log will prove invaluable when creating project invoices.
Remember, clear and concise Trello cards are the key to smooth communication, effective collaboration, and, ultimately, project success. Let's build clear cards and conquer those sprints!
You'll have to make your own cards, but here's some starting ideas:
We'll be using Trello to track your progress and to coordinate a team project. Each task or card must be a specific task that can be achieved preferably within a class period or at least within a week. The measurement or proof of that task's completion should be described in the activity log entry of that Trello card.
What's happening under the surface of a web page?
I can describe how web pages are displayed on my browser using HTTP and HTML.
I can create a basic HTML page.
You will construct an HTML page from scratch in a guided class activity.
You will complete HTML and CSS courses on codecademy.com
If one person had to be named as the creator of the Internet, it might be Tim Berners-Lee in 1989. More specifically, he created the World Wide Web while working at CERN. It was a way of transferring information over the TCP/IP network talked about in last chapter.
The "Internet" we think of is primarily the contents of our web browser. Trying to find information by tediously scanning film after film was not fun. People like Tim Berners-Lee wanted to link text together. So touching one word might connect you to relevant information without having to manually search for hours.
The most important part of a website remains the hyperlink.
HyperText Transfer Protocol is a set of rules to pass information (like the HTML layout of a web page) over a network. HTML is a markup language. It describes the structure and content of a page. So when you type in an web address like google.com into your browser, you're sending a GET request to the Google server. It responds with an HTML package that your browser renders into a familiar display.
A tag looks like this: <tag> </tag>
The stuff that's between the opening <tag> and the closing </tag> is what's inside that element. The first and most important element in a web page is a hypertext link. If I wanted to make a link that went to Google.com, it would look like this: <a href="google.com">this is my link</a>
The term tag describes the structure of the <opening> and </closing>. The element is what type of object is being built by the tag, (an a is a hyperlink). The contents of an element is whatever is between the open and closing tag of an element. The property="value" pair that goes inside of an HTML tag is called an attribute.
Every web page has to have a <!DOCTYPE html> at the very start to tell your browser that yes, this block of text is HTML and it should render it into a display. The <html> element does something very similar. Every page you've ever seen online has been the contents of an HTML tag.
The <head> element isn't seen by the user. The contents of the head allow you to connect other resources to the page, such as fonts or CSS.
CSS has its own style rules. But you drop it into an HTML head like any other HTML, <style> css goes here </style>. You can put the CSS in the HTML file, but the better way is to keep your CSS in a separate file. In that case, you use a <link> element instead to connect the .css file.
Move from a development environment to production
Congratulations! You've poured your creativity and skills into crafting a stunning design project on Replit. While Replit offers a fantastic development environment, the built-in preview webpage has limitations. It can't handle large volumes of users and might have occasional downtime, potentially affecting your project's visibility.
To overcome these limitations and showcase your work to the world, we'll take the next step: deployment. Don't worry; the process is a snap.
Flask has been helping our projects by adding our navbar and footer and such to every page. But now we want to export a copy of the site that doesn't require this fancy tool. That's essentially what we'll be doing by flattening your website. This means converting your project into a static HTML format, eliminating the need for constant server interaction. This static version will be much faster, more reliable, and accessible to a broader audience.
To achieve this flattening magic, I'll use a tool called Frozen-Flask. It's a powerful script specializing in creating static Flask application versions. Once your project is flattened, we'll proceed to the deployment stage. This is where your project finds its permanent home on the World Wide Web: a hosting platform called Netlify.
Think of Netlify as your website's personalized apartment building. It provides the infrastructure and resources needed for your project to be live and accessible 24/7.
Create an account on the site and verify your email address
Once logged in, you'll see an area indicated by a dotted line where you can drop a folder
If your folder isn't uploading, you may images or other files that are too large. Downsize your images or move unneeded files outside of the bootstrap_project folder
Edit your site details so you can change the URL from its randomly-issued name
Submit the URL so it can be graded. Remember, if you make further changes, you need to re-publish your site using the following instructions:
You've been seeing your page update on your local machine. That's not on the Internet and the link in your browser won't work on anyone else's machine as it refers to a file on your computer. But we can deploy the website to free host using Netlify.
All stock content replaced
A color palette implemented uniformly throughout the page and corresponds with the subject of the site
Custom header and body fonts that corresponds
CSS file formatted into sections with color palette written in a comment at the top
CSS rules overwriting theme styles like btn and bg
A new section added to the navbar and the body with smooth scroll working to that location
A new Bootstrap component taken from the documentation
A new CSS class and ID implemented in the CSS and HTML
Images (not in conflict with copyright law) successfully added to img folder and added to site
Build web pages using HTML/CSS and WordPress all according to modern design principles.
The Internet is the largest idea exchange ever built or conceived. Learning HTML, the language of the web, gives you incredible power to represent yourself or your work, or your clients. Let's start first by gathering our resources.
We won't study much JavaScript in this class but it's one of the best ways to take web design to the next level.
Use a Bootstrap template to produce a stunning webpage.
I can build a hero with a call to action.
I can implement a color palette via CSS.
I can build a responsive Bootstrap website.
I can implement Bootstrap classes and components into a website.
Responsive design isn't just about websites looking good on different screens; it's about delivering an optimal user experience on any device. Imagine navigating a complex website on a tiny phone instead of a spacious desktop – the frustration is real! Responsive design solves this by adapting the website's layout, content, and functionality to various screen sizes, ensuring a seamless user journey.
Bootstrap's Grid System:
Bootstrap, a popular framework, makes responsive design accessible. Based on 12 columns, its grid system provides a flexible layout structure. In your example, <div class="col-md-6"> and <div class="col-lg-6"> define elements that occupy 6 columns on medium and large screens, respectively.
Breakpoints and Device Adaptation:
The magic happens with breakpoints and specific screen widths where the layout adjusts. Bootstrap uses predefined breakpoints for @media queries, essentially saying, "When the screen size reaches X, apply these styles." Your task with the inspector window is to find these breakpoints! Look for @media rules defining styles for lg, md, and sm (small) screens. Notice how Bootstrap adjusts the number of columns these classes occupy at each breakpoint.
Exploring Device-Specific Adjustments:
While Bootstrap offers a solid foundation, sometimes device-specific tweaks are necessary. For example, on smaller screens, you might:
Collapse content sections by default and use buttons or icons to reveal them.
Increase font sizes for better readability.
Simplify navigation menus or switch to hamburger menus for better accessibility.
Optimize images for faster loading times.
Beyond Bootstrap:
Remember, Bootstrap is a tool, not a silver bullet. You might need to go beyond its base styles as your projects evolve. This is where understanding CSS media queries and flexbox becomes crucial for more granular control over responsive layouts.
Beyond Screen Size:
While the screen size is the primary factor, a responsive design also considers other aspects:
Device orientation: Portrait and landscape modes on phones and tablets require different layouts.
Resolution: High-resolution displays might necessitate adjustments for image quality and text sizes.
Network speed: Consider loading optimizations for users with slower connections.
The Importance of Testing:
Responsive design isn't a one-and-done task. Rigorous testing on various devices and screen sizes is crucial. Use browser emulators and real devices to identify and fix any layout issues and ensure a consistent user experience across platforms.
Replit: Our Cloud-Based IDE
What is Replit? Replit is an online platform that acts as an Integrated Development Environment (IDE). Think of it as a workspace in your browser where you can write code, run your website, and collaborate with others in real time.
How does it work in class? Instead of downloading templates, each student will have a pre-provisioned copy of the chosen StartBootstrap template ready to use in Replit. This eliminates the need for individual downloads and setups.
Pros of using Replit:
Convenience: No setup required, access your project from any device with internet.
Collaboration: Work with classmates on your website in real time.
Pre-configured environment: Everything you need to start coding is already set up.
Cloud storage: No need to worry about losing your work; it's automatically saved online.
Cons of using Replit:
Limited customization: Replit may have limitations compared to desktop IDEs like VS Code in terms of customization and plugin options.
Offline access: You need an internet connection to access your project in Replit.
,VS Code with Downloaded Template:
What is VS Code? VS Code is a popular, downloadable code editor for your computer. It provides powerful features like syntax highlighting, code completion, and debugging tools.
Using VS Code: You can download the StartBootstrap template yourself and open it in VS Code for editing.
Pros of using VS Code:
More customization: VS Code offers extensive customization options with plugins and themes, catering to your preferred development style.
Offline access: Work on your website even without an internet connection.
Advanced features: Powerful debugging tools and code analysis features for more in-depth development.
Cons of using VS Code:
Setup required: You must download and install VS Code and the template.
No real-time collaboration: Working with classmates requires additional tools or sharing downloaded files.
Storage management: You're responsible for saving and backing up your project files.
The Choice is Yours!
Both options have their merits, and the best choice depends on your personal preferences and learning style.
For beginners: Replit's easy access and collaboration features might be ideal.
For experienced programmers: VS Code's customization and offline capabilities could be more appealing.
Choose a template that suits your project's needs.
Click on the template's preview page and find the download button.
Select the option to download the zipped file.
Save the downloaded file to a convenient location on your computer.
Open VS Code.
Go to File > Open Folder.
Select the unzipped folder containing the downloaded template.
Click Open. This will open the entire template structure within VS Code.
Within VS Code:
Go to File > New File.
Name the file custom.css.
Save the file in the appropriate location within your project folder (usually the root directory).
In VS Code:
Right-click on the index.html file and select Open with > Live Server.
This will launch a local preview of the website in your default browser.
Edit the HTML and CSS files directly within VS Code to customize the website.
Update your custom.css file with desired styles.
Save your changes.
The Live Server preview will automatically refresh, reflecting your latest edits.
Use the template's structure and provided classes as a starting point.
Add your own content and modify the HTML as needed.
Refer to the template's documentation for available components and their usage.
Use your custom.css file to personalize the design further.
Keep making changes, saving, and refreshing to see your progress unfold.
Regularly save your project folder to Google Drive for backup and collaboration.
Explore Bootstrap's extensive documentation and online resources to learn more about its features and customization options.
Remember, practice makes perfect! Start with this guide, experiment, and have fun creating your unique website!
In the same folder, create a new file: custom.css. Next we'll need to connect the css file to the folder html file.
Hard, smart: (select JavaScript)
Fun: (select JavaScript)
. Twitter publishes a front-end framework that has significantly impacted web designers. It's great, and you'll spend a lot of time with .
Here's another fun exercise. Let's open up again, set up Bootstrap, and customize a button. Check out some simple examples from the ever-helpful W3schools:
Look at some of the .
Visit StartBootstrap () and browse their collection of free templates.
Let's talk about the design in web design.
I can describe the difference between raster and vector.
I can describe the difference between serif and sans serif.
I can iterate on my design.
I can use Photoshop's masking layers and quick select tool.
I can create a logo in Adobe Illustrator.
One of the first decisions to make when starting a new project is your font selection. It helps set a lot of the tone for your site. Typically, I select a header font and a body font--something fun for titles and something easy to read for my paragraphs.
Another key mood-setting decision to make is the type of colors you'll use around your site.
Once you've selected your colors, we're going to add a note to your custom CSS like so:
Adjust your colors!
Choosing a hero image isn't just about visual impact; it sets the color palette for your entire website. Remember that initial color inspiration you had? Time to revisit it! Once your hero image is finalized, re-evaluate your chosen color scheme. Does it complement the image's tones and moods? Can you pull color accents directly from the image itself? Aligning your color scheme with your hero image fosters visual cohesion, ensuring a seamless and aesthetically pleasing browsing experience for your visitors. Don't let your hero stand alone; let its colors sing throughout your website's design.
Webpages have agendas. The author wants the reader to do something, read something, buy something. Especially on a hero, you need to make the key action item into an exciting call to action button.
If your image has been zoomed in or stretched too far, and it's a rasterized image, you'll notice the pixels that make up the image. That's a problem. But the solution is not to use a super high-resolution image with a big file size. That'll just make your webpage take forever to load. We need the right resolution each time.
Use vector where you can. Raster, if the image is the right resolution, looks great. The image below can confuse students into thinking raster is always blurry.
Check out this article about the top five mistakes most common in small companys' websites.
Navigation that isn't simple, logical and explanitory
No clear calls to action
Insufficient contrast between text and background or clashing colors
Jumbled, unengaging, or unorganized content
Clutter
Backgrounds and most colors should NOT try to grab your attention. Most of it should be steady, comfortable patterns. Subtly is hard for students eager to splash bright colors on the page. That's why we study examples of great pages. Look how chill most of their decisions are... it makes the touches of bright color really exciting.
Brains love patterns and it can hurt when they're broken. Patterns exist in grammar, color, lines and all sorts of other things too.
Less is more.
Lots of clear space with well-organized boundaries can create a "clean" feel. Example.
There is a constant variation in what's trending in web design styles. Here are three of the most popular. The last, flat, is more related to colors and icons and less known as a style.
Photoshop works with rasterized images (as opposed to vector images). Let's discuss the difference first.
We're going to learn about three basic skills:
Let's learn a little about types of images. Now we'll practice masks.
Our themes typically come with images perfectly formatted for the area. Instead of taking a new image and trying to crop and adjust it into the right size, I simply edit the original image in Photoshop. Once it's open, I'll drag and drop the new one on top of that.
We add in new adjustment layers to tweak colors. Turning down the brightness on a hero image so that it lets your CTA stand out more is a common technique.
Consistency in colors, branding across all your emails and publications (attention to things like favicon).
PNG and JPG images
Wide but thin logos (banner format)
Square shaped logos
Large, medium and small file types
Original .ai files as well as exported versions
Reversed colors for dark backgrounds as well as light backgrounds
Find a tutorial that gets close to the effect you want. Follow along and then try to tweak and customize it.
If I can't hire a graphic designer for my client, I start with a template purchased from GraphicRiver.
I can configure a project folder in a cloud-based file system.
I can customize the elements of an HTML template.
I can publish a completed webpage and share the link with my friends.
I can take feedback on my website and publish an improved draft.
Colors
Let's identify a rule that's being used by our theme and overwrite it.
We all have to edit our work. We need to collect feedback, review, make a list, and add improvements to our project. The more you repeat this process, the better your end product (as well as first draft on your next project).
Add a <div id="cover"></div> on the first line of your <body>. Then at the very bottom, add the following script:
And we'll add the following code to our custom.css.
Let's get back to the Bootstrap and shop for a new component to add to our site.
If you're not frequently having to look things up (and finding W3Schools) you're not trying out enough new things.
Our Bootstrap template uses , which is a really handy JavaScript library. JavaScript is a programming language that runs right inside your browser. Most of what you do with jQuery can be done in plain-old vanilla JavaScript. We use jQuery to make life a little easier.
