css

Designing A Website in Wordpress with Divi

Posted on Updated on

At 1:45pm on 3/22/2018, I attended Designing A Website in WordPress with Divi, presented by Jonathan Ross, at the 2018 North Carolina Computer Instruction Association Conference in At Asheville-Buncomb Technical Community College in Asheville, NC.

First, we downloaded some instructions and resources from: http://goo.gl/5QLeH3

It was also suggested that Flywheel Local could be a nice asset to consider in future. We will be using Elementor, a free user item, which is nice, because its free, and free is a price we can afford in this training. We installed through pantheonsite.io. The instructions are available.

We began discussing the basics of wordpress- pages and posts, and downloaded “Elementor” plugin. I also downloaded “Addons for Elementor” because it was on the same page and had additional elements for portfolios using masonry.

We adjusted the .htaccess file that the URLs should change within the permalink area. By adjusting the permalinks to /%category%/%postname%/. This was actually pretty cool, but its really only for adjusting and making adjustments for non-blog sites.

With the Elementor plugins, I was able to build these items out in a drag-and-drop environment. This would be an interesting addition to the material. This has a lot of cool information in here, although its a large group of items that you’ll have to learn how to make it happen. I particularly enjoyed the use of typography and its integration with google fonts, as well as the ability to work with portfolio items. So, I’ll be looking into that. I thought the animation options could be fairly cool to work, and I hope our students don’t get too crazy.

Integration with CSS IDs, CSS Classes, seemed nice. However, it looks like it might be just as nice to tag items with content, and then revisit later and adjust those CSS items. CSS background items and gradient overlays seem like they have some great options in here though.

Once layout items are fully built, that seems like the best time to adjust the CSS and look/feel options. This stuff looks really fantastic. On the one hand, lots of students will be real excited to see that. On the other hand, probably a bunch of angry portfolio students. So, take the good with the bad.

Within the builder, there are items that allow you to begin with templates. This was very cool, and allowed you to install those items and view your way through them. Gathering the assets, planning out what to do, and then creating the pieces you want to see and how to ensure that they’re going to work in the way you wish. This is very neat, and allows us to learn along the way into how they’ve been built and how to emulate it.

Advertisements

Microsoft Technology Associate (MTA) status in Introduction to Programming Using HTML and CSS Achieved!

Posted on Updated on

At 10:45am On 3/22/18 I attended the Certiport certification lab presented by Certiport at the 2018 NCCIA Conference located at Asheville-Buncomb Technical Community College in Asheville, NC.

MTA-Introduction-to-Programming-using-HTML-and-CSS-2018Tyler Dockery Achieves MTA status in Introduction to Programming Using HTML and CSS

MTA status in Introduction to Programming Using HTML and CSS Achieved!

I chose to attempt this exam because I felt I could validate the skills and knowledge to recognize and write syntactically correct HTML and CSS, structure data using HTML elements, and create and apply styles using CSS. Since I was trained on HTML in 1996 and certified with CSS in 2001, and had been working with HTML and CSS with clients for 18 years at this point, I’m familiar with their features and capabilities, and understand how to write, debug, and maintain well-formed HTML and CSS code.

The Official Breakdown of Subject Matter

Microsoft’s official exam page for this test: MTA EXAM 98-338 outlines the following fundamentals will possibly be covered:

 

Understand HTML Fundamentals (10-15%)
  • Construct markup that uses metadata elements
    • Script; noscript; style; link; meta tags, including encoding, keywords, viewport, and translate
  • Construct well-formed markup that conforms to industry best practices
    • DOCTYPE declaration; HTML; head; body; proper syntax, including closing tags and commonly used symbols; comments
Understand CSS Fundamentals (15-20%)
  • Analyze the impact of using inline styles, internal style sheets, and external style sheets
    • When to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets
  • Construct and analyze rule sets
    • Valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class
  • Construct well-formed style sheets that conform to industry best practices
    • Reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts
Structure Documents Using HTML (30-35%)
  • Construct and analyze markup to structure content and organize data
    • Table tags; h1-h6; p; br; hr; div; span; ul; ol; li
  • Construct and analyze markup that uses HTML5 semantic elements
    • Semantic tags; header; nav; section; article; aside; footer; details; summary; figure; caption
  • Construct and analyze markup that implements navigation
    • Image links; a; target; bookmark; relative versus absolute links; navigating simple folder hierarchies
  • Construct and analyze markup that uses form elements
    • Form attributes; action; method; submission methods; accessibility; input types and restrictions; select; textarea; button; output; option; datalist; fieldset
 Present Multimedia Using HTML (10-15%)
  • Construct and analyze markup that displays images
    • img and picture elements and their attributes
  • Describe the appropriate use of the img, svg, and canvas elements
  • Construct and analyze markup that plays video and audio
    • Video; audio; track; source; simple iframe implementations
Style Web Pages Using CSS (20-25%)
  • Construct and analyze styles that position content
    • Positioning, including float, relative, absolute, max-width, overflow, height, width, and align; inline versus block; visibility; box model, including margins and padding
  • Construct and analyze styles that format text
    • Font-family; color; font-style; font-size; font-weight; link colors; text formatting, including text alignment, text decoration, and indentation
  • Construct and analyze styles that format backgrounds and borders
    • Border-color; border-style; border-width; backgrounds; divs; colors
  • Analyze styles that implement a simple responsive layout
    • Units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width

Conclusion

All in all, this test was well worth the time and effort. The materials covered had a good amount of in-depth knowledge requirement, and I was able to break through with a score in the mid 900s. It was a good challenge, and I felt it will be helpful to me to show students that the MTA exams are a fine choice to showcase their abilities.

Alison.com — Diploma in Web Design Achieved!

Posted on Updated on

On October 27th, 2014 I completed the Diploma in Web Design provided by Alison.com

Alison_CoursewareIntro_256

Alison.com — Diploma in Web Design Achieved!

This coursework was completed over several weeks. This course goes beyond knowing how to create a HTML page and add content, title, entities, anchor tags, encompassing inserting images, present tags, links, tables, lists and uploading web pages. Coursework included a strong understanding and demonstration of the meaning of inheritance, cascade, pseudoclasses, pseudoelements and selectors … the concepts that are commonly used in web pages.

This required the demonstrated familiarity with using font, background styles and style sheets. This course help you to use Dreamweaver to create a website with HTML, CSS, JavaScript, and Flash. It requires the understanding of naming conventions, index files, welcome screens, landing pages, GUI and many more settings that are extremely useful when creating a website successfully. This course also required an understanding of advanced features such as CSS structures, embedded style sheets and much more. Final requirements demand a knowledge of how a web page works as well as a deep knowledge of hosting, domain names and nameservers.

This coursework was originally based on Russell Stannard’s teaching and research experience – and the feedback of his many thousands of students.

GDA Lecture: Responsive Web Design, a Hands-on Approach

Posted on Updated on

On Wednesday, February 13th, Tyler Dockery gave an hour-long discussion and hands-on training on responsive web design to the FDA.
Learn about responsive web design with Tyler Dockery

GDA Lecture: Responsive Web Design, a Hands-on Approach

The talk outlined the basics of responsive design, how it differed from adaptive design, and was concluded with a hands-on demonstration in which students could create their own responsive page from a template [ code provided below ].

The Mac Lab was filled and several students remained without computers to discuss the materials and observe the lecture. Q&A after the session covered numerous topics, such as how to use media calls in CSS to reconfigure your responsive pages, and how to organize your content for mobile devices.

He provided two files for the discussion:

First, a word document outlining the basics of responsive design, and giving some great links to websites which students can use to learn more of responsive design basics. The DocX can be downloaded below:

Responsive Discussion Document

Second, a Dreamweaver file with a basic website already coded. Additional CSS has been added BELOW the HTML which will make the page adapt if the screen size becomes 600px or smaller. Cut the commented CSS and add it within the bottom of the <style> tag.

 As this version of wordpress will NOT allow .html files to be uploaded, AND .zip files with .html files insider are also banned, the entire source code will be posted below for those interested.


<html><head><title>Responsive</title>
<style>
body {
background-color:grey;
width: 1024px;
}
.container {
width: 93.75%; /* 960 / 1024 = 93.75% */
height:auto;
margin: 0px auto;
background-color: white;
}
.head {
width: 100%; /* 100% */
height:80px;
background-color: lightgray;
}
.nav {
width: 31.25%; /* 300 / 960 = 31.25% */
height: auto;
float: left;
}
.nav a {
display:block;
}
.content {
width: 66.66666667%; /* 640 / 960 = 66.6666666666667% */
margin-left: 10px;
margin-right:10px;
background-color: lightblue;
height:auto%;
float:right;
}
.footer {
width: 100%; /* 100% */
background-color: pink;
height:80px;
clear: both;
}/* Media Screens Below */</style>
</head><body>
<div class=”container”>
<div class=”head”></div>
<div class=”nav”>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
</div>
<div class=”content”>Whole biggity-bunch of content</div>
<div class=”footer”></div>
</div><!–@media (max-width:600px) {
.nav, .content {
float: none;
width: 100%;
Height: auto;
clear:both;
margin: none;
}
.nav a {
float: left;
margin-right: 10px;
display: inline;
}}
–>
</body></html>

If you’re interested in learning more about Responsive Web Design, please feel free to come and visit with me in my office, 321C in the ETB building. If you enjoyed this or any presentations, please let us know and let us know what you’d like us to present on in the future!

CSS3 Certification Acheived!

Posted on Updated on

CSS3 certification is one of three certifications I a working on at this time… and it will be the last time I do this again- its just too much work to study for so many and still pass! I have been using CSS in my web design since the year 2000, and I must say that I see some great potential for typography on the web with this newer version. Shadows, rounded corners, I think this stuff is gonna be great! So now, when will IE step up to the plate and allow it to REALLY WORK?? Testing 3 examinations in one day… whew! BrainBench, what was I thinking?

css3

HTML5 Certification Achieved!

Posted on Updated on

I learned HTML initially in East Carolina University (ECU) and University of North Carolina at Greensboro (UNCG), emerging in 1994 with a minor smattering of understanding. In 2000, I took classes at the University of Georgia (UGA) to get HTML and CSS firmly under my belt. HTML5 is a new and emerging standard for web designer. Since I teach a little of this, my HTML5 learning has all been self-taught. Getting this certification is a reflection of study and understanding of the newest upgrade to HTML. So, I determined to get my certifications with BrainBench

html5